2つの3Dポイント間でBoxGeometryを整列します

Question

グリッドを使用せずにワールドにオブジェクトを追加できるゲームを作成します。今私は歩道を作りたい。 「歩道を作成する」をクリックすると、レイキャスター位置にワールド上のポイントを追加できます。最初のポイントを追加すると、ワールドに2番目のポイントを追加できます。これらの2つのオブジェクトが配置されているとき。ライン/歩道は、第1の点から第2の点まで見ることができる。

THREE.Lineと私はこれを本当に簡単に行うことができます。コードを参照してください：

var lineGeometry = new THREE.Geometry(); 
lineGeometry.vertices.push(new THREE.Vector3(x1,0,z1), new THREE.Vector3(x2,0,z2)); 
lineGeometry.computeLineDistances(); 
var lineMaterial = new THREE.LineBasicMaterial({ color: 0xFF0000 }); 
var line = new THREE.Line(lineGeometry, lineMaterial); 
scene.add(line); 

しかし、私は単純な行にテクスチャを追加することはできません。今私はメッシュで何か同じことをしたい。私は最初の点の位置と2番目の点のレイキャスターの位置を持っています。私はまた、歩道の長さの2つのオブジェクトの間に長さがあります。しかし、私はどのように私は必要な回転を得ることができるか分からない。

注意。私はLookAtについて何かを見ました、これは多分良いアイデアですか、どのようにメッシュでこれを使うことができますか？

footpathオブジェクトの正しい回転を手助けできる人はいますか？

私はfoodpathメッシュのために、このコードを使用します。

var loader = new THREE.TextureLoader(); 
loader.load('images/floor.jpg', function (texture) { 
    var geometry = new THREE.BoxGeometry(10, 0, 2); 
    var material = new THREE.MeshBasicMaterial({ map: texture, overdraw: 0.5 }); 
    var footpath = new THREE.Mesh(geometry, material); 
    footpath.position.copy(point2); 
    var direction = // What can I do here? 
    footpath.rotation.y = direction; 
    scene.add(footpath); 
}); 

私はdirectionの正しい回転を取得したいです。

[UPDATE] WestLangleyのコードは大いに役立ちます。しかし、それはすべての方向で動作しません。私はこのコードを長さに使用しました：

var lenght = footpaths[i].position.z - point2.position.z; 

長さはすべての方向で機能しますか？

Answer 1

あなたは、2つの3Dポイント間のボックスを整列します。あなたはそのようなことを行うことができます。

var geometry = new THREE.BoxGeometry(width, height, length); // align length with z-axis 

geometry.translate(0, 0, length/2); // so one end is at the origin 

... 

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

footpath.position.copy(point1); 

footpath.lookAt(point2); 

three.js r.84