共计 1746 个字符，预计需要花费 5 分钟才能阅读完成。
举荐：将 NSDT 场景编辑器退出你的 3D 工具链。https://ted.sinoccdc.cn/
其余系列工具：NSDT 简石数字孪生 Threejs 如果想把三维场景 Scene 渲染到 web 网页上，还须要定义
一个虚构相机 Camera，就像你生存中想取得一张照片，须要一台用来拍照的相机。
透视投影相机 PerspectiveCameraThreejs 提供了正投影相机 OrthographicCamera (opens new window)和透视投影相机 PerspectiveCamera (opens new window)。本节课先给大家比拟罕用的透视投影相机 PerspectiveCamera。透视投影相机 PerspectiveCamera 实质上就是在模仿人眼察看这个世界的法则。相机地位.position 生存中用相机拍照，你相机地位不同，拍照后果也不同，threejs 中虚构相机同样如此。比方有一间房子，你拿着相机站在房间外面，看到的是房间外部，站在房子里面看到的是房子里面成果。相机对象 Camera 具备地位属性.position，通过地位属性.position 能够设置相机的地位。相机察看指标.lookAt()你用相机拍照你须要管制相机的拍照指标，具体说相机镜头对准哪个物体或说哪个坐标。对于 threejs 相机而言，就是设置.lookAt()办法的参数，指定一个 3D 坐标。// 相机察看指标指向 Threejs 3D 空间中某个地位
camera.lookAt(0, 0, 0); // 坐标原点
camera.lookAt(0, 10, 0); // y 轴上地位 10
camera.lookAt(mesh.position);// 指向 mesh 对应的地位
判断相机绝对三维场景中长方体地位你能够把三维场景中长方体 mesh 设想为一个房间，而后依据相机地位和长方体地位尺寸比照，判断两者绝对地位。你能够发现设置相机坐标(200, 200, 200)，位于长方体里面一处地位。// 长方体尺寸 100, 100, 100
const geometry = new THREE.BoxGeometry(100, 100, 100);
const mesh = new THREE.Mesh(geometry,material);
// 相机地位 xyz 坐标：0,10,0
mesh.position.set(0,10,0);
// 相机地位 xyz 坐标：200, 200, 200
camera.position.set(200, 200, 200);
定义相机渲染输入的画布尺寸你生存中相机拍照的照片是有大小的，对于 threejs 而言一样，须要定义相机在网页上输入的 Canvas 画布 (照片) 尺寸，大小能够依据须要定义，这里先随机定义一个尺寸。Canvas 画布：课程中会把 threejs 虚构相机渲染三维场景在浏览器网页上出现的后果称为 Canvas 画布。// 定义相机输入画布的尺寸 (单位: 像素 px)
const width = 800; // 宽度
const height = 500; // 高度
透视投影相机 PerspectiveCamera：视锥体透视投影相机的四个参数 fov, aspect, near, far 形成一个四棱台 3D 空间，被称为视锥体，只有视锥体之内的物体，才会渲染进去，视锥体范畴之外的物体不会显示在 Canvas 画布上。
// width 和 height 用来设置 Three.js 输入的 Canvas 画布尺寸 (像素 px)
const width = 800; // 宽度
const height = 500; // 高度
// 30: 视场角度, width / height:Canvas 画布宽高比, 1: 近裁截面, 3000：远裁截面
const camera = new THREE.PerspectiveCamera(30, width / height, 1, 3000);
PerspectiveCamera 参数介绍：PerspectiveCamera(fov, aspect, near, far)
参数含意默认值 fov 相机视锥体竖直方向视线角度 50aspect 相机视锥体程度方向和竖直方向长度比，个别设置为 Canvas 画布宽高比 width / height1near 相机视锥体近裁截面绝对相机间隔 0.1far 相机视锥体远裁截面绝对相机间隔，far-near 形成了视锥体高度方向 2000
