Three.js 立方体面相对于相机的旋转向量

Question

我有一个旋转球体，上面有一个 div 可以在此处查看示例:https://jsfiddle.net/ao5wdm04/
我计算 x 和 y 值并使用 translate3d 放置 div转换并且效果很好。

我的问题是如何获取 rotateX 的值, rotateY和 rotateZ或 rotate3d变换使 div“切线”球体表面。我知道立方体网格面向球体中心，所以我假设向外法向量相对于相机的旋转向量将包含我需要的值。但我不太确定如何获得这些。

更新

通过使用欧拉角，我几乎达到了预期的效果，如下所示:https://jsfiddle.net/ao5wdm04/1/但旋转不够大。

Answer 1

免责声明:我对 three.js 一无所知.我刚刚完成了一些 OpenGL。

您的欧拉角来自模型 View 投影原点(第 74-80 行)。我看不出这背后的逻辑。

如果您的 div 在球体表面上，那么它应该按照球体在 div 位置的法线定向。幸运的是，你已经有了这些角度。他们的名字是 rotation .

如果将第 82-84 行中的欧拉角替换为用于定位 div 的旋转角度，则在我的浏览器中，div 在位于圆的边缘时显示为边缘，而在位于中心时则为面朝上。它看起来像是在绕圈移动，边缘靠近屏幕。这是你想要的效果吗？

我对链接代码的修改:

82 var rotX = (rotation.x * (180/ Math.PI));
83 var rotY = (rotation.y * (180/ Math.PI));
84 var rotZ = 0;

编辑

喔好吧。 rotation变量只是相机的变量。它控制赤道处的切线。您还需要修改方向以考虑纬度。

制作 rotY等于负你的纬度。然后确保此旋转发生在赤道旋转之前。旋转不是可交换的。

总之，来自 https://jsfiddle.net/ao5wdm04/1/ 处的代码的更改如下面所述:

27 var lat = 45 * Math.PI / 180;
...
82 var rotX = (rotation.x * (180/ Math.PI));
83 var rotY = - 45;
...
88 document.getElementById('face').style.webkitTransform = 'translate3d(' + x + 'px,' + y + 'px,0px) rotateY('+rotX+'deg) rotateX('+rotY+'deg)';

我不知道纬度应该如何在 init 之间传播和 render职能。正如我所说，我不熟悉这种语言。