ThreeJs 认识相机

1、前言

3D 世界中的相机是一个抽象的描述，其模拟了咱们在真实世界中透过相机来看世界的这么一个场景。当咱们透过相机来看这个世界时，在相机的镜头可见范围内的物体就仍然被咱们所见到，而不在其范围内的物体则好像被裁剪出去了。最后，当咱们按下拍照按钮后，本来咱们所见的真实的 3 维世界则变成了一张 2D 的相片。

咱们在选择不一样相机的镜头时，所获得的效果是不同的。在 3D 世界中，选择不一样的相机，就能够当作是选择不一样的相机镜头，其获得的效果也是不同的。

2、概述

相机自己就是一个 Object3D 对象。通常咱们经常使用的是 PerspectiveCamera 和 OrthographicCamera。

3、认识相机

1.Camera

2.OrthographicCamera

var camera = new THREE.OrthographicCamera( width / - 2, width / 2, height / 2, height / - 2, 1, 1000 );
scene.add( camera );
复制代码

3.PerspectiveCamera

var camera = new THREE.PerspectiveCamera( 45, width / height, 1, 1000 );
scene.add( camera );
复制代码

4.StereoCamera

5.CubeCamera

// Create cube camera
var cubeCamera = new THREE.CubeCamera( 1, 100000, 128 );
scene.add( cubeCamera );

// Create car
var chromeMaterial = new THREE.MeshLambertMaterial( { color: 0xffffff, envMap: cubeCamera.renderTarget } );
var car = new Mesh( carGeometry, chromeMaterial );
scene.add( car );

// Update the render target cube
car.setVisible( false );
cubeCamera.position.copy( car.position );
cubeCamera.update( renderer, scene );

// Render the scene
car.setVisible( true );
renderer.render( scene, camera );
复制代码

6.ArrayCamera

var cameras = [];

				for ( var y = 0; y < AMOUNT; y ++ ) {

					for ( var x = 0; x < AMOUNT; x ++ ) {

						var subcamera = new THREE.PerspectiveCamera( 40, ASPECT_RATIO, 0.1, 10 );
						subcamera.bounds = new THREE.Vector4( x / AMOUNT, y / AMOUNT, SIZE, SIZE );
						subcamera.position.x = ( x / AMOUNT ) - 0.5;
						subcamera.position.y = 0.5 - ( y / AMOUNT );
						subcamera.position.z = 1.5;
						subcamera.position.multiplyScalar( 2 );
						subcamera.lookAt( 0, 0, 0 );
						subcamera.updateMatrixWorld();
						cameras.push( subcamera );

					}

				}

				camera = new THREE.ArrayCamera( cameras );
				camera.position.z = 3;
复制代码

4、总结

在目前的实际项目中，通常使用的就是 PerspectiveCamera，其余相机几乎没有用过。所以，先掌握好 PerspectiveCamera 应该就能应会大部分需求了。