Three.js 将对象定位在同一高程

我的应用程序中立方体的位置有问题。当我将它们设置为相同的大小时，它们将在我定义的相同的

Y

位置正确渲染： 例如：

geometry = new THREE.BoxGeometry(50, 50, 50);
material = new THREE.MeshBasicMaterial({ color: 0xff0000 })
mesh = new THREE.Mesh(geometry, material);
mesh.position.set(100, 0, 400); // I always set y as 0 because I want the cubes to be on the same level like buildings in a city

我对下一个立方体也做了同样的操作，只改变了

X

和

Z

的位置。 但是，当我创建不同大小的立方体时，这是我的目标，如下所示

geometry = new THREE.BoxGeometry(50, 100, 50);

它们在浏览器的最终可视化中显示在不同的级别上，如图所示：

---

有什么办法解决这个问题吗？我做错了什么？

对象的位置是正确的，它们被放置在中心位置。因此，几何体高度为

100

的立方体向上延伸

50

，向下延伸

50

，其质心正好位于

0

处的“中间”

---

您可以将多维数据集的y位置设置为

y+cube.geometry.parameters.height/2

，以便每个多维数据集在一个级别（变量y）对齐。

BoxGeometry

以原点为中心。有两种方法可以转换长方体，使其位于XZ平面上

选项1。平移几何体，使长方体的底面穿过原点。可以通过将几何体向上平移一半高度来实现此目的

geometry = new THREE.BoxGeometry( 50, 50, 50 );

geometry.translate( 0, 50 / 2, 0 );

mesh = new THREE.Mesh( geometry, material );
mesh.position.set( 100, 0, 400 );

选项2。通过设置网格的位置来平移网格

geometry = new THREE.BoxGeometry( 50, 50, 50 );

mesh = new THREE.Mesh( geometry, material );
mesh.position.set( 100, 50 / 2, 400 );

第一个选项可能更适合您的用例

---

three.js r.92

谢谢，它运行得很好。福尔克·蒂勒的解决方案也奏效了，但这似乎更为实际可以对所有网格使用一个几何体<代码>几何体=新的三盒几何体（1,1,1）；几何.applyMatrix（…）然后使用

网格缩放设置（a、b、c）设置每个网格大小