setFromObject(mesh) returns 错误的值,有时
setFromObject(mesh) returns wrong values, sometimes
THREE.Box3.setFromObject(*object*)
returns 错误的值。向您展示的最佳方式是向您展示我是如何完成它的:
我从顶点创建了 2 个网格。第一个带有 triangle()
函数,另一个带有 trapezoidForm()
.
var triangle = function (base, height) {
return [
new THREE.Vector2(0, -height / 2),
new THREE.Vector2(-base / 2, height / 2),
new THREE.Vector2(base / 2, height / 2)
];
}
var trapezoidForm = function (base, upperBase, height) {
return [
new THREE.Vector2(-base / 2, height / 2),
new THREE.Vector2(-upperBase / 2, -height / 2),
new THREE.Vector2(upperBase / 2, -height / 2),
new THREE.Vector2(base / 2, height / 2),
];
}
我使用 returned 值创建我的网格:
var material = new THREE.MeshPhongMaterial({ color: 0x666666, /*specular: 0x101010*//*, shininess: 200*/ });
var shape = new THREE.Shape(vertices);
var mesh = new THREE.Mesh(new THREE.ShapeGeometry(shape), material);
并用它把它放在场景中,并创建一个边界框:
mesh.position.set(posX, 0, posZ);
mesh.rotation.set(-Math.PI / 2, 0, 0);
boundingBox.setFromObject(mesh);
现在,我想找到我的 2 个形状的中心。很简单:我采用边界框并计算它。像这样:
var centerX = (boundingBox.max.x + boundingBox.min.x) * 0.5;
var centerZ = (boundingBox.max.z + boundingBox.min.z) * 0.5;
这是错误的地方:对于三角形,它计算出正确的点,但对于梯形,它就搞砸了。
下面是控制台的打印屏幕。前 3 个顶点用于三角形,然后是边界框。接下来的 4 个用于梯形,再次带有边界框。对于顶点:第一个数字是 X 坐标,第二个是 Z 坐标。
期望的结果:第二个边界框应该return类似于:
max: X: 200
Z: 200
min: X: -200
Z: -100
显示当前状态的图像(三角形中间有减号,梯形没有):
最后自己找到解决方案:
我必须在重新定位或旋转之前创建我的 boundingBox:
//Boundingbox
boundingBox.setFromObject(mesh);
mesh.position.set(posX, 0, posZ);
mesh.rotation.set(-Math.PI / 2, 0, 0);
而不是:
mesh.position.set(posX, 0, posZ);
mesh.rotation.set(-Math.PI / 2, 0, 0);
//Boundingbox
boundingBox.setFromObject(mesh);
三角形之所以没有出现问题,是因为它是在 0,0 上渲染的。
THREE.Box3.setFromObject(*object*)
returns 错误的值。向您展示的最佳方式是向您展示我是如何完成它的:
我从顶点创建了 2 个网格。第一个带有 triangle()
函数,另一个带有 trapezoidForm()
.
var triangle = function (base, height) {
return [
new THREE.Vector2(0, -height / 2),
new THREE.Vector2(-base / 2, height / 2),
new THREE.Vector2(base / 2, height / 2)
];
}
var trapezoidForm = function (base, upperBase, height) {
return [
new THREE.Vector2(-base / 2, height / 2),
new THREE.Vector2(-upperBase / 2, -height / 2),
new THREE.Vector2(upperBase / 2, -height / 2),
new THREE.Vector2(base / 2, height / 2),
];
}
我使用 returned 值创建我的网格:
var material = new THREE.MeshPhongMaterial({ color: 0x666666, /*specular: 0x101010*//*, shininess: 200*/ });
var shape = new THREE.Shape(vertices);
var mesh = new THREE.Mesh(new THREE.ShapeGeometry(shape), material);
并用它把它放在场景中,并创建一个边界框:
mesh.position.set(posX, 0, posZ);
mesh.rotation.set(-Math.PI / 2, 0, 0);
boundingBox.setFromObject(mesh);
现在,我想找到我的 2 个形状的中心。很简单:我采用边界框并计算它。像这样:
var centerX = (boundingBox.max.x + boundingBox.min.x) * 0.5;
var centerZ = (boundingBox.max.z + boundingBox.min.z) * 0.5;
这是错误的地方:对于三角形,它计算出正确的点,但对于梯形,它就搞砸了。
下面是控制台的打印屏幕。前 3 个顶点用于三角形,然后是边界框。接下来的 4 个用于梯形,再次带有边界框。对于顶点:第一个数字是 X 坐标,第二个是 Z 坐标。
期望的结果:第二个边界框应该return类似于:
max: X: 200
Z: 200
min: X: -200
Z: -100
显示当前状态的图像(三角形中间有减号,梯形没有):
最后自己找到解决方案:
我必须在重新定位或旋转之前创建我的 boundingBox:
//Boundingbox
boundingBox.setFromObject(mesh);
mesh.position.set(posX, 0, posZ);
mesh.rotation.set(-Math.PI / 2, 0, 0);
而不是:
mesh.position.set(posX, 0, posZ);
mesh.rotation.set(-Math.PI / 2, 0, 0);
//Boundingbox
boundingBox.setFromObject(mesh);
三角形之所以没有出现问题,是因为它是在 0,0 上渲染的。