使用Three.js在本地轴上旋转相机X
继承
我是Three.js的新手，还是3D空间引擎的新手，我想实现的是360度等矩形图像查看器。
到目前为止，我的脚本所做的是在0,0,0处创建一个摄影机，并在同一位置创建一个球面网格，并反转法线和360度图像的发射贴图。
使用Blender的视口表示场景。
应该使用户能够使用鼠标拖动或键盘箭头旋转相机，因此我使用鼠标侦听器创建了拖动功能，该功能计算每个渲染帧在相机的Y轴（蓝色）和X轴（红色）上的旋转量。我还在X上创建了最小和最大旋转限制（因此用户无法向后旋转），如下所示：
var render = function () {
requestAnimationFrame( render );
if((camera.rotation.x < Math.PI/6 && speedX >= 0) || (camera.rotation.x > -Math.PI/6 && speedX <= 0))
camera.rotation.x += speedX * (Math.PI/180);
camera.rotation.y += speedY * (Math.PI/180);
renderer.render(scene, camera);
};
其中speedX和speedY表示每个轴上的旋转量。
到目前为止，效果很好，但是由于这些旋转坐标是相对于世界而不是摄影机本身的，因此X旋转使摄影机变得疯狂，因为在Y轴上旋转了几度后，摄影机的X轴不再相同作为世界的X轴。
最后，我的问题是：如何在每个帧的自身X轴上旋转相机？
西兰吉
如果要使摄像机的旋转在偏航（航向），俯仰和横滚方面具有含义，则需要进行以下设置：
camera.rotation.order = 'YXZ'; // default is 'XYZ'
有关更多信息，请参见此stackoverflow答案。
three.js r.82
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
three.js在平面上旋转相机
- 2
在球体上旋转玩家相机（javascript/three.js）
- 3
Three.js相机旋转错误
- 4
Three.js-相机旋转和TransformControls
- 5
Three.js-当摄像机旋转90度角时，为什么在x轴和z轴上旋转具有相同的效果？
- 6
使用具有特定功能的three.js在表面上旋转多维数据集
- 7
当对象旋转时Three.js旋转相机
- 8
使用slerp旋转时补间相机位置-THREE.js
- 9
在Three.js中使用轨道控制旋转相机时发生奇怪的晃动
- 10
如何使用Javascript在X轴上旋转Canvas元素
- 11
Three.js将相机旋转到特定位置
- 12
旋转相机后，Three.js Skybox似乎坏了
- 13
Three.JS通过移动设备围绕对象旋转相机
- 14
Three.js旋转相机以外的所有物体
- 15
旋转相机后，Three.js Skybox似乎坏了
- 16
在three.js中旋转相机无法正常工作
- 17
在按钮上旋转 3D 对象单击 Three.js
- 18
使用相机+ OrbitControls.js旋转光源
- 19
如何在three.js（r66）中旋转对象而不使用控制相机的轨迹球
- 20
使用Three.js使用画布旋转纹理
- 21
使用three.js实现绕相机飞行
- 22
使用THREE.js TransformControls
- 23
使用THREE.js TransformControls
- 24
three.js-如何围绕lookAt（object）和相机位置之间的线旋转相机
- 25
如何在three.js中使用3X3矩阵进行旋转
- 26
使用Three.js，WebGL显示对象的顶点并旋转对象
- 27
使用Three.js，WebGL显示对象的顶点并旋转对象
- 28
如何在Three.js中使用鼠标旋转对象？
- 29
Three.js-如何使用Three.js冒烟？
我来说两句