Is there a way to calculate the bounding box of an object using Three.js?

function loadModel(){
    switchCamera("orthographic");
    var modelLoader = new THREE.JSONLoader();
    modelLoader.load("models/sphere.json", callBack);

}

function callBack(object3D_geometry){ 
    var material = new THREE.MeshLambertMaterial( { color:0x000000 } );
    var model = new THREE.Mesh( object3D_geometry, material);
    scene.add(model);

    console.log(object3D_geometry);
    //console.log(object3D_geometry.boundingBox); 
    //model.geometry.computeBoundingBox;
    modelBoundingBox = model.geometry.boundingBox;

    console.log("model Bounding box");
    console.log(modelBoundingBox);

    renderer.render( scene, camera );   

}

I'm currently working on calculating bounding boxes for 3D JSON models. At this moment, I'm only using a simple sphere as an example. However, when attempting to retrieve the bounding box, it returns null. How can I properly obtain the bounding box so that it accurately encompasses the entire model, even when loading more complex structures?

Answer №1

Here is a method I created to determine the maximum and minimum values for XYZ coordinates. I will be using this approach for now, but it would be really helpful if someone could explain why the boundingBox feature is not functioning properly.

function calculate_XYZ_Max_Min(modelVertices){
    var min_X = modelVertices[0].x;
    var max_X = modelVertices[0].x;
    var min_Y = modelVertices[0].y;
    var max_Y = modelVertices[0].y;
    var min_Z = modelVertices[0].z;
    var max_Z = modelVertices[0].z;


    for (var i=1; i < modelVertices.length; i++){

        if (modelVertices[i].x > max_X)     max_X = modelVertices[i].x;
        if (modelVertices[i].x < min_X)     min_X = modelVertices[i].x;
        if (modelVertices[i].y > max_Y)     max_Y = modelVertices[i].y;
        if (modelVertices[i].y < min_Y)     min_Y = modelVertices[i].y;
        if (modelVertices[i].z > max_Z)     max_Z = modelVertices[i].z;
        if (modelVertices[i].z < min_Z)     min_Z = modelVertices[i].z;
    }

    return{
        xMin: Math.floor(min_X),
        xMax: Math.ceil(max_X), 
        yMin: Math.floor(min_Y),
        yMax: Math.ceil(max_Y),
        zMin: Math.floor(min_Z),
        zMax: Math.ceil(max_Z)
    };
}

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

Tips for transforming C#.NET code into JavaScript code

A few years back (around 3 or 4 years ago), I recall hearing about a fascinating concept that involved generating client-side JavaScript code from C#.NET source code. It may have been related to validation tasks specifically... Does anyone have more inform ...

Having trouble uploading several files with Multer functionality?

I've encountered an issue with Multer in Node.js where I can't seem to select and upload multiple files. In a previous exercise, I had no trouble uploading a single file, but now I'm struggling with enabling multiple uploads. What am I mis ...

Trackball's controls are not responding correctly

Recently, I have been using trackball controls and I've come across a strange bug. When I pan and then zoom out from my new position, the controls start to behave erratically, pulling towards the origin (the further I pan, the worse the issue becomes) ...

design facebook type box scroll bar

After extensively searching through various stackoverflow answers in an attempt to change the CSS for a Facebook likebox scrollbar, I have had no success. Below is the code that I am currently using: <div id="fb-root"></div> <script>(fun ...

Issue with fixed sidebar on brief content

It's interesting how the sticky widget performs differently on long articles compared to short ones on my website. Here is an example of a long article where the sticky widget works well without any lag: . Now, let's take a look at a shorter art ...

The data retrieved from the $.ajax() request in Vue.js is not properly syncing with the table

After setting up an $.ajax() function and ensuring the data binding is correctly configured, I expected the data to append to a table on page load without any issues. However, the data is not appearing as expected. Is there something that I might be overlo ...

Closing the Angularstrap dropdown when clicking elsewhere

Is there a method to close an angularstrap dropdown only when clicking outside of it? The current behavior is that it closes when you click inside the dropdown. Thank you ...

No values are being assigned to the array elements in the Node.js application

I've been struggling with an issue in my Express project for a day now. I can't seem to push some data into an array element. Let me walk you through my code and the data involved. Here is the result data retrieved from MongoDB: result = { n ...

Is there a way to incorporate a Django template variable as a parameter in order to invoke a JavaScript function?

1. Here is an example of HTML code where I am calling the javascript function changeButton: <a href="#" class="btn btn-primary btn-sm" onclick="changeButton( "{{ request.session.variable }}" );return false;">Button</a> 2. This is the JavaScr ...

Ways to incorporate JSON web token into every query string of my requests

Just recently, I grasped the concept of using JSON web tokens. Successfully, I can generate a JSON web token upon sign-in and have also established the middleware to authenticate my token and secure the routes that fall under the JSON verification middlewa ...

Leveraging the power of Framer Motion in combination with Typescript

While utilizing Framer Motion with TypeScript, I found myself pondering if there is a method to ensure that variants are typesafe for improved autocomplete and reduced mistakes. Additionally, I was exploring the custom prop for handling custom data and des ...

Using JQuery to encapsulate the contents of a variable

I am working with a variable that stores HTML retrieved from an HTML5 SQL database. When I use the .append() method to add it to a DOM element, everything works as expected. However, I want to wrap the HTML contents before appending them, so I tried using ...

Angular JS Retrieving Data in the Background with the Assistance of $timeout or $interval Service

Looking to fetch data from a webapi in the background using either the $timeout or $interval service in Angular JS. I have some concerns about how the $timeout and $interval services work. I've run into issues when incorporating these services into m ...

After invoking call(), the object becomes 'this' on a worldwide scope

I have a list containing the names of different methods. var methodList = ['method1', 'method2', 'method3', 'method4']; I dynamically select a method based on certain criteria. These methods are part of a larger cl ...

The ng-show and ng-hide directives are not working as expected, and there are no error

I'm currently working on a Todo App using AngularJS 1.x (version 1.6), but I'm having issues with ng-show and ng-hide functionality. The aim is to have a text box appear in the todo section when the edit button is clicked to modify existing todos ...

A captivating opportunity for a web developer specializing in frontend design

Encountered an intriguing dilemma that has me stumped. There is a single stipulation: Only the json can be altered! I am struggling to meet this requirement: data.hasOwnProperty("\u{0030}") class JobHunter { get data() { return &ap ...

Troubleshooting Problem with Parsing Float in Angular

Currently, I am facing an issue while using a filter to calculate totals from dynamic data in ng-repeat. The problem lies in my inability to limit the decimals to 2 places. Below is the code snippet of my filter: app.filter('sumByKey', function( ...

What steps can be taken to resolve the issue of Ajax not retrieving any data from

I'm struggling to identify the error in this code. I have created a search bar and implemented AJAX to automatically fetch data. Here is the HTML file: <!DOCTYPE html> <html> <head> <title></title> <script ...

Efficiently process 100 tasks per minute using a microservice architecture

I have a node.js application that needs to perform the following tasks: Retrieve zip files, extract them (containing JS module files with key-value pairs - usually 5-8 files per request) Analyze these files, create new ones from the analysis, and ...

React - Received an unexpected string containing a template expression with no curly braces present in the string

Currently, I am enrolled in a React tutorial online. I have inputted the code exactly as it was shown on the screen. Strangely, it seems to be working perfectly fine in the video but not when I try it myself. Below is the code snippet: <Link to={&apos ...