如何让月亮围绕地球平移并一起围绕太阳

Question

月亮跟随地球绕太阳平移，但它不绕地球平移。 我想保留matrix4方法，所以通过matrix moltipication来做。 我试图改变矩阵乘法的顺序，但没有奏效。

// Simulation of the solar system
window.onload = function()
    {
        var scena = new THREE.Scene();

        // Set camera
        var camera = new THREE.PerspectiveCamera(60,window.innerWidth/window.innerHeight,0.1,1000);
        camera.position.x = 1;
        camera.position.y = 1;
        camera.position.z = 10;

        var renderer = new THREE.WebGLRenderer();
        renderer.setSize(window.innerWidth,innerHeight);

        document.body.appendChild(renderer.domElement);

        // Create sun and set geometry
        var sun_geometry = new THREE.SphereGeometry(1,32,32);
        var sun_material = new THREE.MeshLambertMaterial( {color: 0xff0000} );
        var sun = new THREE.Mesh(sun_geometry,sun_material);
        sun.matrixAutoUpdate = false;
        scena.add(sun);

        // Create earth and set geometry
        var earth_geometry = new THREE.SphereGeometry(0.5,32,32);
        var earth_material = new THREE.MeshLambertMaterial( {color: 0x0000ff} );
        var earth = new THREE.Mesh(earth_geometry,earth_material);
        earth.matrixAutoUpdate = false;
        scena.add(earth);

        // Create moon and set geometry
        var moon_geometry = new THREE.SphereGeometry(0.25,32,32);
        var moon_material = new THREE.MeshLambertMaterial( {color: 0x00ffff} );
        var moon = new THREE.Mesh(moon_geometry,moon_material);
        moon.matrixAutoUpdate = false;
        scena.add(moon);

        // set Lights
        var system_light = new THREE.DirectionalLight( 0xffffff, 0.4);
        system_light.position.set(0.5,0,1).normalize();

        var sun_light = new THREE.PointLight( 0xffffff, 1, 100);
        sun_light.position.set(1,1,0).normalize();

        // Add light 
        scena.add(system_light);
        sun.add(sun_light);

        // Rendering
        var render = function()
        {
            // Calculating delta time
            var now = new Date();
            var dt = now-(render.time || now);
            render.time = now; 
            renderer.render(scena,camera);

            var sun_rotation_matrix = new THREE.Matrix4().makeRotationY(0.001*render.time);
            //sun.matrix = sun_rotation_matrix;

            var earth_rotation_matrix = new THREE.Matrix4().makeRotationY(0.002*render.time);
            var earth_translation_matrix = new THREE.Matrix4().makeTranslation(4,0,0);
            earth.matrix = earth_rotation_matrix.multiply(earth_translation_matrix);

            // Problems may be here
            var moon_rotation_matrix = new THREE.Matrix4().makeRotationY(0.004*render.time);
            var moon_translation_matrix = new THREE.Matrix4().makeTranslation(1,0,0);
            moon.matrix = moon_translation_matrix.multiply(earth_rotation_matrix).multiply(moon_rotation_matrix);

            requestAnimationFrame(render);
        }

        render(); // Start rendering
    }

Answer 1

不是将月亮添加到场景中，而是添加到地球并更改矩阵的应用顺序：

earth.add(moon);

// ...

moon.matrix = moon_rotation_matrix.multiply(moon_translation_matrix);

[https://jsfiddle.net/Ldew63e6/]