在three.js中沿raycaster方向画线答案

【问题标题】：Draw line in direction of raycaster in three.js在three.js中沿raycaster方向画线
【发布时间】：2016-11-07 09:40:42
【问题描述】：

在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);

但我不知道用什么来代替 "..." 。我怎样才能检测到线应该去哪一点？以及如何确定它从哪一点开始？玩家可以移动甚至跳跃，所以起点也总是不同的。

【问题讨论】：

github.com/mrdoob/three.js/wiki/Drawing-lines
感谢您的参考。我现在知道如何画线，但仍然不知道如何解决我的问题。我已经更新了我的问题。
我认为你只需要发送push() 方法的起点和终点（向量）。第一个可能是您的相机位置geometry.vertices.push(camera.position)。第二个是从 intersectObjects 函数返回的第一个交点。 geometry.vertices.push(intersects[0].point)。我没有使用 Raycaster，所以没有测试过，但它会是类似的东西。

标签： three.js

【解决方案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

【讨论】：

【解决方案2】：

你可以这样使用：

function animate_Line(frame, totalFrames) {

    //Calculate how much of the line should be drawn every iteration
    var delta = lineDistance/(totalFrames);  
    var deltaSpeed = delta * frame;

    for(var i=0; i<f_Ray_List[0].length; i++) {
        for(var j=0; j<f_Ray_List[1].length; j++) {
            //Change Offsets
            line.geometry.vertices[1].y = line.geometry.vertices[0].y - deltaSpeed;

            //Update Rays = true (Make FRT rays draw-able)
            line.geometry.verticesNeedUpdate = true;
        } 
    }
}

其中frame 是当前帧（动画函数中的一个计数器），totalFrames 将是动画线所需的帧数。 lineDistance 可以这样计算：

 lineDistance = line.geometry.vertices[0].y - line.vertices[1].y; //Add this line where you create the line object.

记得在每一行单独调用line.geometry.verticesNeedUpdate = true;，这样该行就可以动画了。

请注意，这仅基于 Line.y 轴。起初这不会很好。我目前正在努力将其转换为极坐标，但我不知道发生了什么哈哈。

【讨论】：