three.js - 在 three.js 中沿 raycaster 的方向画线

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 );
  ...
}

检测与物体的碰撞，这意味着您“射击”了物体。

现在，我想可视化子弹所经过的路径。我正在考虑从用户正在寻找的地方向光线转换器的方向画一条线，但我不知道该怎么做......任何人都可以帮助我吗？我是 three.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 );

代码笔:https://codepen.io/anon/pen/evNqGy