javascript - 在两个 3D 点之间对齐 BoxGeometry

Question

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

我可以使用 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);

但我无法在简单的线条上添加纹理。现在我想用网格做同样的事情。我有第一个点的位置和第二个点的光线转换器位置。我还有两个物体之间的长度作为人行道的长度。但我不知道如何获得所需的轮换。

注意。我看到了一些关于 LookAt 的内容，这可能是个好主意，我如何将其与网格一起使用？

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

我将此代码用于食物路径网格:

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

我想获得方向的正确旋转。

[更新]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 );

三.js r.84