将对象定位在同一高度

Positioning Objects at the same Elevation

我对立方体在我的应用程序中的位置有疑问。当我将它们全部设置为相同大小时,它们会在我定义的相同 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

我对下一个立方体做同样的事情,只是改变 XZ 的位置。 但是,当我创建不同大小的立方体时,也就是我的objective,如下,

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

它们在浏览器的最终可视化中出现在不同的层次上,如图所示:

https://cloud.githubusercontent.com/assets/3678443/8651664/35574c18-2972-11e5-8c75-2612733ea595.png

关于如何解决这个问题有什么想法吗?我做错了什么?

对象的位置是正确的,它们被放置在它们的中心所在的位置。所以你的立方体几何高度 100 延伸 50 到顶部,50 延伸到底部,它的质心就在它的 "middle" 处 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