Threejs - 如何更改对象的旋转中心? [英] Threejs - How to change the rotation center of a object?

问题描述

我正在尝试用 Three.js 制作一个太阳系.我已经让地球绕太阳转了，但我的问题是我不知道如何让月亮绕地球转，因为自转中心总是太阳，(我猜是因为太阳在坐标 0,0,0).

I'm trying to make a solar system with Three.js. I have maked the earth rotate around the sun, but my problem is I do not know how to make the moon rotate around the earth, because the center the rotation center is always the sun, (I guess that it's for because the sun is in the coordinate 0,0,0).

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

This is my render function with translation and rotation moves:

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);
    }

外观示例

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

I'm a beginner with Three.js. Thanks!

推荐答案

您可以使用 THREE.Group 作为枢轴对象来实现此目的.大体思路如下:

You can do this by using THREE.Group as pivot objects. The general idea looks like this:

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

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

In your animation loop you always rotate the pivot objects.

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

这篇关于Threejs - 如何更改对象的旋转中心?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！