ThreeJS – 摄像机绕X轴、绕Y轴、绕Z轴旋转指定角度
1 ThreeJS摄像机绕X轴、绕Y轴、绕Z轴旋转指定角度
在threejs中，如果我们想要摄像机绕某一个世界坐标轴旋转，比如绕Y轴旋转。我尝试过以下的方法
- camera.rotateY(radian)
- camera.rotateOnWorldAxis(new THREE.Vector3(0,1,0),radian);
这两个方法都是没有效果的。
其实要想摄像机绕轴旋转本质上是在改变摄像机的坐标，所以我们使用three.js的四元数，从头构造一个绕轴旋转的四元数然后对摄像机的坐标进行变换，这样就可以达到旋转摄像机的目的。
1.1 摄像机绕X轴旋转
var x_axis = new THREE.Vector3( 1, 0, 0 );
var quaternion = new THREE.Quaternion();
camera.position.applyQuaternion(quaternion.setFromAxisAngle(x_axis, radian));
1.2 摄像机绕Y轴旋转
var y_axis = new THREE.Vector3( 0, 1, 0 );
var quaternion = new THREE.Quaternion();
camera.position.applyQuaternion(quaternion.setFromAxisAngle(y_axis, radian));
1.3 摄像机绕Z轴旋转
var z_axis = new THREE.Vector3( 0, 0, 1 );
var quaternion = new THREE.Quaternion();
camera.position.applyQuaternion(quaternion.setFromAxisAngle(z_axis, radian));
参考链接
欢迎扫码关注我的微信公众号，及时获取文章更新
本文作者：StubbornHuang
版权声明：本文为站长原创文章，如果转载请注明原文链接！
原文标题：ThreeJS – 摄像机绕X轴、绕Y轴、绕Z轴旋转指定角度
原文链接：https://www.stubbornhuang.com/2361/
发布于：2022年09月21日 11:38:47
修改于：2023年06月21日 18:02:41
声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。
文章末尾
评论
72