在three.js中圍繞球體旋轉矢量（模擬太陽）

Question

我正在嘗試修改此代碼（它本身是this的實現）。 我已經獲得了一般的可視化和渲染功能，但是現在我正在嘗試制作一些逼真的運動動畫。

光源的點由歸一化的向量確定（例如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個坐標中的2個，這就是問題所在。

對於除繞x / y / z軸以外的其他旋轉，理解/避免問題/編碼/計算成本的最佳方法是信任四元數 。

它們也很直觀，在threejs中也是如此。 它們由4個坐標組成：3個代表旋轉軸，第四個代表旋轉值。

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）是歸一化向量