ThreeJS对象3d连接2个点

我试图实现的是让一束激光连接空间中的两个点

我在想，也许通过渲染一个线几何体并附加6个在x轴上旋转的平面就可以做到这一点，但它看起来更复杂

这就是我产生激光束的方法，到目前为止还不错

window.lazor = new THREE.Object3D();
        var material    = new THREE.MeshBasicMaterial({
            blending    : THREE.AdditiveBlending,
            color       : 0x4444aa,
            side        : THREE.DoubleSide,
            depthWrite  : false,
            transparent : true
        })
        var geometry    = new THREE.PlaneBufferGeometry(100, 0.1)
        var nPlanes = 3;
        for(var i = 0; i < nPlanes; i++){
            var mesh    = new THREE.Mesh(geometry, material)
            mesh.rotation.x = i/nPlanes * Math.PI
            lazor.add(mesh);
        }

        window.lazor.rotation.y = Math.PI / 2

我正在研究的是将object3D的两端渲染为2点vec3

---

线条几何似乎可以做到这一点。通过将第二个垂直点更新为需要与每一帧连接的向量3，技巧长度将始终等于两个点之间的距离，但是我不确定使用“Object3D”应该采取什么方法我不确定如何找出Object3D的每一端的位置

您想创建一个跨越两个3D点的平面

解决方案是创建平面几何体并变换几何体，以便一端位于原点，并且几何体与正z轴对齐

因此，在您的情况下，要创建激光器，您可以执行以下操作：

// material
var material    = new THREE.MeshBasicMaterial( {

    blending    : THREE.AdditiveBlending,
    color       : 0x4444aa,
    side        : THREE.DoubleSide,
    depthWrite  : false,
    transparent : true

} );

// geometry
var geometry = new THREE.PlaneBufferGeometry( 1, 100 );
geometry.rotateX( - Math.PI / 2 ); // so it aligns with the z-axis
geometry.translate( 0, 0, 50 ); // so one end is at the origin

// laser
laser = new THREE.Object3D();
laser.position.set( 10, 10, 10 );
scene.add( laser );

var nPlanes = 3;

for( var i = 0; i < nPlanes; i++ ){

    var mesh = new THREE.Mesh( geometry, material );

    mesh.rotation.z = i / nPlanes * Math.PI; // rotate around z-axis

    laser.add( mesh );

}

// laser target
target = new THREE.Object3D(); // or some character in the scene
target.position.set( 200, 200, 200 ); // or wherever it happens to be

唯一可能存在问题的是，激光必须是场景的直接子对象，因为从这个意义上讲，注视是有限的

如果要动态更改激光器的长度，最简单的方法是：

laser.scale.z = 2;

---

three.js r.84

事实上，目标儿童是一个组的一部分，不幸的是，这个组无法删除，因为它应该根据玩家的目标位置四处移动，这意味着修复巨大坐标上的浮点错误。在你拒绝之前，请思考我的答案5分钟以上。目标是激光指向的物体。此外，three.js r85dev还缓解了大型坐标问题。我一直在实现代码，并通过获取目标的matrixworld，成功地将光束对准了需要的地方。我不知道R85中即将出现的浮点修正，这太棒了。然而，一切都很顺利。。我认为Vec3.lookAtx，y，z可能是一个昂贵的操作，但到目前为止，它就像一个符咒

laser.scale.z = 2;