How can I create a bounding box for a group in Three.js?

Is there a way to calculate the bounding box dimensions of grouped objects in three.js? I have a collection of objects that are grouped together as a single unit in three.js. I am looking for a method to determine the height and width of these groups, so I attempted to use Box3 to calculate their dimensions. How can I retrieve the height and width of a group of objects in three.js?

var geometry = new THREE.BoxBufferGeometry( 1, 1, 1 );
var material = new THREE.MeshBasicMaterial( {color: 0x00ff00} );

var cubeA = new THREE.Mesh( geometry, material );
cubeA.position.set( 100, 100, 0 );

var cubeB = new THREE.Mesh( geometry, material );
cubeB.position.set( -100, -100, 0 );

//create a group and add the two cubes
//These cubes can now be rotated / scaled etc as a group
var group = new THREE.Group();
group.add( cubeA );
group.add( cubeB );

scene.add( group );

Answer №1

To calculate the AABB for a collection of objects, utilize Box3.setFromObject() method. Example implementation:

const boundingBox = new THREE.Box3();
boundingBox.setFromObject( objectGroup );

three.js R118

Answer №2

When working with a Group in Three.js, you can utilize the .setFromObject method from Box3 to get the size of the bounding box:

let bb = new THREE.Box3().setFromObject(group);
let size = bb.getSize(new THREE.Vector3());

This approach allows you to easily determine the dimensions of the Group's bounding box.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What are the steps to make standard calls from the main controller?

My website has date selection functionality on all pages, where API data is displayed based on the chosen date. However, I want the selected date to be consistent across all pages. Currently, I am using the code $scope.cb(moment().subtract(29, 'days&a ...

Navigate back to the previous URL and remove any search parameters using React-router-dom V6

After navigating to a page with certain search parameters, I needed to go back to the previous URL and clear the search params. To achieve this, I utilized the useSearchParams function provided by react-router-dom v6. Within the useEffect hook, I implemen ...

Leveraging jQuery to implement onclick functionality within a Jinja2 loop

I'm currently working with Python, Flask, and Jinja2. When using a for loop, I want to be able to click on the {{ place.place_photo }} element to toggle its details. Initially, I had it functioning correctly but ran into an issue where clicking on on ...

Refreshing AngularJS: How to reload Ngtable with previous data

Currently, I am utilizing NGTable to exhibit data on my webpage. The data is stored in an array and passed through the dataset parameter. However, when I dynamically modify a value in the array, the changes are accurately reflected in the table BUT if I na ...

Managing onChange in a ReactJs project

Currently, my React tsx page features input boxes like the following: <textarea value={this.state.myData!.valueOne} onChange={(e) => this.handleValueOneChange(e)}/> <textarea value={this.state.myData!.valueTwo} onChange={(e) => thi ...

Utilizing jQuery/Javascript to replicate the data from a table while excluding the header and then pasting it to the

I am attempting to replicate the data from a table while disregarding the header/title row and copying it to the clipboard in the exact same way as manual selection and copy. I came across a post on how to choose Select a complete table with Javascript (t ...

Experiencing difficulties with executing numerous NodeJs queries

Could someone assist with rendering multiple queries in a Nodejs view? The console shows Promise {pending} and I can't figure out what's causing the issue. I'd appreciate any help or guidance on how to fix this problem. router.get('/ ...

Limiting the x-axis drag function in a grouped bar chart using D3.js

For those interested, here is the link to view the code snippet: http://jsfiddle.net/4tqn7162/1/. When dragging the bars left or right causing the width of svg plot to disappear, I am looking for a solution that can restrict this behavior without impacting ...

Stop objects from exiting the boundaries of the room in three.js

I recently built a virtual room using three.js and populated it with different objects. However, I noticed that some of the objects are moving outside of the room boundaries. If you'd like to take a look at the issue, you can access the running code t ...

I have been unable to find a solution for the non-functioning jQuery (3.4.1 / 3.3.1) load() issue

I have been working with jQuery's .load() function Take a look at my code snippet: <html> <head> <meta charset="utf-8"> <title>load demo</title> <script src="https://code.jquery.com/jquery-3.4.1.js"> ...

Does the user need to download the scripts from Google API multiple times during the insertion process?

Concerned about the potential need for multiple downloads of a script from an unknown location on the user's computer, I would like to explore options to mitigate this issue. Specifically, I am considering creating a condition to check the download st ...

Guide on parsing and totaling a string of numbers separated by commas

I am facing an issue with reading data from a JSON file. Here is the code snippet from my controller: myApp.controller("abcdctrl", ['$scope', 'orderByFilter', '$http', function ($scope, orderBy, $http) { console.log('abc ...

Utilizing multiple physics simulations in Node.js, failing to optimize server efficiency

My multiplayer game worlds are hosted on AWS using Node and are physics-based (using p2.js), with a physics step rate of 200 steps per second. Each game has its own world and needs to step every 5ms. With only 6-8 players in each game, I can currently hos ...

The onEnter and onExit functions within a React Native Component using react-native-router-flux

Within my app's router definitions, I have successfully utilized the onEnter/onExit method at the root level: <Scene key="arena" hideNavBar={true} onEnter={() => console.log("Entered")} component={ArenaPage} /> Is there a way to achieve th ...

Having trouble accessing my API through localhost with NextJS

I'm currently working on an app that involves fetching data from my own API. The goal is to retrieve user-specific information and use it within the app. However, I've encountered a roadblock with CORS headers and I'm unsure of how to procee ...

What are the implications of creating a .Net class within JavaScript code using the Jint engine?

One of the unique features in Jint is the ability to access .Net classes in JS. JS File Code : var write = function (msg) { var log = System.Console.WriteLine; log(msg); }; C# Code Engine jsEngine = new Engine(e=>e.AllowClr()); string scr ...

Retrieve the total count of tables within a specific div element

If I have an unspecified amount of tables within a div, how can I determine the total number of tables using either plain JavaScript or jQuery? ...

Is there a way to swap out multiple characters within a string when using ng-repeat in AngularJS?

How can I replace multiple characters in a string using ng-repeat in AngularJS? I've tried the following code, but it's not working. I need to remove #, _, and . from the strings in my list. How can I achieve this in AngularJS? <body> &l ...

What is the best way to transfer variables and functions between JavaScript and Python seamlessly?

I am in the process of building a website using HTML, CSS, and JavaScript, and I am in need of an AI-powered chatbot. I have a Python file that contains the necessary logic for the chatbot (AI, NLTK). Inside the Python file, there is a function called "res ...

Extracting deleted characters from input in Angular 2

Is there a way to detect a removed character from a text using ngModel in Angular 2? I am looking for something like: Original text: @Hello World ! Modified text: Hello World ! Console.log Removed character: '@' I came across an interesting ...