ThreeJs 认识相机

一、前言

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

我们在选择不同相机的镜头时，所得到的效果是不一样的。在 3D 世界中，选择不同的相机，就可以看成是选择不同的相机镜头，其得到的效果也是不一样的。

二、概述

图片描述

相机本身就是一个 Object3D 对象。一般我们常用的是 PerspectiveCamera 和 OrthographicCamera。

三、认识相机

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;

图片描述

四、总结

在目前的实际项目中，一般使用的就是 PerspectiveCamera，其他相机几乎没有用过。因此，先掌握好 PerspectiveCamera 应该就能应会大部分需求了。