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

若要检测与对象的碰撞，这意味着您“射击”了该对象。

现在，我想想象一下子弹所走的路。我在考虑从用户所期望的方向划出一条线，但是我想不出怎么做.有人能帮我吗？我是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

Answer 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轴。一开始就不太好了。我现在正在把这个转换成极坐标，但是我不知道发生了什么。

​

​