在两个3D点之间对齐BoxGeometry

Question

我制作的游戏可以在不使用网格的情况下将对象添加到世界中。现在我想做一条小径。当您单击“创建行人路径”时，您可以在raycaster位置向世界添加一个点。添加第一个点后，您可以向世界添加第二个点。当这两个物体放在哪里时。从第一个点到第二个点可以看到线/行径。

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);

但我无法在简单的线条上添加纹理。现在我想用Mesh做同样的事情。我有第一点的位置和第二点的raycaster位置。我还有两个物体之间的长度，用于行人路的长度。但我不知道如何获得所需的旋转。

注意。我看到了关于LookAt的一些信息，这可能是一个好主意，我如何在网格中使用它？

任何人都可以帮助我为小径对象获得正确的旋转吗？

我将此代码用于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

您想要在两个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