ThreeJS 对象 3d 连接 2 个点

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;

三.js R.84