raycasterの方向にthree.jsで線を引く

Question

three.jsでは、私はPointerLockコントロールを使って基本的な一人称シューティングゲームを作っています。 私はあなた「ショット」オブジェクトを意味オブジェクトとの衝突を検出するために

function onDocumentMouseDown(event) { 
    var raycaster = new THREE.Raycaster(); 
    mouse3D.normalize(); 
    controls.getDirection(mouse3D); 
    raycaster.set(controls.getObject().position, mouse3D); 
    var intersects = raycaster.intersectObjects(objects); 
    ... 
} 

を使用しています。

ここで、弾丸が取った経路を視覚化したいと思います。私は、ユーザーが探している線をレイキャスターの方向に描くことを考えていましたが、これを行う方法を理解できません...誰かが私を助けることができますか？私は3つの新しい.js、決してラインを描くことがこれは難しいとは思わなかった。

更新： 私が使用して線を描画しようとしている：

var geometry = new THREE.Geometry(); 
geometry.vertices.push(...); 
geometry.vertices.push(...); 
var line = new THREE.Line(geometry, material); 
scene.add(line); 

が、私は「...」の代わりに置くために何を把握することはできません。どのポイントに行を移動させるべきかをどのように検出することができますか？どの点から始めるのかを決定する方法は？プレイヤーは移動してジャンプすることもできるため、開始点も常に異なっています。

Answer 1

あなたは（R83を使用して）以下を使用することができます。

// Draw a line from pointA in the given direction at distance 100 
    var pointA = new THREE.Vector3(0, 0, 0); 
    var direction = new THREE.Vector3(10, 0, 0); 
    direction.normalize(); 

    var distance = 100; // at what distance to determine pointB 

    var pointB = new THREE.Vector3(); 
    pointB.addVectors (pointA, direction.multiplyScalar(distance)); 

    var geometry = new THREE.Geometry(); 
    geometry.vertices.push(pointA); 
    geometry.vertices.push(pointB); 
    var material = new THREE.LineBasicMaterial({ color : 0xff0000 }); 
    var line = new THREE.Line(geometry, material); 
    scene.add(line); 

Codepenで：https://codepen.io/anon/pen/evNqGy