ThreeJS : 마우스 클릭 좌표로 선 그리기

Question

나는 태양계를 만들기 위해 ThreeJS와 협력 중이다. 나는 중간에 태양이 있고 주위 8 궤도에있다. 이제 사용자가지도의 아무 곳이나 클릭하면 가장 가까운 링 포이즌을 얻고 싶습니다!

Here is an image to describe it visually what I mean

화살표

는 상기 사용자의 "클릭"을 나타내며, 그 다음에 위치 궤도와 좌표 (흰 점)을 얻을 수있는 기능이 있어야 할 곳에 클릭 포인트 중간에 충돌의 경계선 .

나는 여기에서 많은 다른 기능들을 시도했지만, 그들 중 누구도 내가 원하는 결과를주지 못했다.

도움 주셔서 감사합니다.

이 코드는 다음과 같이 현재 보이는 : 마우스가있는 지점에 카메라에서

  var container, stats, parent, pivots, domEvents, twins, planets, sun, fleets, raycaster, mouse; 
      var camera, controls, scene, renderer; 
      var cross; 
      planets = new Array(); 

      init(); 
      animate(); 
      function init() 
      { 


       raycaster = new THREE.Raycaster(); 
       mouse = new THREE.Vector2(); 

       //init 
       camera = new THREE.PerspectiveCamera(10, 1, 1, 4000); 
       camera.position.z = 200; 
       camera.position.x = 200; 
       camera.position.y = 200; 
       controls = new THREE.OrbitControls(camera); 
       controls.addEventListener('change', render); 
       scene = new THREE.Scene(); 
       scene.fog = new THREE.FogExp2(0x000000, 0); 

       // renderer 
       renderer = new THREE.WebGLRenderer({antialias: false, alpha: true}); 
       renderer.setSize(document.getElementById('canvasreference').offsetWidth, document.getElementById('canvasreference').offsetWidth); 
       renderer.setClearColor(0x787878, 0.5); // the default 

       container = document.getElementById('canvasreference'); 
       container.appendChild(renderer.domElement); 
       window.addEventListener('resize', onWindowResize, false); 
       domEvents = new THREEx.DomEvents(camera, renderer.domElement); 

       //axihelper 
       scene.add(new THREE.AxisHelper(130)); 

       // parent 
       parent = new THREE.Object3D(); 
       scene.add(parent); 

       //arrays 
       orbits = new Array(); 



       addOrbit(); 

       window.addEventListener('click', onMouseMove, false); 

      } 


      function onMouseMove(event) { 
        canvas = renderer.domElement; 
       raycaster = new THREE.Raycaster(); 
       mousePosition = new THREE.Vector2(); 
       canvasPosition = $("#canvasreference canvas").position(); 
       console.log(canvasPosition); 
       mousePosition.x = ((event.clientX - canvasPosition.left)/canvas.width) * 2 - 1; 
       mousePosition.y = -((event.clientY - canvasPosition.top)/canvas.height) * 2 + 1; 

       raycaster.setFromCamera(mousePosition, camera); 



       var geometry = new THREE.Geometry(); 
       var origin = new THREE.Vector3(raycaster.ray.origin.x, 0, raycaster.ray.origin.y); 
       geometry.vertices.push(origin); 

       var vektor = new THREE.Vector3(raycaster.ray.direction.x, 0, raycaster.ray.direction.y); 

       for (var i = 0; i < 1000; i++) 
       { 
       origin.add(vektor); 
       geometry.vertices.push(vektor); 

       } 


       var material = new THREE.LineBasicMaterial({ 
       color: 0xffffff, linewidth: 20 
       }); 

       var line = new THREE.Line(geometry, material); 

       scene.add(line); 
       renderer.render(scene, camera); 




      } 

      function onWindowResize() { 

       camera.aspect = window.innerWidth/window.innerHeight; 
       camera.updateProjectionMatrix(); 
       renderer.setSize(600, 600); 
       render(); 
      } 

      function animate() { 

       requestAnimationFrame(animate); 
       controls.update(); 

       renderer.render(scene, camera); 
      } 

      function render() { 
       renderer.render(scene, camera); 
      } 



      /** 
      * add Orbit line 
      * @param {type} orbit 
      * @returns {undefined} 
      */ 
      function addOrbit(orbit) 
      { 
       for (var i = 0; i < 8; i++) 
       { 
        //make orbit line 
        var orbit = new THREE.EllipseCurve(
          0, 0, // ax, aY 
          i * 10 + 30, i * 10 + 30, // xRadius, yRadius 
          0, 2 * Math.PI, // aStartAngle, aEndAngle 
          false, // aClockwise 
          0     // aRotation 
          ); 
        var path = new THREE.Path(orbit.getPoints(100)); 
        var geometry = path.createPointsGeometry(100); 
        var material = new THREE.LineBasicMaterial({color: 0xffffff}); 

        var ellipse = new THREE.Line(geometry, material); 
        ellipse.rotation.x = 1.5708; 
        scene.add(ellipse); 
       } 

      } 


     </script> 

Answer 1

캐스트 광선. 그런 다음 distanceToPoint 기능을 사용하여 태양계의 중간까지 그 광선으로부터 가장 가까운 거리를 확인하십시오. 출력 벡터의 길이는 광선이 접하는 구의 반경입니다. 이 길이를 사용하여 궤도 인 구체에 얼마나 가까운 지와 그것이 선택되어야 하는지를 결정할 수 있습니다. 그 수표의 의사 코드는 다음과 같습니다 :