Question

我试图用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的初学者。谢谢！

Answer 1

您可以使用THREE.Group作为枢轴对象来执行此操作。总体思路如下：

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

在动画循环中，您始终可以旋转数据透视对象。

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

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

1 个答案: