Issue with Three.js: Geometry's BoundingBox is incorrect following a scaling operation

I am facing an issue with the bounding box of a cube in my scene. The cube is being manipulated by the user using THREE.TransformControls. After these interactions, I need to calculate the bounding box of the cube.

var test = new THREE.Mesh(new THREE.CubeGeometry(10,10,10), new THREE.MeshBasicMaterial());
scene.add(test);

test.geometry.computeBoundingBox();
var bb = test.geometry.boundingBox;
bb.translate(test.localToWorld( new THREE.Vector3()));

However, despite correct translation, the bounding box size remains incorrect. It always shows width and height as 10.

Is this a bug in the code or expected behavior? How can I accurately determine the bounding box of the cube after manipulation?

Answer №1

If you want to find the world-axis-aligned bounding box of an object and all its children, you can use the following code:

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

It's helpful to examine the source code to comprehend the process.

This is applicable for three.js version r.60

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

Is there a way to ensure the functionality of this code without exposing my API keys? I am currently developing an application using Node.js, Angular, and Express

I have come across an issue with my code where process.env is not working within a specific function. I need to find a way to call process.env without displaying my keys. If I don't add my keys, the API call won't function properly. What options ...

Issue encountered in transmitting information from JSP to servlet

I am facing an issue with receiving data from JSP to servlet. I understand that I need to serialize this data using JSON. In my JSP, I have written the following JavaScript code: var myJSONText = JSON.stringify(items); document.getElementById('test&a ...

Is there a more efficient method for streamlining the Express-Validator middleware in a separate file

In my current project, there is a lot of validation required using Express-Validator. In each file, I find myself repeating the same validation code: //Validation and Sanitizing Rules const validationRules = [ param('tab').isString().isLength({ ...

Rearrange div elements dynamically with JavaScript

I need help with reordering the div elements using JavaScript. Is this the correct approach? <div id="pageWrapper"> <div id="one">1</div> <div id="two">2</div> <div id="three">3</div> <div id= ...

<Select> Placeholder customization

For my react project, I am utilizing material-Ui and I am looking to have a placeholder that stands out by having grey text instead of black when compared to the selected item. <Select name="answer" value={values.answer} onChange={handleChange} onBlur= ...

Exploring the process of transferring a variable from Frontend to Backend via a GET API in ReactJS with an Express API

When working with my freight Shipment table, I need to access the email of the logged-in user in order to perform some frontend tasks. However, I am struggling to retrieve this information using the Axios.get() method and use it to query my MySQL DB. In t ...

Converting an audio buffer to MP3 using Javascript: A step-by-step guide

In my ReactJS project, I am using MediaRecorder to capture audio from the microphone and storing it as a blob with the MIME type "audio/mp3". However, I need to convert this blob into an MP3 file and upload it to an S3 bucket. Currently, I have been able ...

Acquire a portion of a string with JavaScript or jQuery

Given the string testserver\sho007, how can I utilize jQuery to extract only the value sho007? ...

Tips for successfully parsing JSON data during an Ajax call

After making an Ajax call, the response.responseText I receive looks like this: . "[ columns :[ { "id":"name", "header":"User name" }, { "id":"birth", "header":"Date of birth" } ], ...

JavaScript function to toggle visibility and scroll back to top of the page

I have been an avid reader on this platform, and I am hoping that my question has not already been addressed. I am struggling to find a solution to a problem I am facing. There are two DIVs in my code that I toggle between showing and hiding using Javascr ...

When running npm install -g, the package is being installed into a global directory on

For a considerable amount of time, I have been working with node and npm. Now, as I embark on a more extensive project using these tools, I've encountered an issue. Whenever I execute 'sudo npm install -g', the installation is directed to &a ...

What is the best method to retrieve the following element in jQuery?

My goal with jQuery is to create a functionality where clicking a button will clone the next element each time, creating a sequential pattern of cloning. For example, when I click the button for the first time it should clone "2", then if clicked again it ...

Ways to choose a designated element without relying on ids or classes

I am looking to create an on-click function for each button, so I require a method to select each one individually without relying on IDs <div class="col"> <div> <b>Name:</b> <span ...

Dynamically taking input in Vue JS while using v-for loop

Hey there! I'm trying to get input in this specific manner: itemPrices: [{regionId: "A", price: "200"},{regionId: "B", price: "100"}] Whenever the user clicks on the add button, new input fields should be added ...

Unable to establish connection with remote database server on Hostinger platform

I've been encountering this persistent error that I can't seem to resolve. I developed my project locally, utilizing a local database. Upon completion, I attempted to manually migrate my database to my hosting provider since it's relatively ...

Interactive JavaScript function designed to react to user commands

Struggling to develop a JavaScript/AngularJS function that notifies the user whether a entered number is too high or low (> 100 indicates it's too high)? Check out the HTML code below: <div> <p id="num">Number : <input type="nu ...

Error in Angular 2: The requested URL https://imgur-apiv3.p.mashape.com/ cannot be loaded. The use of a wildcard '*' is not allowed in the 'Access-Control-Allow-Origin' header

I'm attempting to upload an image using the imgur API at: . However, I keep encountering this error: XMLHttpRequest cannot load . A wildcard '*' cannot be used in the 'Access-Control-Allow-Origin' header when the credential ...

Align the reposition button with the pagination in the datatables

I am looking to adjust the placement of my buttons. The buttons in question are for comparison, saving layout, and printing. I would like them to be inline with the pagination, as I am using datatables here. <table id="sparepart_id" cellspacing="0" ...

Recording the $index value of dynamically included inputs

Check out my Plunker demo: http://plnkr.co/edit/sm3r4waKZkhd6Wvh0JdB?p=preview I have a dynamic set of form elements that users can add and remove. I am looking to include an 'id' property for each object in the form elements, corresponding to ...

Sort through data based on specific data fields upon the button click event using JSON and Vue.js

Is there a way to use JSON files in Vue.js to filter data based on category when a button is pressed? I have objects with categories inside the data. portfolio-v1.json { "data":[ { "image_path":"static/products/DEL ...