javascript - 地球绕其轴旋转

Question

我正在尝试在三个 js 内围绕地球的倾斜轴旋转地球。我找到了this solution ，我试图在我的代码中使用它，但它没有做任何事情。

当我执行此代码时，行星只是坐在那里并且根本不旋转。我并不太清楚四元数是什么或者它是如何工作的，所以我不确定出了什么问题。

function rotateAroundAxis(object, axis, radians) {
    var vector = axis.normalize();
    var quaternion = new THREE.Quaternion().setFromAxisAngle(vector, radians);
    object.rotation = new THREE.Euler().setFromQuaternion( quaternion );
}

earthAxis = new THREE.Vector3(Math.cos(23.4*Math.PI/180), Math.sin(23.4*Math.PI/180), 0);

function render() {
    stats.update();
    step += 0.02;
    rotateAroundAxis(earth, earthAxis, step);
}

Answer 1

首先，您需要通过应用变换将球体的几何形状倾斜 23.4 度。

var radians = 23.4 * Math.PI / 180; // tilt in radians
mesh.geometry.applyMatrix( new THREE.Matrix4().makeRotationZ( - radians ) );

然后，要在物体空间中绕其轴旋转地球，请首先标准化您旋转的轴。

earthAxis = new THREE.Vector3( Math.sin( radians ), Math.cos( radians ), 0 ).normalize();

然后在渲染函数中执行以下操作:

earth.rotateOnAxis( earthAxis, 0.01 ); // axis must be normalized

三.js r.69