THREE.js关于X的奇怪旋转

THREE.js weird rotation about X

本文关键字：旋转 js 关于 THREE      更新时间：2023-09-26

下面是jsFiddle中的完整代码：

http://jsfiddle.net/73v15kb6/1/

围绕Y和Z旋转是我所期望的，所有的转换都是一样的。当我试图绕X轴旋转时，看起来THREE.js正在做一些特别的事情，让它看起来"更酷"——但这不是我想要实现的。

阅读类似的主题，我确信这与我的rotateX函数有关：

camera.position.y = y * cos - z * sin;
camera.position.z = y * sin + z * cos;
camera.lookAt(scene.position);

当我启动三维世界时，我用以下值设置相机的坐标，只是为了保持所需的视图：

camera.position.x = -60;
camera.position.y = 30;
camera.position.z = 0;

有人知道我做错了什么吗？非常感谢！

我是THRE.js的新手（事实上，这是我第一次使用它），所以我可能无法正确解释它：（

THREE.js让它看起来"更酷"的部分是camera.lookAt方法。

camera.lookAt(sphere.position);

这是样品（已修改）http://jsfiddle.net/73v15kb6/3/

尝试为每个轴播放animate函数，并尝试启用lookAt选项。玩一段时间会给你一个概念。：）

function animate() {
    requestAnimationFrame(animate);
    rotateX(5); // Try with Y & Z; (also with toggling lookAt())
}

lookAt函数可能会使变换函数看起来很奇怪，因为即使相机按预期进行变换，渲染区域也会保持不变。

感谢森雅各布修理我的小提琴！

我找到了一个解决方案，所以为了让它按我的意愿工作——相机总是盯着中心点（0,0,0），单词的所有旋转都围绕着轴进行，我必须对每个旋转做以下操作：

对于rotZ和rotY

camera.up = new THREE.Vector3(0,1,0);
camera.lookAt(new THREE.Vector3(0,0,0));

对于rotX:

camera.up = new THREE.Vector3(1,0,0);
camera.lookAt(new THREE.Vector3(0,0,0));

注意X和Y之间的上方向向量的差异&Z.

相关文章：