[英]Rotating a vector around a sphere (simulating sun) in three.js
I am trying to adapt this code (which itself is a implementation of this ). 我正在尝试修改此代码(它本身是this的实现)。 I have gotten the general visualization and rendering to work, but I'm now trying to animate some realistic movement.
我已经获得了一般的可视化和渲染功能,但是现在我正在尝试制作一些逼真的运动动画。
The point of the light source is determined by a normalized vector (for example THREE.Vector3(1, 0.75, 0)
. The light will appear to be coming from the top right). 光源的点由归一化的向量确定(例如
THREE.Vector3(1, 0.75, 0)
。该光似乎是从右上角发出的)。 Now what I would like to do is to have the vector rotate around the sphere in such a way that it seems like the sphere is orbiting the light source. 现在,我想做的是使矢量围绕球体旋转,使球体围绕光源旋转。 But I can't figure out how to do this.
但是我不知道该怎么做。 I've tried updating/changing the position of the vector.
我试过更新/更改向量的位置。 But I'm not sure how to calculate the proper next
x,y,z
values. 但是我不确定如何计算正确的下一个
x,y,z
值。 I've tried applying euler angles and rotational matrix, like so: 我试过应用欧拉角和旋转矩阵,如下所示:
euler = new THREE.Euler(f,g,h, 'XYZ');
matrix = new THREE.Matrix4().makeRotationFromEuler(euler);
light = vector.applyMatrix4(matrix);
But here, I'm not sure how to get the correct values of f,g,h
such that the light doesn't just wobble around the sphere. 但是在这里,我不确定如何获得正确的
f,g,h
值,以使光不只是围绕球体摆动。
Am I even on the right track? 我是否在正确的轨道上?
Working example: http://jsfiddle.net/VsWb9/3890/ 工作示例: http : //jsfiddle.net/VsWb9/3890/
You are increasing linearly two of 3 coordinates in euler angles, that is the issue. 您正在以欧拉角线性增加3个坐标中的2个,这就是问题所在。
For other rotations than around x/y/z axis, the best for understanding/avoiding issues/coding/computational cost is to trust quaternions . 对于除绕x / y / z轴以外的其他旋转,理解/避免问题/编码/计算成本的最佳方法是信任四元数 。
They are rather intuitive, in threejs too. 它们也很直观,在threejs中也是如此。 They are made of 4 coordinates : 3 for a rotation axis, and the fourth for the rotation value.
它们由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();
Then in your render loop you change the angle value and tell the quaternion to use the axis above, and the updating angle : 然后在渲染循环中,更改角度值,并告诉四元数使用上面的轴,并更新角度:
angle+=.001//(or angle -= if your axis points in the +y direction like here)
quat.setFromAxisAngle(axis,angle);
And finally apply it : 最后应用它:
light.applyQuaternion(quat);
Updated fiddle : http://jsfiddle.net/Atrahasis/0v93p2xy/ 更新小提琴: http : //jsfiddle.net/Atrahasis/0v93p2xy/
Note about normalized vectors : 关于归一化向量的注意事项:
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.