javascript - 根据 parent 的旋转状态围绕其 parent 运行的动画行星

Question

我正在尝试学习 Three.js，对这些技术不陌生。我实现了一个太阳，行星绕着行星运行，月亮绕着行星运行。我所关心的是，要完成目前为止的工作，我必须制作大量对象并在渲染循环期间执行大量计算。

1。源代码:

WestLangley为我们提供了以更易于理解的方式呈现问题的 fiddle :

• > this fiddle呈现的更像是现在的样子——行星在太阳内部有它的母体，旋转母体将使行星绕轨道运行。但是除了每个行星/月球一个额外的物体外，还有一个问题，即在 updateMatrixWorld Object3D 方法期间，父旋转也会使行星旋转到位。因此它的旋转速度会比您通过查看 mesh2.rotateOnAxis( AXIS, 0.01 ); 假设的要快一些。
• > this fiddle显示了一种无 parent 的方法。案例是，我正在尝试找到一种方法，我可以在系统启动时配置行星位置/自旋速度/轨道速度，而不是仅仅为其提供服务器时间，这样会让处于同一位置的玩家之间感觉同步.

3。问题本身

就我浏览手册而言，我发现有可能使用 Three.js 矩阵逻辑执行此类动画。我愿意尽可能减少对象内部 ::animate() 的使用(可能通过覆盖 updateMatrix 和 updateMatrixWorld 方法)。不幸的是，我的英语和数学都不够好，无法理解这些矩阵是怎么回事。如果有人可以帮助我，我将不胜感激。

4。目前工作进展

工作 fiddle 是 here .我能够创造一个星球并且几乎拥有我想要的一切。剩下的一个问题是，A 想要以更随机的 Angular 绕行行星轨道。

Answer 1

fork 这一点。我愿意减少我的太阳系中的物体数量，隐藏动画循环中的计算并使其尽可能可配置。

为此，我实现了名为 Planet 的自定义 Mesh:

var Planet =  function ( geometry, material ) {
    THREE.Mesh.call( this, geometry, material );
    this.type = 'Planet';
};
Planet.prototype = Object.create( THREE.Mesh.prototype );

并覆盖标准 Object3D 矩阵计算函数:

Planet.prototype._matrixUpdate = THREE.Object3D.prototype.updateMatrix;
Planet.prototype._updateMatrixWorld = THREE.Object3D.prototype.updateMatrixWorld;
Planet.prototype.updateMatrix = function() {};
Planet.prototype.updateMatrixWorld = function() {};

多亏了它，我可以在每次渲染调用运行的标准方法中重新计算在该基地上创建的行星/卫星的位置和旋转。

为了良好的开端，我在 Planet 构造函数中制作了一些我需要的基本参数的原型(prototype):

    this.rotationAxis = new THREE.Vector3( 0, 1, 0 ).normalize(); // always rotate on Y
    this.rotationSpeed = Math.PI/2; // length of planet day

    this.orbitAxis = new THREE.Vector3( 0, 0.1, 1 ).normalize(); // y,z for orbit AXIS
    this.orbitSpeed = Math.PI / 8; // length of planet year

那些应该可以在创建时配置，但现在硬编码没问题。

比进入新的 updateMatrix()，计算当前行星相对于其父行星的位置:

Planet.prototype.updateMatrix = function() {

    var dta = delta || 0; // THREE.Clock::getDelta

    // just for now, sun is not orbiting around
    // anything, so checking instance
    if ( this.parent instanceof Planet ) {
        // rotate position in relation to parent, to make planet orbit
        this.position.applyAxisAngle(this.orbitAxis, this.orbitSpeed * dta);
    }

    // rotate planet in place, to make it spin
    this.rotateOnAxis(this.rotationAxis, this.rotationSpeed * dta);

    this._matrixUpdate(); // fabricating Object3D.matrix
};

最后但并非最不重要的一点 - 通过 updateMatrixWorld 实现向 Object3D.worldMatrix 提供这些更改:

Planet.prototype.updateMatrixWorld = function() {
    if ( this.matrixAutoUpdate === true ) this.updateMatrix();

    if ( this.matrixWorldNeedsUpdate === true || force === true ) {

        if ( this.parent === undefined ) {
            this.matrixWorld.copy( this.matrix );
        } else {
            // THIS else block is all whats different
            // between Planet and standard Object3Dmethod
            v = new THREE.Vector3(); // empty vector
            v.applyMatrix4(this.parent.matrixWorld); // setup with parent position
            v.add(this.position); // add local position

            // compose instead of multiplication
            this.matrixWorld.compose(v, this.quaternion, this.scale); 

        }
   // ... rest like in THREE's (71) git.

工作代码在 this fiddle 中.通过这种方式，我减少了渲染循环期间的数学时间，减少了嵌套代码，最后:减少了高达 50% 的对象数量。但我对这个答案不是 100% 有信心，因此欢迎任何进一步的优化。