threejs创建透视相机

threejs yekong

之前我们实践了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) // 坐标原点
喜欢