【问题标题】:How to get Corners of Bounding Box in ThreeJS?如何在 ThreeJS 中获取边界框的角?
【发布时间】:2022-01-26 03:43:02
【问题描述】:

我已经创建了 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);`

【问题讨论】:

    标签: three.js bounding-box tweenjs


    【解决方案1】:

    对于初学者,将网格添加到场景中,然后立即将其添加到 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);
    

    【讨论】:

    • 谢谢你,@marquizzo 这绝对有助于我尝试不同的方法,但没有任何效果非常感谢你
    猜你喜欢
    • 2019-05-11
    • 1970-01-01
    • 2021-04-22
    • 2021-04-04
    • 1970-01-01
    • 1970-01-01
    • 2013-09-17
    • 1970-01-01
    • 2016-06-10
    相关资源
    最近更新 更多