Threejs - 如何更改对象的旋转中心？答案

【问题标题】：Threejs - How to change the rotation center of a object?Threejs - 如何更改对象的旋转中心？
【发布时间】：2018-05-09 22:39:56
【问题描述】：

我正在尝试使用 Three.js 制作一个太阳系。我已经让地球围绕太阳旋转，但我的问题是我不知道如何让月球围绕地球旋转，因为中心旋转中心始终是太阳，（我猜是因为太阳在坐标 0,0,0)。

这是我的带有平移和旋转动作的渲染函数：

function render(){
        cameraControls.update();
        angle +=0.01;

        scene.getObjectByName("sun").rotation.y += 0.005;

        scene.getObjectByName("moon").rotation.y += 0.020;

        scene.getObjectByName("moon").position.x = 30 * Math.cos(angle);
        scene.getObjectByName("moon").position.z = 30 * Math.sin(angle);


        scene.getObjectByName("earth").rotation.y += 0.015;
        scene.getObjectByName("earth").position.x = 80 * Math.cos(angle);
        scene.getObjectByName("earth").position.z = 80 * Math.sin(angle);


        scene.getObjectByName("clouds").rotation.y += 0.017;
        scene.getObjectByName("clouds").position.x = 80 * Math.cos(angle);
        scene.getObjectByName("clouds").position.z = 80 * Math.sin(angle);

        renderer.render(scene, camera);
        requestAnimationFrame(render);
    }

An example of how it looks

我是 Three.js 的初学者。谢谢！

【问题讨论】：

标签： three.js

【解决方案1】：

您可以通过使用THREE.Group 作为枢轴对象来做到这一点。总体思路如下：

var pivot = new THREE.Group();
scene.add( pivot );
pivot.add( mesh );

在您的动画循环中，您始终会旋转枢轴对象。

演示：https://jsfiddle.net/f2Lommf5/6202/

【讨论】：

非常感谢！我知道了！这比我想象的要容易