Ensure you always achieve Infinity by accurately calculating the bounding box of objects in A-Frame

When using three.js in my A-Frame scene, I am trying to obtain the bounding box of objects.

let boundingBox = new THREE.Box3().setFromObject(element.object3D);

However, the 6 values in the boundingBox always default to Infinity or -Infinity as stated in Three.Box3.

I have attempted this with a simple a-box in the A-Frame basic example and my own gltf 2.0 model.

Explore my project here:

If anyone knows the reason behind this or other methods to obtain bounding box in A-Frame, I would greatly appreciate your help.

Thank you for any assistance provided.

javascriptthree.jsaframe

Answer №1

Prior to the loading of the actual model, it seems that you are already calculating the bounding box. To rectify this issue, consider following this approach:

leftDoor.addEventListener( 'model-loaded', () => {

     calculateBoundingBox( leftDoor );

} );

Answer №2

The process of loading the glTF mesh requires some time. Consider utilizing the following approach instead

el.addEventListener('loaded', function() { analyzeModelDimensions(el); } );

function analyzeModelDimensions(el){
  var boundingBox = new THREE.Box3().setFromObject( el.mesh );
  var width = boundingBox.max.x - boundingBox.min.x;
  var height = boundingBox.max.y - boundingBox.min.y;
  var depth = boundingBox.max.z - boundingBox.min.z;
  if (Number.isFinite( height ) ) { 
    // Perform operations based on these values
  } else { 
    window.setTimeout( () => { adjustVertical(el) }, 2000)
    // If necessary, continue trying until successful
  }
}

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 it possible to make changes to local storage data without impacting the rest of the data set?

https://i.sstatic.net/BBcJF.pngI am looking for a way to modify specific data in the local storage without affecting any other stored information. However, I have encountered an issue where editing values works correctly for the first three attempts, but ...

javascripthtmlcss

JavaScript Time and Amount Formatting

My issue involves the formatting of returned data. I am looking to compile all values into a list with adjustments made to the time format and fare amount as indicated. Specifically, I need to remove commas from fare amounts and AM/PM from departure and ar ...

javascriptarraysnode.jsweb-scraping

How to dynamically reduce the number of columns in a textarea using jQuery according to its content

Does anyone know how to make a textarea shrinkwrap the text inside on blur? The default number of columns is 10 or 15 and I want the textarea to adjust its width based on the text content. I have tried the following code: $('textarea').on(&apos ...

javascriptjqueryhtmlcss

The innerHTML feature in Javascript seems to be malfunctioning

Having a simple javascript issue here. I am attempting to retrieve a date from a textbox and display it in a label for another purpose. However, I encountered some problems along the way. I can successfully alert the date retrieved from the textbox, but wh ...

javascripthtmlasp.netvb.net

Activate the toggle menu

Hi there! I'm currently working on a menu and I want the clicked item to become active, switching the active state to another item when clicked. However, my current implementation is not working as expected. Any assistance would be greatly appreciated ...

javascriptjqueryhtmlcsstoggle

Is there a way to remove the old React component when there are two instances of it still active while passing variables?

Recently, I've encountered some unusual behavior with my React component. As a newcomer to React, I have a page where users can configure toast notifications that are displayed. For this functionality, I'm utilizing the react-hot-toast package. U ...

javascriptreactjstypescriptnext.js

Styling in CSS is being applied to a button element within a React component,

Having trouble with a button styled with the className 'actions' The button displays the CSS styling from '.actions', but not '.actions button'. Both should be applied. This code snippet works for all elements ...

javascripthtmlcssreactjs

The conflict between Material UI's CSSBaseline and react-mentions is causing issues

Wondering why the CSSBaseline of Material UI is causing issues with the background color alignment of React-mentions and seeking a solution (https://www.npmjs.com/package/react-mentions) Check out this setup: https://codesandbox.io/s/frosty-wildflower-21w ...

javascripthtmlcssreactjsmaterial-ui

Error: Attempting to access the `isPaused` property of a null object is not possible

For my Vue front-end app, I'm attempting to integrate wavesurfer.js. However, upon receiving the audio file link from the backend, I encounter the following error: wavesurfer.js?8896:5179 Uncaught (in promise) TypeError: Cannot read property 'isP ...

javascriptvue.jswavesurfer.js

The bar graph dataset is not correctly configured when utilizing ng2 charts and ng5-slider within an Angular framework

Currently, I am working with a range slider and bar graph. My goal is to dynamically change the color of the bar graph using the range slider. While I have managed to successfully alter the color of the bars, I am facing an issue where the data displayed ...

javascriptangularchart.jsng2-charts

Is the DOMContentLoaded event connected to the creation of the DOM tree or the rendering tree?

After profiling my app, I noticed that the event is triggered after 1.5 seconds, but the first pixels appear on the screen much later. It seems like the event may only relate to DOM tree construction. However, this tutorial has left me feeling slightly con ...

javascripthtml

Tips for automatically updating the time in a React application while utilizing the 'date-fns' library

I've been working on my personal Portfolio using React and I'm looking to add a feature on the landing page that showcases my local time and timezone to potential recruiters. However, there's a small hiccup in my implementation. The displaye ...

javascriptreactjsdate-fns

Ways to use string functions in JavaScript to substitute with /

Here is the image path I am working with: var str = "D:\Poc\testProject\DataPush\public\unzip\cust\AccountData\2.jpg" When I included "unzip" in the path, it threw an error as shown in this image, but when ...

javascriptnode.jsreplace

Learn the process of inserting buttons for editing and deleting in individual rows of a datatable

After creating a datatable, the next step is to enable editing and deleting records within the table. To achieve this, I need to add delete and edit buttons next to the "Year" column, which should be labeled as the action column. The action column should ...

javascriptphphtmljsondatatable

What is the most effective method for pausing execution until a variable is assigned a value?

I need a more efficient method to check if a variable has been set in my Angular application so that I don't have to repeatedly check its status. Currently, I have a ProductService that loads all products into a variable when the user first visits the ...

javascriptangulartypescriptasynchronous

Steps to transfer the content of a label when the onclick event occurs

Seeking advice on how to send the dynamically varying value of a label upon clicking an anchor tag. Can anyone recommend the best approach to passing the label value to a JavaScript function when the anchor is clicked? Here is a sample code snippet: < ...

javascriptjqueryhtmlajax

Displaying an element outside with reduced opacity using fabric js and controls placed above overlay

The property controlsAboveOverlay in Fabric.js is a boolean that, when set to true, will display the controls (borders, corners, etc.) of an object above the overlay image. The overlay image is an image that can be placed on top of the canvas. Currently, ...

javascripthtmlcssfabricjs

Upgrading the entire document's content using jQuery

I am dealing with an ajax response that provides the complete HTML structure of a webpage, as shown below: <!DOCTYPE> <html> <head> <!-- head content --> </head> <body> <!-- body content --> </b ...

javascriptjqueryajax

Refreshing the information in the database table

Upon receiving data from the server using ajax, I populate this table: $.each(data, function(i, item) { $('#MyTable tbody').append("<tr>" +"<td>" +data[i].A+ "</td><td>" +data[i].B ...

javascriptjqueryhtmlajaxjson

Understanding Semantic Versioning (Semver) - A guide to properly Semvering major functional enhancements while maintaining backwards compatibility

It is my understanding that when using X.Y.Z, X is only changed for breaking updates while Y is reserved for backward compatible functional modifications. Therefore, can I infer correctly that even if my update involves a significant enhancement to functi ...

javascriptnpmsemantic-versioning