與three.js所

Question

我要創建一個小型太陽能系統簡單太陽能系統（1星，2個行星，月亮1每星球orbitating）與three.js所 這是我第一次編程一些與three.js所（和JavaScript一般）所以我是一個完整的新手。

我設法創建我的靜態系統，讓我有太陽，火星，火衛一，地球和月亮。

現在我不知道如何使行星是圍繞太陽運行的軌道，而月亮在他們的行星軌道。

這是我到目前爲止

 //global variables declaration 
    function init(){ 
    /*starting code: cameras, declaring variables and so on*/ 
    function celestialBodiesSetup(){ 
     var geometry,material,image; 
     var celestialBodies=[sun,mars,phobos,earth,moon]; 
     //sun, mars etc are declared as global variables before the init function 
     for(var i=0;i<celestialBodies.length;i++){ 
      switch (celestialBodies[i]){ 
       case sun: 
        material=new THREE.MeshPhongMaterial(); 
        geometry =new THREE.SphereGeometry(35,32,32); 
        image="mysun.png"; 
        sun=createSphere(geometry,material,image); 
        sun.position.set(0,0,20); 
        var pointLight = new THREE.PointLight(0xFDFDFD, 2, 1800,70); 
        sun.add(pointLight); 
        break; 
       case mars: 
        material=new THREE.MeshPhongMaterial(); 
        geometry =new THREE.SphereGeometry(17,32,32); 
        image="mars.jpg"; 
        mars=createSphere(geometry,material,image,sun); 
        mars.position.set(150,-15,0); 
        break; 
      /*repeat process for the remaining celestial bodies*/ 
     function createSphere(geometry,material,image,celBody){ 
     var sphere = new THREE.Mesh(geometry, material); 
     material.map= THREE.ImageUtils.loadTexture(image); 
     if(celBody) celBody.add(sphere); /*I set that all the planets are added to the sun, and all 
      the moons are added to their planet. Only the sun is added to the scene itself*/ 
     else scene.add(sphere); 
     return sphere; 
    } 
    celestialBodiesSetup(); 
} 

做在這一點上我對動畫（）函數的工作，但我不知道向量，旋轉等線索。

只有我能做的事情就是設置類似earth.rotation.y + = 0.1，使這個星球上開始它的軸旋轉，但僅此而已。

Answer 1

你爲什麼不嘗試一下

http://www.html5rocks.com/en/tutorials/casestudies/100000stars/

案例研究，這是件好事再加上

https://www.chromeexperiments.com/?q=solar%20

有很多例如爲了很好的參考threejs圖書館啓動繼續與樣品可視化

http://stemkoski.github.io/Three.js/

http://mrdoob.github.io/three.js/examples/canvas_geometry_earth.html

http://oos.moxiecode.com/blog/index.php/experiments/javascript-webgl/

在庫接口，這些教程可以幫助你，使該項目的抽象水平。您需要花時間在旋轉矢量，四元數和着色器上以深入。

您也可以考慮通過Unity 3D引擎建立了一個快速隔夜原型你的東西得到的東西做示範。

Answer 2

我沒有類似的東西，並完成了旋轉和軌道有以下幾點：

//Earth rotation and orbit 
earthMesh.rotation.y = Date.now() * -0.001; 
earthMesh.position.x = Math.sin(Date.now() * 0.001) * 219.15; 
earthMesh.position.z = Math.cos(Date.now() * 0.001) * 219.15; 

//Moon rotation and orbit 
moonMesh.rotation.y = Date.now() * -0.001; 
moonMesh.position.x = Math.sin(Date.now() * 0.001) * 219.15 + Math.cos(Date.now() * -0.007) * -10; 
moonMesh.position.z = Math.cos(Date.now() * 0.001) * 219.15 + Math.sin(Date.now() * -0.007) * -10;