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 

とても良いこれまでのところ、私はレーザービームを生成する方法では、2ポイント（Vec3）にobject3Dの両端をレンダリングすることです。

ラインジオメトリは、2番目の頂点をVector3に更新することで、すべてのフレームに接続する必要があるトリック（長さは常に2点間の距離に等しくなります）と思われますが、私は `Object3D（Object3Dの各端がどこにあるかを調べる方法はわかりません）を使用する必要があります。

Answer 1

2つの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