創建一個行星軌道

我想要創建一個紅色的圓環來顯示黃色球體周圍的綠色球體的軌道。使用lookat（）我已將環定向到綠色球體，但我不知道如何將環放入正確的天使。創建一個行星軌道

我的腳本：

<!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 = 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 < 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); 

        <!-- I want this red ring in to show the Orbit of the green Spheres --> 

        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); 
        <!---------> 



       } 


     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 < intersects.length; i++) { 
       //intersects[ i ].object.material.color.set(0xff0000); 
      } 


     renderer.render(scene, camera); 
     } 
</script> 

</body> 
</html>

來源

2017-02-07 chip

請JSFFeddle你的代碼併發布在這裏。 – Hasan

@Zagoda jsfiddle：https://jsfiddle.net/n9x3wtnx/1/你可以旋轉，縮放和移動鼠標 – chip

如果我給你的權利。

對於軌道，可以有一個粗略的解決方案：

var geometry = new THREE.CircleGeometry(startPoint.distanceTo(endPoint), 128); 
geometry.vertices.shift(); 
geometry.rotateX(-Math.PI/2); 
var material = new THREE.LineBasicMaterial({ color: 0xCC0000 }); 
var mesh = new THREE.Line(geometry, material);

，然後結合你的軌道，以他們的星球：

mesh.lookAt(endPoint); // as you calculated endPoint before, then no need to calculate the same for testPoint

jsfidde例子。澄清，如果我錯過了你的問題。

來源

2017-02-07 12:12:22 prisoner849

謝謝。這正是我所期待的。 – chip

不客氣） – prisoner849

創建一個行星軌道

回答

相關問題