Three.js 创建行星轨道_Three.js

Three.js 创建行星轨道

three.js

Three.js 创建行星轨道,three.js,Three.js,我想创建一个红环来可视化绿色球体围绕黄色球体的轨道。使用lookat（）我已经将环定向到绿色球体，但我不知道如何将环移动到正确的角度我的剧本： <!doctype html> <html> <head> </head> <body> <div id="container"></div>  <script src="js/three.j

我想创建一个红环来可视化绿色球体围绕黄色球体的轨道。使用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>


var摄影机、控件、场景、渲染器、光线投射器；
var mouse=new THREE.Vector2（）；
init（）；
制作动画（）；
函数init（）{
场景=新的三个。场景（）；
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.doElement）；
摄像头=新的三个透视摄像头（45，window.innerWidth/window.innerHeight，110000000000000）；
摄像机位置z=30；
控件=新的三个.轨道控件（摄影机、渲染器.doElement）；
控件。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"]
对于（变量i=0；i<7；i++）{
var几何=新的三种。球墨法（5,32,32）；
var material=新的三个.MeshBasicMaterial（{color:0x09F425}）；
var mesh=新的三个网格（几何体、材质）；
mesh.position.x=行星[i*4]/100000000；
mesh.position.y=行星[i*4+1]/100000000；
mesh.position.z=行星[i*4+2]/100000000；
场景。添加（网格）；
var startPoint=新的三个向量3（0,0,0）；
var endPoint=new THREE.Vector3（行星[i*4]/100000000，行星[i*4+1]/100000000，行星[i*4+2]/100000000）；
var direction=new THREE.Vector3（）.子向量（endPoint，startPoint）.normalize（）；
var arrow=新的三个.arrow辅助对象（方向、起始点、起始点.distanceTo（端点），0xCC0000）；
场景。添加（箭头）；
var geometry=new THREE.RingGeometry（起始点.distanceTo（端点）-1，起始点.distanceTo（端点），32）；
var material=新的三个.MeshBasicMaterial（{color:0xCC0000，side:THREE.DoubleSide}）；
var mesh=新的三个网格（几何体、材质）；
var测试点=新的三点矢量3（行星[i*4]/100000000，（行星[i*4+1]/100000000）*0.5，行星[i*4+2]/100000000）；
var pos=新的3.Vector3（）；
位置添加向量（测试点、网格位置）；
目测（pos）；
场景。添加（网格）；
}
var几何=新的三种。球墨法（10,32,32）；
var material=新的三个.MeshBasicMaterial（{color:0xCDF409}）；
var mesh=新的三个网格（几何体、材质）；
网格位置x=0；
网格位置y=0；
网格位置z=0；
场景。添加（网格）；
addEventListener（'mousemove'，onMouseMove，false）；
addEventListener（'resize'，onWindowResize，false）；
}
函数onWindowResize（）{
camera.aspect=window.innerWidth/window.innerHeight；
camera.updateProjectMatrix（）；
renderer.setSize（window.innerWidth、window.innerHeight）；
}
mouseMove函数（事件）{
//在标准化设备坐标中计算鼠标位置
//两个组件的-1到+1
mouse.x=（event.clientX/window.innerWidth）*2-1；
mouse.y=-（event.clientY/window.innerHeight）*2+1；
}       
函数animate（）{
请求动画帧（动画）；
render（）；
}
函数render（）{
//使用相机和鼠标位置更新拾取光线
raycaster.setFromCamera（鼠标、相机）；
//计算与拾取光线相交的对象
var intersects=raycaster.intersectObjects（scene.children）；
对于（变量i=0；i

如果我没弄错的话
对于轨道，可以有一个粗略的解决方案：
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

例如。如果我从你的问题中漏掉了什么，请澄清。
如果我答对了你
对于轨道，可以有一个粗略的解决方案：
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

例如。如果我在你的问题中遗漏了什么，请澄清。
请将你的代码插入并发布在这里。@Zagoda JSFiddle:你可以用鼠标旋转、缩放和移动请将代码插入并发布在这里。@Zagoda JSFiddle:你可以用鼠标旋转、缩放和移动。这正是我想要的。谢谢。这正是我想要的。