Question

我想要达到的目标是让激光束在太空中连接2个点。

我在想，也许通过渲染一个lineGeometry并追加在x轴上旋转的6个平面就可以了，但看起来它更复杂。

这就是我生成激光束的方法，到目前为止一直很好

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）。

线几何似乎可以解决问题（长度总是等于2点之间的距离），通过将第二个顶点更新为需要与每个帧连接的Vector3，但我不是对于我应该使用`Object3D（我不知道如何找出Object3D的每一端所在的位置）采取何种方法充满信心。

Answer 1

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

解决方案是创建一个PlaneBufferGeometry并转换几何体，使一端位于原点，几何体与正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.lookAt( target.position );

唯一可能是问题的是激光必须直接成为场景的孩子，因为lookAt()在这个意义上是有限的。

如果你想动态改变激光的长度，最简单的方法就是这样做：

laser.scale.z = 2;

three.js r.84

ThreeJS Object 3d连接2点

1 个答案: