Is there a way to retrieve the size of a three.js group element?

Question

Is there a way to retrieve the size of a three.js group element?

Obtaining the dimensions of a mesh (Three.Mesh) can be done using the following code:

mymesh.geometry.computeBoundingBox()
var bbox = mymesh.geometry.boundingBox;
var bboxWidth = bbox.max.x - bbox.min.x;
var bboxHeight = bbox.max.y - bbox.min.y;
var bboxDepth = bbox.max.z - bbox.min.z;

However, when dealing with a group that contains multiple meshes:

var mygroup = new THREE.Group();

it seems like there is no computeBoundingBox()/boundingBox property available. Is there an alternative method to achieve this for groups?

javascript three.js

Answer 1

Answer №1

Special thanks to a helpful commenter who provided the simple solution:

let box = new THREE.Box3().setFromObject(theGroup);
const size = new Vector3();
bbox.getSize(size);

let sizeX = size.x;
let sizeY = size.y;
let sizeZ = size.z;

Keep in mind that for a tilted planeGeometry, the dimensions may not reflect the actual length and width of the object edges.

Answer 2

Special thanks to a helpful commenter who provided the simple solution:

let box = new THREE.Box3().setFromObject(theGroup);
const size = new Vector3();
bbox.getSize(size);

let sizeX = size.x;
let sizeY = size.y;
let sizeZ = size.z;

Keep in mind that for a tilted planeGeometry, the dimensions may not reflect the actual length and width of the object edges.

Is there a way to retrieve the size of a three.js group element?

Answer №1

Similar questions

Setting up webpack for React to utilize multiple entry points and outputs

What is the process of dynamically creating a Javascript object?

Initiate a CSS animation only when a different animation has completed

Troubleshooting problem with Z-Index conflict in Flash animation

AngularJS Partial Views: Enhancing Your Website's User Experience

How to properly align TableHeader and TableBody contents in a Material-UI table

What is the solution for addressing the absence of an 'Access-Control-Allow-Origin' header in the requested resource while using axios?

Displaying tooltips dynamically for newly added elements all sharing a common class in React

Having Trouble with Angular 6 Subject Subscription

Is there a way for me to retrieve the value from an input, round it up to the nearest even number, and assign it to a new variable?

The functionalities of $scope and this in AngularJS

What is the best way to create three buttons for selecting various parameters?

Discover the Practical Utility of Maps beyond Hash Tables in Everyday Life

choose a value from a dropdown menu to reset other dropdowns to their default values

Retrieve items from the parent row of selected checkboxes

Tips for avoiding the need to reload a single page application when selecting items in the navigation bar

Leveraging the power of jQuery and vanilla JavaScript to create a pop-up print window for a Div element within a CMS platform that does not support media query stylesheets

Add a click event listener to the body element using a button click, without causing it to trigger

Utilize AJAX to accurately capture and handle error codes

Navigation bar options across various web pages