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

Question

我正在努力适应 this code (which itself is a implementation of this)。我已经获得了一般的可视化和渲染效果，但我现在正在尝试制作一些逼真的运动。

光源的点由归一化向量确定（例如THREE.Vector3(1, 0.75, 0)。光线似乎来自右上角）。现在我想做的是让矢量围绕球体旋转，使球体看起来好像在围绕光源旋转。但我不知道该怎么做。我试过 updating/changing 矢量的位置。但我不确定如何计算正确的 next 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 轴以外的其他旋转，understanding/avoiding issues/coding/computational 成本的最佳选择是信任 四元数 。

它们非常直观，在 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);

已更新 fiddle：http://jsfiddle.net/Atrahasis/0v93p2xy/

关于归一化向量的注意事项：

归一化向量的长度为 1 个单位。
( 1 , 0 , 0 ),( 0 , 1 , 0 ),( 0 , 0 , 1 ) 是原生归一化向量（和单位向量）。
( 1 , .75 , 0 ) 不是归一化向量，它的长度是 √(1²+.75²)=1.5625 (pythagoras)
例如 ( 0.6614... , .75 , 0 ) 是归一化向量

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

Rotating a vector around a sphere (simulating sun) in three.js

javascript

three.js