如何在 ThreeJS 中获取边界框的角点?
How to get Corners of Bounding Box in ThreeJS?
我创建了 Object3D 并在其中添加了四个立方体几何体,计算了包含四个立方体对象的 Object3D 的边界框,并使用 BoxHelper 查看边界框是否正常工作。现在我想要边界框的所有角点(即 XYZ,角点坐标)。
基本上,我试图实现爆炸和内爆效果,其中我的四个立方体从边界框中心的初始位置到达边界框的四个角。
var objectContainer = new THREE.Object3D();
scene.add(objectContainer);
var objectAGeom = new THREE.BoxGeometry(1,1,1);
objectAMesh = new THREE.Mesh(objectAGeom, objectAMaterial);
scene.add(objectAMesh);
objectContainer.add(objectAMesh);
var objectBGeom = new THREE.BoxGeometry(1,1,1);
var objectBMesh = new THREE.Mesh(objectBGeom, objectBMaterial);
scene.add(objectBMesh);
objectContainer.add(objectBMesh);
var objectCGeom = new THREE.BoxGeometry(1,1,1);
var objectCMesh = new THREE.Mesh(objectCGeom, objectCMaterial);
scene.add(objectCMesh);
objectContainer.add(objectCMesh);
var objectDGeom = new THREE.BoxGeometry(1,1,1);
var objectDMesh = new THREE.Mesh(objectDGeom, objectDMaterial);
scene.add(objectDMesh);
objectContainer.add(objectDMesh);`
helper = new THREE.BoxHelper(objectContainer);
helper.material.color.set(0xbbddff);
scene.add(helper);
boundingBox = new THREE.Box3();
boundingBox.setFromObject(objectContainer);`
对于初学者来说,将网格添加到场景,然后立即将其添加到 Object3D
会使第一个命令无用,因为网格一次只能有一个父项。
scene.add(objectAMesh); // This does nothing...
objectContainer.add(objectAMesh); // Because you're immediately adding it here
ObjectContainer 已经在场景中,因此您不需要通过两种不同的方式将 Meshes 添加到场景中。
其次,您需要使用 THREE.Box3
来获取您已经在做的边界框。这会给你 the .min
and .max
values of the BoundingBox。您可以使用它来推断所有 8 个角:
boundingBox = new THREE.Box3();
boundingBox.setFromObject(objectContainer);
const low = boundingBox.min;
const high = boundingBox.max;
const corner1 = new THREE.Vector3(low.x, low.y, low.z);
const corner2 = new THREE.Vector3(high.x, low.y, low.z);
const corner3 = new THREE.Vector3(low.x, high.y, low.z);
const corner4 = new THREE.Vector3(low.x, low.y, high.z);
const corner5 = new THREE.Vector3(high.x, high.y, low.z);
const corner6 = new THREE.Vector3(high.x, low.y, high.z);
const corner7 = new THREE.Vector3(low.x, high.y, high.z);
const corner8 = new THREE.Vector3(high.x, high.y, high.z);
我创建了 Object3D 并在其中添加了四个立方体几何体,计算了包含四个立方体对象的 Object3D 的边界框,并使用 BoxHelper 查看边界框是否正常工作。现在我想要边界框的所有角点(即 XYZ,角点坐标)。
基本上,我试图实现爆炸和内爆效果,其中我的四个立方体从边界框中心的初始位置到达边界框的四个角。
var objectContainer = new THREE.Object3D();
scene.add(objectContainer);
var objectAGeom = new THREE.BoxGeometry(1,1,1);
objectAMesh = new THREE.Mesh(objectAGeom, objectAMaterial);
scene.add(objectAMesh);
objectContainer.add(objectAMesh);
var objectBGeom = new THREE.BoxGeometry(1,1,1);
var objectBMesh = new THREE.Mesh(objectBGeom, objectBMaterial);
scene.add(objectBMesh);
objectContainer.add(objectBMesh);
var objectCGeom = new THREE.BoxGeometry(1,1,1);
var objectCMesh = new THREE.Mesh(objectCGeom, objectCMaterial);
scene.add(objectCMesh);
objectContainer.add(objectCMesh);
var objectDGeom = new THREE.BoxGeometry(1,1,1);
var objectDMesh = new THREE.Mesh(objectDGeom, objectDMaterial);
scene.add(objectDMesh);
objectContainer.add(objectDMesh);`
helper = new THREE.BoxHelper(objectContainer);
helper.material.color.set(0xbbddff);
scene.add(helper);
boundingBox = new THREE.Box3();
boundingBox.setFromObject(objectContainer);`
对于初学者来说,将网格添加到场景,然后立即将其添加到 Object3D
会使第一个命令无用,因为网格一次只能有一个父项。
scene.add(objectAMesh); // This does nothing...
objectContainer.add(objectAMesh); // Because you're immediately adding it here
ObjectContainer 已经在场景中,因此您不需要通过两种不同的方式将 Meshes 添加到场景中。
其次,您需要使用 THREE.Box3
来获取您已经在做的边界框。这会给你 the .min
and .max
values of the BoundingBox。您可以使用它来推断所有 8 个角:
boundingBox = new THREE.Box3();
boundingBox.setFromObject(objectContainer);
const low = boundingBox.min;
const high = boundingBox.max;
const corner1 = new THREE.Vector3(low.x, low.y, low.z);
const corner2 = new THREE.Vector3(high.x, low.y, low.z);
const corner3 = new THREE.Vector3(low.x, high.y, low.z);
const corner4 = new THREE.Vector3(low.x, low.y, high.z);
const corner5 = new THREE.Vector3(high.x, high.y, low.z);
const corner6 = new THREE.Vector3(high.x, low.y, high.z);
const corner7 = new THREE.Vector3(low.x, high.y, high.z);
const corner8 = new THREE.Vector3(high.x, high.y, high.z);