Javascript 在两个三维点之间对齐BoxGeometry

我做了一个游戏，你可以添加对象到一个世界，而不使用网格。现在我想做一条小路。当单击“创建人行道”时，可以在光线投射器位置向世界上添加一个点。添加第一个点后，可以向世界添加第二个点。当这两个对象放置在何处时。从第一个点到第二个点可见一条线/人行道

我可以用

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

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

注意。我看到了一些关于

的信息，看看
，这可能是个好主意吗，我如何将其用于网格

有人能帮我获得人行道对象的正确旋转吗

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

我想获得
方向的正确旋转

[更新]
WestLangley的代码帮助很大。但它并非在所有方向都有效。我在长度上使用了以下代码：

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

我该怎么做才能使长度在各个方向上都起作用

要在两个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
您希望在两个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
阅读答案并查看其JSFIDLE示例。它是关于
.lookAt（）
和点之间的连接器。如果距离是动态的，那么最好将
长度设置为1（
var geometry=new THREE.BoxGeometry（width，height，1）；
），然后像
footah.scale.z=point1.distanceTo（point2）
那样缩放它。这是我之前评论的相关答案。WestLangley是正确的——在问题得到回答后改变它不是一种好的方式。阅读答案并看看它的JSFIDLE示例。它是关于
.lookAt（）
和点之间的连接器。如果距离是动态的，那么最好将
长度设置为1（
var geometry=new THREE.BoxGeometry（width，height，1）；
），然后像
footah.scale.z=point1.distanceTo（point2）
那样缩放它。这是我之前评论的相关答案。韦斯特兰利是对的——在问题得到回答后再改变问题不是一种好的方式。谢谢你的帮助。我更新我的问题。你知道我怎么解决这个问题吗？回答完后不要改变问题<代码>长度=点1。距离（点2）谢谢你的帮助。我更新我的问题。你知道我怎么解决这个问题吗？回答完后不要改变问题<代码>长度=点1。距离（点2）