Question

我的应用程序中的多维数据集位置存在问题。当我将它们全部设置为相同大小时，它们会在我定义的相同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);

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

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

有关如何解决此问题的任何想法？我做错了什么？

Answer 1

物体的位置是正确的，它们被放置在它们的中心位置。因此，几何体中100高度的多维数据集将50扩展到顶部，将50扩展到底部，其质心位于0的“中间”。

您可以将多维数据集的y位置设置为y + cube.geometry.parameters.height / 2，以便每个多维数据集在一个级别（变量y）对齐。

Answer 2

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

将对象定位在同一高程

2 个答案: