Three.js 相机对象 .up 属性

Question

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);