three.js mousedownイベントでラインを描く方法

Question

私はこの効果を完成させるために多くの方法を試しています。私はマウスダウンイベントの行を描きたいと思いますが、他にも多くの質問がありますが、それまでは、私はintersectObjects（）のRayキャスターメソッドを使用して、クリックの位置を取得しますが、私はそのときの方法はありません。

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）から設定されwanted.thisもの最終的な効果はありません。ここにスクリーンショットがあります：

赤い線は、私が実装したいものです。理由を見つけ出すことができますか？ありがとうございます。

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()の機能を見てください。私が上に述べたことはすべてそこにあります。