移動月球軌道上的行星

昨日@ prisoner849幫助我很好地與普蘭特軌道：創建一個行星軌道移動月球軌道上的行星

但現在我必須修改腳本來創建周圍的行星的衛星軌道的問題。我測試以修改起點，但是Obrits始終圍繞太陽周圍的0,0,0創建，不在行星周圍。

<!doctype html> 
<html> 
<head> 

</head> 

<body> 
    <div id="container"></div> 
    <!--Load three.js--> 
    <script src="js/three.js"></script> 
    <script src="js/controls/OrbitControls.js"></script> 

<script> 


    var camera, controls, scene, renderer, raycaster; 
    var mouse = new THREE.Vector2(); 

    init(); 
    animate(); 

    function init() { 

     scene = new THREE.Scene(); 

     raycaster = new THREE.Raycaster(); 

     renderer = new THREE.WebGLRenderer(); 
     renderer.setSize(window.innerWidth, window.innerHeight); 
     renderer.setClearColor(0x000000); 

     var container = document.getElementById('container'); 
     container.appendChild(renderer.domElement); 

     camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, 1, 100000000000000000); 
     camera.position.z = 30; 

     controls = new THREE.OrbitControls(camera, renderer.domElement); 
     controls.addEventListener('change', render); 
     controls.enableKeys = true; 




     var planet = ["-4067664386091","-710580828973","-3956610895959", 
        "29476716044","5149291420","-46417511315", 
        "124056083719","21671373654","16235707106", 
        "-107354576606","-18753785170","436797007078", 
        "-639929607985","-111789387758","-1118379774141", 
        "2907924314427","507985682645","-950946134275", 
        "-2275005926406","-397421085828","3223734974754"] 




     for (var i = 0; i < 7; i ++) { 
        var planet_geometry = new THREE.SphereGeometry(10, 32, 32); 
        var planet_material = new THREE.MeshBasicMaterial({color: 0x09F425}); 

        var planet_mesh = new THREE.Mesh(planet_geometry, planet_material); 

        planet_mesh.position.x = planet[i * 3]/1000000000; 
        planet_mesh.position.y = planet[i * 3 + 1]/1000000000; 
        planet_mesh.position.z = planet[i * 3 + 2]/1000000000; 
        scene.add(planet_mesh); 

        var startPoint = new THREE.Vector3(0,0,0); 
        var endPoint = new THREE.Vector3(planet[i * 3]/1000000000,planet[i * 3 + 1]/1000000000,planet[i * 3 + 2]/1000000000); 


        var planet_orbit_geometry = new THREE.CircleGeometry(startPoint.distanceTo(endPoint), 128); 
        planet_orbit_geometry.vertices.shift(); 
        planet_orbit_geometry.rotateX(-Math.PI/2); 

        var planet_orbit_material = new THREE.LineBasicMaterial({ color: 0xCC0000 }); 
        var planet_orbit_mesh = new THREE.Line(planet_orbit_geometry, planet_orbit_material); 
        planet_orbit_mesh.lookAt(endPoint); 
        scene.add(planet_orbit_mesh); 

       } 


     var moon = ["124366664452","21725629043","16083110466","560000","2", 
        "-107312642157","-18746459635","436850790914","150000","3", 
        "-107401228066","-18761934719","436860507268","140000","3", 
        "-107302625280","-18745221120","436489789440","270000","3"] 


      for (var i = 0; i < 4; i ++) { 
        var moon_geometry = new THREE.SphereGeometry(moon[i * 5 + 3]/100000, 32, 32); 
        var moon_material = new THREE.MeshBasicMaterial({color: 0xf6cf46}); 

        var moon_mesh = new THREE.Mesh(moon_geometry, moon_material); 

        moon_mesh.position.x = moon[i * 5]/850000000; 
        moon_mesh.position.y = moon[i * 5 + 1]/850000000; 
        moon_mesh.position.z = moon[i * 5 + 2]/850000000; 
        scene.add(moon_mesh); 


        var startPoint = new THREE.Vector3(planet[moon[i * 5 + 4] * 3]/1000000000,planet[moon[i * 5 + 4] * 3 + 1]/1000000000,planet[moon[i * 5 + 4] * 3 + 2]/1000000000);; 
        var endPoint = new THREE.Vector3(moon[i * 5]/850000000, moon[i * 5 + 1]/850000000, moon[i * 5 + 2]/850000000); 

        var moon_obrit_geometry = new THREE.CircleGeometry(startPoint.distanceTo(endPoint), 128); 
        moon_obrit_geometry.vertices.shift(); 
        moon_obrit_geometry.rotateX(-Math.PI/2); 

        var moon_orbit_material = new THREE.LineBasicMaterial({ color: 0xCCCC00 }); 
        var moon_orbit_mesh = new THREE.Line(moon_obrit_geometry, moon_orbit_material); 
        moon_orbit_mesh.lookAt(endPoint); 
        scene.add(moon_orbit_mesh); 
       } 


     var sun_geometry = new THREE.SphereGeometry(10, 32, 32); 
     var sun_material = new THREE.MeshBasicMaterial({color: 0xCDF409}); 
     var sun_mesh = new THREE.Mesh(sun_geometry, sun_material); 

     sun_mesh.position.x = 0; 
     sun_mesh.position.y = 0; 
     sun_mesh.position.z = 0; 
     scene.add(sun_mesh); 



     window.addEventListener('mousemove', onMouseMove, false); 
     window.addEventListener('resize', onWindowResize, false); 



     } 

    function onWindowResize() { 
       camera.aspect = window.innerWidth/window.innerHeight; 
       camera.updateProjectionMatrix(); 
       renderer.setSize(window.innerWidth, window.innerHeight); 
      } 


    function onMouseMove(event) { 
      // calculate mouse position in normalized device coordinates 
      // (-1 to +1) for both components 

      mouse.x = (event.clientX/window.innerWidth) * 2 - 1; 
      mouse.y = - (event.clientY/window.innerHeight) * 2 + 1; 
     }  

    function animate() { 
       requestAnimationFrame(animate); 
       render(); 
      } 

    function render() { 
     renderer.render(scene, camera); 
     } 


</script> 

</body> 
</html>

這裏是的jsfiddle：https://jsfiddle.net/n9x3wtnx/2/

來源

2017-02-08 chip

不要使用相同的變量的名稱，比如'geometry'，'material'，'mesh'表示你創建的所有東西，因爲很難理解它是什麼。 – prisoner849

@ prisoner849我使用明確的名稱更新代碼：https://jsfiddle.net/n9x3wtnx/4/ – chip

簡單地說，你必須把你的月球軌道上的立場，以行星的位置：

var orbGeometry = new THREE.CircleGeometry(startPoint.distanceTo(endPoint), 128); 
orbGeometry.vertices.shift(); 
orbGeometry.rotateX(-Math.PI/2); 

var orbMaterial = new THREE.LineBasicMaterial({ color: 0xCCCC00 }); 
var orbit = new THREE.Line(orbGeometry, orbMaterial); 
orbit.position.copy(startPoint); // orbit's origin at planet's position 
orbit.lookAt(endPoint); 
scene.add(orbit);

jsfiddle例如

來源

2017-02-08 12:33:57 prisoner849

謝謝，工作得很好。 – chip

移動月球軌道上的行星

回答

相關問題