Question

昨天@ 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/

Answer 1

简单地说，你必须把月球轨道的位置放在行星的位置上：

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示例

将月球轨道从太阳移动到行星

1 个答案: