title: Create a planet orbit
body: <p>i want create a red ring to visualize the Orbit of the green Sphere around the yellow Sphere. With lookat() i have orientate the rings to the green Spheres but i have no idea how i can move the rings in the right angel.</p>
  
  <p>My script:</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 = false;
  
  
        var planet = ["-4067664386091","-710580828973","-3956610895959","2060000",
                      "29476716044","5149291420","-46417511315","2660000",
                      "124056083719","21671373654","16235707106","4810000",
                      "-107354576606","-18753785170","436797007078","18890000",
                      "-639929607985","-111789387758","-1118379774141","57970000",
                      "2907924314427","507985682645","-950946134275","2830000",
                      "-2275005926406","-397421085828","3223734974754","7480000",
                      "-4067664386091","-710580828973","-3956610895959","5110000"]
  
  
  
  
        for ( var i = 0; i &lt; 7; i ++ ) {
                      var geometry = new THREE.SphereGeometry(5, 32, 32);
                      var material = new THREE.MeshBasicMaterial( {color: 0x09F425} );
  
                      var mesh = new THREE.Mesh( geometry, material );
  
                      mesh.position.x = planet[i * 4] / 1000000000;
                      mesh.position.y = planet[i * 4 + 1] / 1000000000;
                      mesh.position.z = planet[i * 4 + 2] / 1000000000;
                      scene.add( mesh );
  
                      var startPoint   = new THREE.Vector3(0,0,0);
                      var endPoint = new THREE.Vector3(planet[i * 4] / 1000000000,planet[i * 4 + 1] / 1000000000,planet[i * 4 + 2] / 1000000000);
                      var direction = new THREE.Vector3().subVectors(endPoint, startPoint).normalize();
                      var arrow = new THREE.ArrowHelper(direction, startPoint, startPoint.distanceTo(endPoint), 0xCC0000 );
                      scene.add(arrow);
  
                      &lt;!-- I want this red ring in to show the Orbit of the green Spheres --&gt;
  
                      var geometry = new THREE.RingGeometry(startPoint.distanceTo(endPoint) - 1, startPoint.distanceTo(endPoint), 32);
                      var material = new THREE.MeshBasicMaterial( { color: 0xCC0000, side: THREE.DoubleSide } );
                      var mesh = new THREE.Mesh( geometry, material );
  
  
                      var testPoint = new THREE.Vector3(planet[i * 4] / 1000000000,(planet[i * 4 + 1] / 1000000000)*0.5,planet[i * 4 + 2] / 1000000000);
                      var pos = new THREE.Vector3();
                      pos.addVectors(testPoint, mesh.position);
                      mesh.lookAt(pos);
                      scene.add(mesh);
                      &lt;!---------&gt;
  
  
  
                  }
  
  
          var geometry = new THREE.SphereGeometry(10, 32, 32);
          var material = new THREE.MeshBasicMaterial( {color: 0xCDF409} );
          var mesh = new THREE.Mesh( geometry, material );
  
          mesh.position.x = 0;
          mesh.position.y = 0;
          mesh.position.z = 0;
          scene.add( 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() {
              // update the picking ray with the camera and mouse position
              raycaster.setFromCamera( mouse, camera );
  
              // calculate objects intersecting the picking ray
              var intersects = raycaster.intersectObjects( scene.children );
  
              for ( var i = 0; i &lt; intersects.length; i++ ) {
                  //intersects[ i ].object.material.color.set( 0xff0000 );
              }
  
  
          renderer.render(scene, camera);
          }
  &lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>