Is there a method to extract a bounding box from a Object3D in three.js?

Question

Is there a method to extract a bounding box from a Object3D in three.js?

I have successfully loaded an OBJ file with Three.js and OBJLoader.js. The returned object is a Three.Object3D that contains the typical properties of a 3D model (position vector, up vector...)

My current challenge is determining how to obtain a bounding box for this object. Is there a way to achieve this?

javascript three.js

Answer 1

Answer №1

Instead of looping through each child of the object, there is a convenient method in the library that handles this task efficiently: THREE.Box3#setFromObject. You can learn more about it by checking out the documentation here. To illustrate, you can utilize the following code snippet:

var boundingBox = new THREE.Box3().setFromObject(targetObject);

This will give you the accurate bounding box of targetObject, taking into consideration all its children as well as any transformations like translations and rotations.

It's important to note that the BoundingBox helper serves the purpose of visually representing a bounding box within the scene, rather than simply calculating the dimensions of an object's bounding box.

Answer 2

Instead of looping through each child of the object, there is a convenient method in the library that handles this task efficiently: THREE.Box3#setFromObject. You can learn more about it by checking out the documentation here. To illustrate, you can utilize the following code snippet:

var boundingBox = new THREE.Box3().setFromObject(targetObject);

This will give you the accurate bounding box of targetObject, taking into consideration all its children as well as any transformations like translations and rotations.

It's important to note that the BoundingBox helper serves the purpose of visually representing a bounding box within the scene, rather than simply calculating the dimensions of an object's bounding box.

Answer 3

Answer №2

To retrieve the precise position and dimensions of the bounding box as it appears within the scene, consider using the BoundingBoxHelper feature:

var helper = new THREE.BoundingBoxHelper(someObject3D, 0xff0000);
helper.update();
// To display a visible bounding box
scene.add(helper);
// To obtain only the numerical values
console.log(helper.box.min);
console.log(helper.box.max);

The use of .boundingBox on the geometry doesn't incorporate any translations, rotations, or scaling applied to the parent mesh, making manual adjustments challenging. However, employing the helper resolves this issue efficiently.

Answer 4

To retrieve the precise position and dimensions of the bounding box as it appears within the scene, consider using the BoundingBoxHelper feature:

var helper = new THREE.BoundingBoxHelper(someObject3D, 0xff0000);
helper.update();
// To display a visible bounding box
scene.add(helper);
// To obtain only the numerical values
console.log(helper.box.min);
console.log(helper.box.max);

The use of .boundingBox on the geometry doesn't incorporate any translations, rotations, or scaling applied to the parent mesh, making manual adjustments challenging. However, employing the helper resolves this issue efficiently.

Answer 5

Answer №3

Every shape possesses a boundingBox property within its geometry object. This property contains a THREE.Box3 object, which is made up of two THREE.Vector3 objects, namely min and max.

let geometry = new THREE.CylinderGeometry(...);
let material = new THREE.LineBasicMaterial(...);
let mesh = new THREE.Mesh(geometry, material);

let boundingBox = mesh.geometry.boundingBox.clone();
alert('bounding box coordinates: (' + boundingBox.min.x + ', ' + boundingBox.min.y + ', ' + boundingBox.min.z + '), (' + boundingBox.max.x + ', ' + boundingBox.max.y + ', ' + boundingBox.max.z + ')');

When dealing with more intricate shapes, such as those imported from JSON Object files, the bounding box property is not defined by default. It needs to be explicitly calculated.

let loader = new THREE.ObjectLoader();
loader.load(imagePath, function(object) {

    geometry = object.children[0].children[0].geometry;  // Replace this with the path to your geometry

    geometry.computeBoundingBox();  // Otherwise, geometry.boundingBox will remain undefined

    let boundingBox = geometry.boundingBox.clone();
    alert('bounding box coordinates: (' + boundingBox.min.x + ', ' + boundingBox.min.y + ', ' + boundingBox.min.z + '), (' + boundingBox.max.x + ', ' + boundingBox.max.y + ', ' + boundingBox.max.z + ')');
}

Answer 6

Every shape possesses a boundingBox property within its geometry object. This property contains a THREE.Box3 object, which is made up of two THREE.Vector3 objects, namely min and max.

let geometry = new THREE.CylinderGeometry(...);
let material = new THREE.LineBasicMaterial(...);
let mesh = new THREE.Mesh(geometry, material);

let boundingBox = mesh.geometry.boundingBox.clone();
alert('bounding box coordinates: (' + boundingBox.min.x + ', ' + boundingBox.min.y + ', ' + boundingBox.min.z + '), (' + boundingBox.max.x + ', ' + boundingBox.max.y + ', ' + boundingBox.max.z + ')');

When dealing with more intricate shapes, such as those imported from JSON Object files, the bounding box property is not defined by default. It needs to be explicitly calculated.

let loader = new THREE.ObjectLoader();
loader.load(imagePath, function(object) {

    geometry = object.children[0].children[0].geometry;  // Replace this with the path to your geometry

    geometry.computeBoundingBox();  // Otherwise, geometry.boundingBox will remain undefined

    let boundingBox = geometry.boundingBox.clone();
    alert('bounding box coordinates: (' + boundingBox.min.x + ', ' + boundingBox.min.y + ', ' + boundingBox.min.z + '), (' + boundingBox.max.x + ', ' + boundingBox.max.y + ', ' + boundingBox.max.z + ')');
}

Answer 7

Answer №4

Indeed, you would require a code snippet similar to this:

if (object instanceof THREE.Object3D)
{
    object.traverse (function (mesh)
    {
        if (mesh instanceof THREE.Mesh)
        {
            mesh.geometry.computeBoundingBox ();
            var bBox = mesh.geometry.boundingBox;

            // calculate the composite bounding box
            minX = Math.min (minX, bBox.min.x);
            minY = Math.min (minY, bBox.min.y);
            minZ = Math.min (minZ, bBox.min.z);
            maxX = Math.max (maxX, bBox.max.x);
            maxY = Math.max (maxY, bBox.max.y);
            maxZ = Math.max (maxZ, bBox.max.z);
        }
    });

    var bBox_min = new THREE.Vector3 (minX, minY, minZ);
    var bBox_max = new THREE.Vector3 (maxX, maxY, maxZ);
    var bBox_new = new THREE.Box3 (bBox_min, bBox_max);

    scene.add (object);
}

UPDATE:

This approach dates back to a time before the introduction of BoundingBoxHelper() or BoxHelper()

Answer 8

Indeed, you would require a code snippet similar to this:

if (object instanceof THREE.Object3D)
{
    object.traverse (function (mesh)
    {
        if (mesh instanceof THREE.Mesh)
        {
            mesh.geometry.computeBoundingBox ();
            var bBox = mesh.geometry.boundingBox;

            // calculate the composite bounding box
            minX = Math.min (minX, bBox.min.x);
            minY = Math.min (minY, bBox.min.y);
            minZ = Math.min (minZ, bBox.min.z);
            maxX = Math.max (maxX, bBox.max.x);
            maxY = Math.max (maxY, bBox.max.y);
            maxZ = Math.max (maxZ, bBox.max.z);
        }
    });

    var bBox_min = new THREE.Vector3 (minX, minY, minZ);
    var bBox_max = new THREE.Vector3 (maxX, maxY, maxZ);
    var bBox_new = new THREE.Box3 (bBox_min, bBox_max);

    scene.add (object);
}

UPDATE:

This approach dates back to a time before the introduction of BoundingBoxHelper() or BoxHelper()

Is there a method to extract a bounding box from a Object3D in three.js?

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

What is the best way to implement a navbar that automatically scrolls the page when a button is clicked?

The length property of a jQuery array may not always match the actual length of the array

Guide to creating a Discord bot that replies privately to users without other channel members being able to see the messages

Loading jQuery on an ajax request

Effective Strategies for Preventing Javascript Injection Attacks

Confusion about the unwinding of the call stack in the Graph Depth-

Changing the z-index property of a Material-UI <Select> dropdown: What you need to know

The identity becomes blurred once information is transmitted to a modal

Enhancing array elements with style and class attributes in JavaScript

Dealing with invalid JSON in Express: Best Practices

Identifying an Incorrect Function Call in a TypeScript Function from a JavaScript File [TypeScript, Vue.js, JavaScript]

Retrieving information through a jQuery ajax call

Is Webpack bundling the node_modules of node_modules into the bundle?

Unable to assign values to textarea and checkbox in MVC5

In Reactjs, it is important that each child in a list is assigned a distinct "key" prop

Why does the value of my input get erased when I add a new child element?

Frontend is refusing to remove items from the shopping cart, while the backend is functioning properly in doing so

How to properly convert JSON into a string within a nested object

Interacting with three.js using the "requestAnimationFrame" function when clicking

How can we extract validation data from a function using Ajax and then transfer that information to another Ajax query?