我有一个旋转的球体,我有一个div附加的例子可以在这里查看：
https://jsfiddle.net/ao5wdm04/
我计算x和y值并使用translate3d变换放置div,这非常有效.
我计算x和y值并使用translate3d变换放置div,这非常有效.
我的问题是如何获得rotateX,rotateY和rotateZ或rotate3d变换的值,以便div“切线”球体表面.我知道立方体网格面向球体中心,所以我假设相对于相机的向外法线向量的旋转向量将包含我需要的值.但我不太清楚如何获得这些.
更新
通过使用欧拉角,我几乎达到了预期的效果,如下所示：https://jsfiddle.net/ao5wdm04/1/但旋转不够大.
解决方法
免责声明：我对three.js一无所知.我刚做了一点OpenGL.
您的欧拉角来自模型视图投影的原点(第74-80行).我看不出这背后的逻辑.
如果你的div在球体表面上,那么它应该以div的位置处的球体法线定向.幸运的是,你已经拥有了这些角度.它们被命名为轮换.
如果使用用于定位div的旋转角度替换第82-84行中的欧拉角,则在我的浏览器中,当div位于圆的边缘时,div显示为边缘,当它位于圆的中心时,则面朝上.它看起来像是在一个圆圈中移动,边缘在屏幕上.这是你想要的效果吗？
82 var rotX = (rotation.x * (180/ Math.PI)); 83 var rotY = (rotation.y * (180/ Math.PI)); 84 var rotZ = 0;
编辑
喔好吧.旋转变量就是摄像机的旋转变量.它控制着赤道的切线.您还需要修改方向以考虑纬度.
使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函数之间传播.正如我所说,我不熟悉这种语言.
