How to make the moon translate around the earth and together around the sun

Question

The moon follows the earth's translation around the sun but it doesn't translate around the earth. I want to keep the matrix4 methods, so do it by matrix moltipication. I tried to change the order of the matrix multiplication but it didn't work.

// 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
    }

That is not how three.js is desinged to be used. See some of the fiddles linked to in [this post](http://stackoverflow.com/questions/29744233/animating-planet-orbiting-its-parent-idependent-on-parents-rotation-state) for example. — WestLangley, Mar 14 '16 at 21:12
I know it but it is an exercise and I have to do it using three.js — ddon-90, Mar 15 '16 at 09:07

score 1 · Accepted Answer · answered Mar 15 '16 at 09:44

1

Add Moon not to the scene, but to the Earth and change the order of application of the matrix:

earth.add(moon);

// ...

moon.matrix = moon_rotation_matrix.multiply(moon_translation_matrix);

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

answered Mar 15 '16 at 09:44

stdob--

28,222
5
58
73

Amazing, thanks a lot. I think I undestood now, I should have added the moon as a earth's child. – ddon-90 Mar 15 '16 at 09:55
I would strongly advise against calling `new THREE.Matrix4()` multiple times in the render loop. – WestLangley Mar 15 '16 at 15:53

How to make the moon translate around the earth and together around the sun

1 Answers1