我制作了一个游戏,您可以在不使用网格的情况下向世界添加对象。现在我想做一条人行道。当您单击“创建路径”时,您可以在世界上的光线转换器位置添加一个点。添加第一个点后,您可以向世界添加第二个点。当这两个物体放置在哪里时。从第一个点到第二个点可以看到一条线/步道。
我可以使用 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;
我该怎么做才能使长度在各个方向都有效?
最佳答案
您想要在两个 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
关于javascript - 在两个 3D 点之间对齐 BoxGeometry,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42075007/