javascript - three.js如何用mousedown事件画线

Question

我已经尝试了很多方法来完成这个效果，我想画一条鼠标按下事件的线，我也看到了很多其他问题，但对它没有任何想法，到目前为止我使用的是Ray caster方法intersectObjects() 并获得点击的位置，但我不知道如何，希望有人给我建议，非常感谢。以下是我的部分代码:

event.preventDefault();
mouse.x = ( event.clientX / renderer.domElement.clientWidth ) * 2 - 1;
mouse.y = -( event.clientY / renderer.domElement.clientHeight ) * 2 + 1;  
var raycaster=new THREE.Raycaster();
raycaster.setFromCamera(mouse, camera);
var intersects = raycaster.intersectObjects(objects,true);
console.log(intersects[0].point);//type of intersects[0] is object,one of attribute is point?

昨天我写了一些代码，完成了部分效果。下面是一些代码:

 var clickCount = 0;//initial value
 clickCount = clickCount+1;
 if(intersects.length>0)
 {
     switch(clickCount)
     {
         case 1:
                var startPoint=intersects[0].point;//store the first intersect point when the first click
                break;
    case 2:
                var endPoint =intersects[0].point;//store the second intersect point when the second click
                break;
     }
  }


clickCount=1;
var geometry = new THREE.Geometry();
material = new THREE.LineBasicMaterial({color:0xffffff,linewidth:2});
geometry.vertices.push(startPoint);
geometry.vertices.push(endPoint);
line = new THREE.Line(geometry, material);
scene.add(line);

但这不是我想要的最终效果。这部分线都是从矢量(0,0,0)设置的光线。这是屏幕截图:

红线是我要实现的效果。谁能找出原因？非常感谢。

Answer 1

最好记住第一个单击的对象，然后在下一次单击时检查是同一个对象还是另一个对象，如果是另一个对象，则在它们之间画一条线。

var intersected, lineObjects = [],
objects = [];
. . .

在事件处理程序中:

  if (intersects.length > 0) {
    var found = intersects[0].object;
    if (found != intersected) {
      if (lineObjects.length > 0) {
        var line = lineObj(lineObjects[0].position, found.position);
        scene.add(line);
        lineObjects[0].material.color.setHex(lineObjects[0].userData.oldColor);
        intersected = null;
        lineObjects = [];
      } else {
        found.userData.oldColor = found.material.color.getHex();
        found.material.color.set(0x00FF00);
        intersected = found;
        lineObjects.push(found);
      }
    } else {
      found.material.color.setHex(found.userData.oldColor);
      intersected = null;
      lineObjects = [];
    }
  }

我做了一个 jsfiddle例子。查看 onMouseDown() 函数。我上面描述的所有东西都在那里。