title: Move moon orbit from sun to planet
body: <p>yesterday @prisoner849 help me very well with the plante Orbit: Create a planet orbit</p>
  
  <p>But now i have the problem to modify the script to create the orbit for the moons around the planets. I test to modify the start Point, but allways the Obrits are created at 0,0,0 around the sun not around the planet.</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html&gt;
  &lt;head&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;div id="container"&gt;&lt;/div&gt;
    &lt;!--Load three.js--&gt;
    &lt;script src="js/three.js"&gt;&lt;/script&gt;
    &lt;script src="js/controls/OrbitControls.js"&gt;&lt;/script&gt;
  
  &lt;script&gt;
  
  
      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 &lt; 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 &lt; 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);
          }
  
  
  &lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Here are the jsfiddle: <a href="https://jsfiddle.net/n9x3wtnx/2/" rel="nofollow noreferrer">https://jsfiddle.net/n9x3wtnx/2/</a></p>