ThreeJS教程:旋转渲染结果(.up相机上方向)
推荐:将NSDT场景编辑器加入你的3D工具链
3D工具集:NSDT简石数字孪生
旋转渲染结果(.up相机上方向)
.up
是相机对象的上方向属性,当你改变.up
属性时候,就好比你生活中拍照时候,扭转你的相机姿态角度进行拍照,这时候你的照片也会跟着相机姿态旋转。
.up
属性默认值是new THREE.Vector3(0,1,0)
,意思是沿着y轴朝上。
console.log('.up默认值',camera.up);
测试改变上方向.up
你可以改变相机的上方向.up
属性值,然后观察canvas画布上模型渲染的效果有什么变化,还可以观察三维坐标轴new THREE.AxesHelper()
的变化。
把相机对象.up
属性默认值new THREE.Vector3(0,1,0)
改为相反方向new THREE.Vector3(0,-1,0)
,沿着y轴负方向,up改变后的渲染效果你可以看到,绿色y轴向下,与原来方向相反。
// 你可以看到模型相比原来上下颠倒 y坐标轴朝下
camera.up.set(0,-1,0)
//渲染效果:红色x轴向上
camera.up.set(1, 0, 0);
//渲染效果:蓝色z轴向上
camera.up.set(0, 0, 1);
注意执行顺序问题
注意.up
属性和.position
属性一样,如果在.lookAt()
执行之后改变,需要重新执行.lookAt()
。
camera.lookAt(0,0,0);
camera.up.set(0, 0, 1);//改变up
camera.lookAt(0,0,0);//执行lookAt重新计算相机姿态