Three.js相机对象.up属性

 

Threejs相机对象Camera的.up属性表示相机对象的上方向，如果你有一定图形学基础，你可以很好的理解，如果没有图形学基础也没关系，你可以在threejs代码中更改.up的属性值，查看threejs渲染结果有什么变化。

.up属性默认值是new THREE.Vector3(0,1,0),沿着y轴朝上，你可以使用下面代码看渲染效果绿色y轴数值向上，你可以改变.up属性的值，查看渲染结果变化。

camera.position.set(200, 300, 200);
// 浏览器控制台查看.up属性的默认值
console.log(`.up属性值`,camera.up);
camera.lookAt(0,0,0);

// 创建一个三维坐标系和一个圆台用来辅助显示up改变后渲染效果的改变
// 场景插入三维坐标轴，用来查看up属性值改变渲染效果区别
scene.add( new THREE.AxesHelper( 150 ) );
// 通过一个上下直径不同的圆柱来辅助查看up改变后渲染效果的改变
var geometry = new THREE.CylinderGeometry( 2, 5, 40, 32 )

把相机对象.up属性默认值new THREE.Vector3(0,1,0)改为相反方向new THREE.Vector3(0,-1,0)，沿着y轴负方向，up改变后的渲染效果你可以看到，绿色y轴向下，与原来方向相反。

camera.up.set(0,-1,0)

//渲染效果：红色x轴向上
camera.up.set(1, 0, 0);

//渲染效果：蓝色z轴向上
camera.up.set(0, 0, 1);

Three.js执行相机方法.lookAt()时候，会读取上方向.up的属性值，然后用于相机对象的矩阵计算，具体计算过程可以参考Object3D.js源码，如果你不关心.lookAt()方法具体封装代码，只需要记住使用的时候，如果你想改变.up的属性值，需要先重置.up的属性值，然后执行.lookAt()方法。

// 如果需要改变默认的up属性值，需在执行looAt()方法之前改变
camera.up.set(0, 0, 1);
camera.lookAt(0,0,0);