在three.js中围绕球体(模拟太阳)旋转矢量

Question

我试图去适应这个代码(这本身就是一个实现此).我已经使一般的可视化和渲染工作,但我现在正试图动画一些逼真的动作.

光源的点由标准化矢量确定(例如THREE.Vector3(1, 0.75, 0),光将看起来来自右上角).现在我想做的是让矢量围绕球体旋转,使得球体看起来像是围绕光源旋转.但我无法弄清楚如何做到这一点.我已经尝试更新/更改矢量的位置.但我不确定如何计算正确的下一个x,y,z值.我尝试过应用欧拉角和旋转矩阵,如下所示:

euler = new THREE.Euler(f,g,h, 'XYZ');
matrix = new THREE.Matrix4().makeRotationFromEuler(euler);
light = vector.applyMatrix4(matrix);

但在这里,我不确定如何获得正确的值f,g,h,使光不仅仅在球体周围摆动.

我是否走在正确的轨道上？

工作示例:http://jsfiddle.net/VsWb9/3890/

Answer 1

你在欧拉角中线性增加了3个坐标中的两个,这就是问题所在.

对于围绕x/y/z轴的其他旋转,理解/避免问题/编码/计算成本的最佳方法是信任四元数.

它们非常直观,也是三个.它们由4个坐标组成:3表示旋转轴,第4个表示旋转值.

var quat=new THREE.Quaternion();

//we set the axis around which the rotation will occur. It needs to be normalized
var axis=new THREE.Vector3(0,1,0).normalize();
//and the angle value (radians)
var angle=0;

//this is your light vector (=original position of your light)
var light=new THREE.Vector3(1,0,0).normalize();

然后在渲染循环中更改角度值并告诉四元数使用上面的轴和更新角度:

angle+=.001//(or angle -= if your axis points in the +y direction like here)
quat.setFromAxisAngle(axis,angle);

最后应用它:

light.applyQuaternion(quat);

更新小提琴:http://jsfiddle.net/Atrahasis/0v93p2xy/

关于规范化向量的注意事项

• 标准化向量是1个单位长度.
• (1,0,0),(0,1,0),(0,0,1)是原生归一化矢量(和单位矢量).
• (1,.75,0)不是归一化向量,长度为√(1²+.75²)= 1.5625(毕达哥拉斯)
• 例如(0.6614 ...,.75,0)是归一化向量