three.js中实现相机在当前位置向左向右(沿着y轴方向)进行原地旋转

分类:计算机 | 三维开发 | 基础理论 | 综合 725
更新:2022-12-10 16:00:27
编辑

方法1

参考资料:https://blog.csdn.net/ningfeng8899/article/details/108419961

在渲染函数中使用如下方法:

_this.camera.rotateY(0.001);

可以实现镜头的左右旋转,

方法2

在three.js的PointerLockControls.js中发现的一种方法,代码稍微多些,目前是在three.js的PointerLockControls模式下才生效,还需要再深入研究下:

在渲染函数中添加如下代码:

const _PI_2 = Math.PI / 2;
const _euler = new Euler( 0, 0, 0, 'YXZ' );

var movementX=-5; //鼠标在x方向上的偏移量
var movementY=0;  //鼠标在y方向上的偏移量

_euler.setFromQuaternion( _this.camera.quaternion );

_euler.y -= movementX * 0.002 * 1;
_euler.x -= movementY * 0.002 * 1;

_euler.x = Math.max( _PI_2 -  Math.PI, Math.min( _PI_2 - 0, _euler.x ) );

_this.camera.quaternion.setFromEuler( _euler );