WebGL教程_Three.js教程_郭隆邦技术博客 郭隆邦_技术博客 一对一班

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);
本站版权所有,本站任何内容未经允许不得转载   备案号:豫ICP备16004767号 QQ群:187740169 (WebGL-Three.js教程)   邮箱:guolongbang@163.com