Three.js：如何使用相机旋转值在轴上旋转球体答案

【问题标题】：Three.js: How to rotate a Sphere on Axis using camera rotation valuesThree.js：如何使用相机旋转值在轴上旋转球体
【发布时间】：2020-09-23 13:31:40
【问题描述】：

我有一个特殊的control，叫做SphericalControls。它类似于OrbitControls，但它将相机保持在0,0,0 位置，而是在x 和y 上旋转相机以环顾场景。它被放置在SphereBufferGeometry 的中间，上面投射了一个 360 度等距矩形图像。用户可以环顾 360 度图像，并且相机的 x 和 y 旋转值也会随之变化。

当用户单击按钮时，我需要获取这些 x 和 y 旋转值并将球体旋转到相机的旋转。然后我将相机设置回 x:0 和 y:0。

结果是相机被重置并且 360 度场景现在已旋转以显示相机之前查看的相同旋转视图。所以对于用户来说，视图基本上保持静态，只是 camera.rotation 和球体旋转的值发生了交换。

如果我偏移球体上的纹理，效果会很好：

sphereObj.material.map.wrapS = THREE.RepeatWrapping;
sphereObj.material.map.offset.x = ((camera.rotation.x) / (Math.PI * 2));
sphereObj.material.map.needsUpdate = true;
sphereObj.material.needsUpdate = true;

camera.rotation.set(0, 0);
// Success!

但我需要做的不是偏移纹理，而是旋转整个几何体。我试过了：

var axis = new THREE.Vector3(0, 1, 0).normalize();;
var offsetRadian = ((camera.rotation.x) / (Math.PI * 2));
sphere.rotateOnAxis(axis, offsetRadian);
// Fail

但结果是球体旋转关闭了大约 30%。任何帮助表示赞赏。

【问题讨论】：

标签： three.js rotation

【解决方案1】：

每个对象的旋转数据都存储在它们的respective .quaternion object 中。 camera 和 sphereObj 都有一个四元数，所以您可以将相机的旋转数据复制到球体中：

// Get camera's rotation
targetRotation = camera.quaternion;

// Invert rotation
targetRotation.inverse();

// Set sphere's rotation
sphereObj.quaternion.copy(targetRotation);
camera.rotation.set(0, 0, 0);

我不完全确定您是否需要 .inverse() 行...如果您注意到球体在相反方向旋转，只需摆脱它以获得所需的结果。

【讨论】：