Bounding Boxes in THREE.js

After calculating the convex hull in three.js, how can I determine the oriented bounding box?

In this visual representation: The green area indicates the convex hull (displayed as a mesh for clarity), while the white area represents the AABB.

I have found that there are no specific built-in functions for this in three.js. I attempted to use OBB.js from the examples provided, but it did not yield the desired results. The convex hull algorithm shows promise. Any guidance on what steps to take next would be greatly appreciated.

As far as I comprehend, my task involves computing the covariance matrix of the vertices along the boundary of the convex hull (excluding internal vertices). How can I locate these boundary vertices?

javascriptthree.js3dbounding-boxconvex-polygon

Answer №1

How can I retrieve those vertices?

If you already have a created instance of ConvexHull, you can access all the vertices in the following way:

const faces = convexHull.faces;

for ( let i = 0; i < faces.length; i ++ ) {

    const face = faces[ i ];
    const edge = face.edge;

    // Traversing a doubly-connected edge list to retrieve all vertices

    do {

        const vertex = edge.head().point;

        console.log( vertex );

        edge = edge.next;

    } while ( edge !== face.edge );

}

And yes, it's worth mentioning that the official OBB class currently does not support the computation of the best-fit OBB.

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

Steps for incorporating a toggle feature for displaying all or hiding all products on the list

Looking for some guidance: I have a task where I need to display a limited number of products from an array on the page initially. The remaining items should only be visible when the user clicks the "Show All" button. Upon clicking, all items should be rev ...

javascriptangulartypescript

Transmitting a form using an AJAX request with a jQuery script

My main objective is to develop a form that can send an image to the server using Ajax via jQuery. I previously posted this question on Stack Overflow (Problem sending a form with a jquery file component by ajax), but unfortunately, it was closed and I st ...

javascriptphpjqueryhtmlajax

Unauthorized Access with Ajax jQuery

While working on an ajax request using Jquery, I encountered a dilemma. Even though the page is only accessible to logged in users, my cookies are not being sent along with the request. This results in a 401 error. I am already logged in, so why aren' ...

javascriptjqueryasp.net

Operating on a duplicate of the array is necessary for mapping an array of objects to function properly

I'm starting to uncover a mysterious aspect of Javascript that has eluded me thus far. Recently, I've been pulling an array of objects from a database using Sequelize. This array is quite intricate, with several associations included. Here' ...

javascriptnode.jsarraysjsonsequelize.js

What is the best method to trigger a bootstrap modal window from a separate component in Angular 8?

I have successfully implemented a bootstrap modal window that opens on a button click. However, I am now facing difficulty in opening the same modal window from a different component. Below is the code I have tried: <section> <button type=&quo ...

javascriptangulartypescriptbootstrap-4modal-dialog

Dynamic Content with Angular Bootstrap Tooltip

Currently, I am developing a cart application in Angular and utilizing Angular Bootstrap. The main requirement is to display a tooltip when hovering over the cart icon, with the content of the tooltip changing based on whether the item is already in the c ...

javascriptangularjsangular-ui-bootstrap

Exploring Node and Express Request Query

I'm struggling with a specific endpoint setup in my code. // GET /api/logs/ app.get('/api/logs', function (req, res) { if (req.query.reverse === true) { res.send((mainModule.logs).reverse()); } else { res.send(mainModule.logs) ...

javascriptnode.jsexpress

Unlocking the potential of the ‘Rx Observable’ in Angular 2 to effectively tackle double click issues

let button = document.querySelector('.mbtn'); let lab = document.querySelector('.mlab'); let clickStream = Observable.fromEvent(button,'click'); let doubleClickStream = clickStream .buffer(()=> clickStream.thrott ...

javascriptangulartypescriptbufferrxjs

How can a single value (the clicked one) be retrieved from a for loop using addEventListener in a Django project with JavaScript

Struggling to integrate JS into my Django project, I received the following message in the console: HTMLCollection(2) [p.currency-one, p.currency-one] HTMLCollection(2) [input.amount-one, input.amount-one] app.js:21 Uncaught TypeError: c1.addEventListener ...

javascripthtmldjango

Guide to declaring variables using jQuery

Currently tackling a school project, I stumbled upon some online example solutions and managed to decipher most of the code. However, there is one line that has me puzzled. var $newTweet = $('<div class=tweet></div>'); My assumption ...

javascriptjqueryhtmlcss

Tips for obtaining the current date in the head of a Next.js application

My goal is to utilize Date.now() within a script tag inside the head section. The code snippet I am using is as follows:- import Link from "next/link"; import Head from "next/head"; export default function IndexPage() { return ( ...

javascriptreactjsnext.jshead

Adding a child node before an empty node in Chrome with JavaScript Rangy

When attempting to insert a node before an empty element at the start of another element, a problem was noticed. Here is the initial setup: <p>|<span />Some text</p> By using range.insertNode() on a Rangy range to add some text, Chrome ...

javascripthtmldomrangy

Tips for sending an optional parameter to @Directives in Angular 2 using TypeScript

Here is a helpful guide on passing parameters to Angular 2 directives. <p [gridGroup]="gridGroup"></p> My goal is to have the parameter as optional so that it doesn't have to be included in every class referencing the html source. Curre ...

javascriptangular

The client continues to request the file through the REST API

I have noticed a behavior with an audio file stored on the server that clients can request via a REST API. It seems that every time the audio is played again, a new request is sent to the server for the file. Is there a way to prevent this or cache the dat ...

javascripthtmlnode.jsexpress

Exploring the intricacies of parsing nested JSON data

Could someone assist me with understanding the following json data? { "Message":"The request is invalid.", "ModelState":{ "model.ConfirmPassword":["The password and confirmation password do not match.","The password and confirmation passwo ...

javascriptjsonajax

Exploring jQuery Mobile - What Causes an Empty State?

Using $.mobile.navigate("#test-page", {id:123}) for navigation to a secondary page seems to be successful. The transition between pages is smooth.... but the state remains empty! According to the documentation, the state should contain all necessary info ...

javascriptjqueryajaxjquery-mobilebrowser-history

Displaying information on an Angular user interface grid

I am facing an issue with displaying data in a UI grid table. I have set up an API through which I can access the data in my browser, but I am encountering difficulties when it comes to rendering the data. Below is my Angular controller where I have defin ...

javascriptangularjsjsonangular-ui-grid

A single search to locate all children linked by a single reference

Today I am facing a problem with my application. I am using Express, MongoDB with Mongoose for the back-end. I have a model with an ObjectId reference to its parent. I want to retrieve all documents that have this parent, but I am only getting the parent& ...

javascriptnode.jsmongodbexpressmongoose

Steps for accessing an iframe link with a VPN

How can I embed a German link on my website that is only accessible to the German public? When trying to access it from another country, I receive a "This show is not available in your country for legal reasons" message. However, if I use a VPN in that c ...

javascriptjqueryiframevpn

Is there a way to transfer JSON data from a JSP page to a Spring REST controller efficiently?

Attempting to send data from a jsp page containing datetime, zoneid, checked checkboxes with values, and unchecked checkboxes with null values. Despite sending all this as json to my spring rest controller, I noticed in debug mode that the controller only ...

javascriptjsonajaxspring-bootjsp