three.js的相机 - 技术栈

透视相机 PerspectiveCamera

PerspectiveCamera 定义了一个 视锥（frustum） 。frustum 是一个切掉顶的三角锥或者说实心金字塔型。说到实心体solid，在这里通常是指一个立方体、一个圆锥、一个球、一个圆柱或锥台。

PerspectiveCamera通过四个属性来定义一个视锥。near定义了视锥的前端，far定义了后端，fov是视野，通过计算正确的高度来从摄像机的位置获得指定的以near为单位的视野，定义的是视锥的前端和后端的高度。aspect间接地定义了视锥前端和后端的宽度，实际上视锥的宽度是通过高度乘以 aspect 来得到的。

以下为旋转立方体为例

js 复制代码

// 导入
import * as THREE from 'three';

// 场景
const scene = new THREE.Scene();

// 相机
// params 视野角度，宽高比，近裁剪平面，远裁剪平面
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );

// 渲染器
const renderer = new THREE.WebGLRenderer();

// 设置渲染器大小
// params 宽度，高度
renderer.setSize( window.innerWidth, window.innerHeight );

document.body.appendChild( renderer.domElement );

// 立方体
// params 宽度，高度，深度
const geometry = new THREE.BoxGeometry( 1, 1, 1 );

// 材质
// params 颜色
const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );

// 网格
// params 几何体，材质
/*  网格是一个接受几何体并将材质应用于其上的对象，
    然后我们可以将它插入场景中并自由移动。
    */
const cube = new THREE.Mesh( geometry, material );
scene.add( cube );

/*  当我们调用 scene.add() 时，
    添加的对象会被放置在坐标 (0,0,0) 处。
    这会导致相机和立方体重叠在一起。为了避免这种情况，
    我们只需将相机稍微向外移动一些
*/
camera.position.z = 5;

// 渲染场景
// params 场景，相机
// renderer.render( scene, camera );

/**
 * 动画循环
 * @param {number} time - 时间戳
 */
function animate( time ) {
    // 旋转立方体
    cube.rotation.x = time / 2000;
    cube.rotation.y = time / 1000;
  renderer.render( scene, camera );
}

// 设置动画循环
// params 动画函数
renderer.setAnimationLoop( animate );

正交摄像机 OrthographicCamera

和指定一个视锥不同的是，它需要设置left，right top，bottom，near，和far指定一个长方体，使得视野是平行的而不是透视的。

我们将left和bottom设置成 -2 right 和 top设成 2，这样就使盒子宽为四个单位，高四个单位。

我们的BoxGeometry( 1, 1, 1 );设置为1个单位，所以此时立方体是可以在4*4中正常展示的

js 复制代码

// 正交投影相机
// params 左，右，上，下，近裁剪平面，远裁剪平面
/*  和指定一个视锥不同的是，
    它需要设置left，right top，bottom，near，和far指定一个长方体，
    使得视野是平行的而不是透视的
*/
const camera = new THREE.OrthographicCamera( -2, 2, -2, 2, 1, 1000 );

// 渲染器
const renderer = new THREE.WebGLRenderer();
// 设置渲染器大小
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

// 立方体
// params 宽度，高度，深度
const geometry = new THREE.BoxGeometry( 1, 1, 1 );

// 材质
// params 颜色
const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
const cube = new THREE.Mesh( geometry, material );
scene.add( cube );

/*  当我们调用 scene.add() 时，
    添加的对象会被放置在坐标 (0,0,0) 处。
    这会导致相机和立方体重叠在一起。为了避免这种情况，
    我们只需将相机稍微向外移动一些
*/
camera.position.z = 100;
// 由于已经是平行显示的，所以摄像机的距离只要在立方体前方就会正常显示，不会因为透视原因而改变立方体大小

如图

此时角色（摄像机）离近屏的距离不太近就不会影响到对物品（立方体）的观测

同时物品的位置也不能超出整个画布