在three.js中沿光线投射器的方向绘制线

在three.js中沿光线投射器的方向绘制线,three.js,Three.js,在three.js中,我使用PointerLock控件创建基本的第一人称射击游戏。 我用 检测与对象的碰撞,这意味着您“拍摄”了对象 现在,我想想象一下子弹的路径。我在考虑从用户所看的地方画一条线,沿着光线投射器的方向,但我不知道怎么做。。。有人能帮我吗?我刚接触three.js,没想到划一条线会这么难 更新: 我试图用以下方法画一条线: var geometry = new THREE.Geometry(); geometry.vertices.push(...); geometry.vert

在three.js中,我使用PointerLock控件创建基本的第一人称射击游戏。 我用

检测与对象的碰撞,这意味着您“拍摄”了对象

现在,我想想象一下子弹的路径。我在考虑从用户所看的地方画一条线,沿着光线投射器的方向,但我不知道怎么做。。。有人能帮我吗?我刚接触three.js,没想到划一条线会这么难

更新: 我试图用以下方法画一条线:

var geometry = new THREE.Geometry();
geometry.vertices.push(...);
geometry.vertices.push(...);
var line = new THREE.Line(geometry, material);
scene.add(line);
但我不知道该用什么来代替“…”。我怎样才能检测出这条线应该到哪一点?如何确定它从哪一点开始?玩家可以移动甚至跳跃,因此起点也总是不同的。

您可以使用以下方法(使用r83):


Codepen位于:

您可以使用以下内容:

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;
        } 
    }
}
并记住调用
line.geometry.verticesNeedUpdate=true在每一行中单独显示,以便可以对该行设置动画

请注意,这仅基于Line.y轴。一开始这并不好。我现在正在把它转换成极坐标,但是我不知道发生了什么,哈哈


谢谢您的推荐。我现在知道如何划定界限,但仍然不知道如何解决我的问题。我已经更新了我的问题。我想您只需要发送
push()
方法作为起点和终点(向量)。第一个可能是您的相机位置
geometry.vertices.push(camera.position)
。第二个是intersectObjects函数返回的第一个中间点<代码>几何体.顶点.推(与[0]相交.点)
。我没有使用Raycaster,所以没有测试过这个,但它会像它一样。
    // 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 );
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;
        } 
    }
}
 lineDistance = line.geometry.vertices[0].y - line.vertices[1].y; //Add this line where you create the line object.