如何让月球在地球周围以及围绕太阳一起移动

月球沿着地球围绕太阳平移，但它并没有围绕地球转化。我想保留matrix4方法，所以通过矩阵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 
    }

来源

2016-03-14 ElDon90

这不是three.js所是如何desinged要使用的。例如，请参阅[本文]中链接的一些小提琴（http://stackoverflow.com/questions/29744233/animating-planet-orbiting-its-parent-idependent-on-parents-rotation-state）。 – WestLangley

我知道它，但它是一个练习，我必须使用three.js – ElDon90

添加月亮没到现场，但地球并改变矩阵的应用顺序：

earth.add(moon); 

// ... 

moon.matrix = moon_rotation_matrix.multiply(moon_translation_matrix);

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

来源

2016-03-15 09:44:43

做到这一点令人惊叹，非常感谢。我认为我现在不能坚持，我应该把月亮添加为地球的孩子。 – ElDon90

是的，没错。 –

我强烈建议不要在渲染循环中多次调用'new THREE.Matrix4（）'。 – WestLangley

如何让月球在地球周围以及围绕太阳一起移动

回答

相关问题