Skip to content

旋转渲染结果(.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()