之前我们实践了Threejs创建场景,如果想把三维场景Scene渲染到web网页上,还需要创建透视相机,就像你生活中想获得一张照片,需要一台用来拍照的相机。
Threejs提供了正投影相机OrthographicCamera和透视投影相机PerspectiveCamera。这里我们使用透视相机。
PerspectiveCamera
透视投影相机PerspectiveCamera本质上就是在模拟人眼观察这个世界的规律。
创建相机
实例化一个透视相机
// 创建一个透视投影相机对象
const camera = new THREE.PerspectiveCamera(45, 500 / 400, 1, 1000);
参数
fov — 摄像机视锥体垂直视野角度
aspect — 摄像机视锥体长宽比
near — 摄像机视锥体近端面
far — 摄像机视锥体远端面
透视投影相机的四个参数fov,aspect,near,far构成一个四棱台3D空间,被称为视锥体,只有视锥体之内的物体,才会渲染出来,视锥体范围之外的物体不会显示在Canvas画布上。
设置相机的位置
相机可以理解为人的眼睛,你站在物体的不同位置,看到的物体是不一样的,threejs通过.position
来设置相机的位置。默认是(0,0,0)
// 设置相机的位置
camera.position.set(200, 200, 200)
相机观察目标lookAt()
用相机拍照需要控制相机的拍照目标,具体说相机镜头对准哪个物体或说哪个坐标。对于threejs相机而言,就是设置.lookAt()
方法的参数,指定一个3D坐标。就是设置相机的观察点.
可以设置为坐标圆点
camera.lookAt(0, 0, 0) // 坐标原点
也可以设置为网格模型的坐标
camera.lookAt(mesh.postion) // 网格模型的坐标
完整代码
本节的完整代码
// 创建一个透视投影相机对象
const camera = new THREE.PerspectiveCamera(45, 500 / 400, 1, 1000);
// 设置相机的位置
camera.position.set(200, 200, 200)
// 设置相机的观察点
camera.lookAt(0, 0, 0) // 坐标原点