What is the best way to find the dimensions of an unrotated Object3D?

Question

What is the best way to find the dimensions of an unrotated Object3D?

To calculate the height of an Object3D, I use the following method:

let obj = ... ; // An instance of Object3D, such as Mesh or Group
let boundingBox = new THREE.Box3().setFromObject(obj);
let height = Math.abs(boundingBox.min.y - boundingBox.max.y);

However, when the obj is rotated on the X and/or Z axis, the difference between boundingBox.min.y and boundingBox.max.y changes, leading to a different height compared to when it's not rotated.

I aim to determine the height of obj as if there was no rotation involved. How can I achieve this?

My assumption is that I must adjust the dimensions of boundingBox based on the rotation angles, but I'm uncertain about the exact process.

Before Rotation:

After Rotation:

(red = obj, blue = boundingBox)

javascript three.js rotation

Answer 1

Answer №1

When using THREE.Box3().setFromObject(obj)

, you will receive the "world-axis-aligned bounding box" of the object, which computes the world-coordinates including rotation, position, and scale of the object along with its parents for all vertices.

If you are interested in obtaining the bounding-box of the geometry without considering the object's position, rotation, and scale, simply utilize obj.geometry.boundingBox after executing computeBoundingBox():


obj.geometry.computeBoundingBox(); 
let boundingBox = obj.geometry.boundingBox;

To calculate an aggregated bounding box for object hierarchies, you can employ the following method:


function getCombinedBoundingBox(object) {
  const result = new THREE.Box();
  object.traverse(child => {
    // exclude elements without geometry
    if (!child.geometry) { return; }

    child.geometry.computeBoundingBox();
    result.union(child.geometry.boundingBox);
  });

  return result;
}

Keep in mind that this approach only functions properly when the child-objects have not been transformed in any way.

Answer 2

When using THREE.Box3().setFromObject(obj)

, you will receive the "world-axis-aligned bounding box" of the object, which computes the world-coordinates including rotation, position, and scale of the object along with its parents for all vertices.

If you are interested in obtaining the bounding-box of the geometry without considering the object's position, rotation, and scale, simply utilize obj.geometry.boundingBox after executing computeBoundingBox():


obj.geometry.computeBoundingBox(); 
let boundingBox = obj.geometry.boundingBox;

To calculate an aggregated bounding box for object hierarchies, you can employ the following method:


function getCombinedBoundingBox(object) {
  const result = new THREE.Box();
  object.traverse(child => {
    // exclude elements without geometry
    if (!child.geometry) { return; }

    child.geometry.computeBoundingBox();
    result.union(child.geometry.boundingBox);
  });

  return result;
}

Keep in mind that this approach only functions properly when the child-objects have not been transformed in any way.

What is the best way to find the dimensions of an unrotated Object3D?

Answer №1

Similar questions

Retrieve all populated fields on the second tier using Node.js and Mongoose

What is the best way to ensure that jQuery AJAX calls are executed in a specific

What is the technique to make a *ngFor render items in a random order?

How to create a custom hover effect for IconButtons in Material-UI

Is there a way to repurpose a function to work with both ids and classes?

Achieve accurate mouseover interaction in a ThreeJS VueJS application by dynamically altering the viewport

Attempting to retrieve all elements... held within a parent object in JavaScript

The argument type does not match the parameter type partial<>

A proven method for distinguishing between desktop and mobile browsers

Is Angular Module Lazy Loading functioning properly in Chrome?

Insert the ng-if directive into an element using a directive

I am having trouble getting my website to work offline using caching

Experiencing issues with Panolens.js failing to load images

Exploring the inner workings of this JavaScript jQuery function within a snippet of code

The reduce function is displaying an undefined result

Changing the state within a slice by utilizing an object as the payload

Including Fullcalendar functionality on a Wordpress site

How to Exclude Box Geometry from Merged Geometry in THREE JS

Is it possible for me to input text into html while the page is loading?

Understanding Express.js API Function Parameters