旋转渲染结果(.up 相机上方向)
.up
是相机对象的上方向属性,当你改变 .up 属性时候,就好比你生活中拍照时候,扭转你的相机姿态角度进行拍照,这时候你的照片也会跟着相机姿态旋转。
.up
属性默认值是new THREE.Vector3(0,1,0)
,意思是沿着 y 轴朝上。
js
console.log(".up默认值", camera.up); // { x: 0, y: 1, z: 0}
你可以改变相机的上方向 .up
属性值,然后观察 canvas
画布上模型渲染的效果有什么变化,还可以观察三维坐标轴 new THREE.AxesHelper()
的变化。
把相机对象 .up
属性默认值 new THREE.Vector3(0, 1, 0)
改为相反方向 new THREE.Vector3(0, -1, 0)
,沿着 y 轴负方向,up 改变后的渲染效果你可以看到,绿色 y 轴向下,与原来方向相反。
js
// 你可以看到模型相比原来上下颠倒 y 坐标轴朝下
camera.up.set(0, -1, 0);
js
// 渲染效果:红色 x 轴向上
camera.up.set(1, 0, 0);
js
// 渲染效果:蓝色 z 轴向上
camera.up.set(0, 0, 1);
注意执行顺序问题
注意.up
属性和.position
属性一样,如果在.lookAt()
执行之后改变,需要重新执行.lookAt()
。