Question

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

Answer 1

如果我找对你。

对于轨道，可能有一个粗略的解决方案：

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示例。澄清，如果我错过了你的问题。

创建一个行星轨道

1 个答案: