Determining the spatial capacity of a mesh using ThreeJS surpasses the volume of its bounding box

Issue at Hand:

The challenge lies in the fact that the bounding box volume is turning out to be smaller than the volume calculated from the mesh.

Attempts So Far:

To begin with, I computed the volume of a bounding box using the following code:

//loaded .obj mesh object:
var sizer = new THREE.Box3().setFromObject(obj);
console.log(sizer.size().x*sizer.size().z*sizer.size().y);

Output: 197112.65382983384

Next, I proceeded to calculate the mesh volume utilizing this method and with the legacy geometry object in "calculateVolume" method included below:

    console.log(scope.calculateVolume(child));

The calculateVolume function belongs to a class. Listed below are some of the class methods:

threeDeeAsset.prototype.signedVolumeOfTriangle = function(p1, p2, p3) {
    var v321 = p3.x*p2.y*p1.z;
    var v231 = p2.x*p3.y*p1.z;
    var v312 = p3.x*p1.y*p2.z;
    var v132 = p1.x*p3.y*p2.z;
    var v213 = p2.x*p1.y*p3.z;
    var v123 = p1.x*p2.y*p3.z;
    return (-v321 + v231 + v312 - v132 - v213 + v123)/6;
}

threeDeeAsset.prototype.calculateVolume = function(object){
    var volumes = 0;

    object.legacy_geometry = new THREE.Geometry().fromBufferGeometry(object.geometry);

    for(var i = 0; i < object.legacy_geometry.faces.length; i++){
        var Pi = object.legacy_geometry.faces[i].a;
        var Qi = object.legacy_geometry.faces[i].b;
        var Ri = object.legacy_geometry.faces[i].c;

        var P = new THREE.Vector3(object.legacy_geometry.vertices[Pi].x, object.legacy_geometry.vertices[Pi].y, object.legacy_geometry.vertices[Pi].z);
        var Q = new THREE.Vector3(object.legacy_geometry.vertices[Qi].x, object.legacy_geometry.vertices[Qi].y, object.legacy_geometry.vertices[Qi].z);
        var R = new THREE.Vector3(object.legacy_geometry.vertices[Ri].x, object.legacy_geometry.vertices[Ri].y, object.legacy_geometry.vertices[Ri].z);
        volumes += this.signedVolumeOfTriangle(P, Q, R);
    }

    return Math.abs(volumes);
}

Output: 336896.1562770668

Investigating Vertex Sources:

I also experimented with buffergeometry and as expected, it consisted of the same array, albeit in a typed Float32Array which yielded identical results:

var vol = 0;
scope.mesh.traverse(function (child) {
    if (child instanceof THREE.Mesh) {
        var positions = child.geometry.getAttribute("position").array;
        for(var i=0;i<positions.length; i+=9){

            var t1 = {};
            t1.x = positions[i+0];
            t1.y = positions[i+1];
            t1.z = positions[i+2];

            var t2 = {};
            t2.x = positions[i+3];
            t2.y = positions[i+4];
            t2.z = positions[i+5];

            var t3 = {};
            t3.x = positions[i+6];
            t3.y = positions[i+7];
            t3.z = positions[i+8];

            vol += scope.signedVolumeOfTriangle(t1,t2,t3);
        }
    }
});
console.log(vol);

Output: 336896.1562770668

The Query at Hand:

Why is it that my bounding box volume appears to be less than the calculated volume of a closed mesh? It's possible that there might be an offset position that I am overlooking or maybe I am not calculating the bounding box volume accurately. Despite conducting multiple searches on both Google and Stack Overflow, I have yet to find a solution, resulting in me stumbling upon the signedVolumeOfTriangle function mentioned above, which seems to be widely accepted.

Answer №1

One potential issue might lie in the winding order of the polygon. Consider trying to negate the result from the signed volume calculation or rearranging the arguments.

The direction of the winding order, whether clockwise or counterclockwise, determines the orientation (normal) of the polygon.

volumes += this.signedVolumeOfTriangle(P, Q, R);

Reversing the positions of P and R will invert the normal:

volumes += this.signedVolumeOfTriangle(R, Q, P);

Complications can arise with storage methods like triangle strips, where vertices are shared between adjacent triangles, resulting in alternating winding orders.

Another possible issue could be related to degenerate vertices, especially if the code works correctly for simple meshes. When meshes have undergone numerous modifications in an editor, degeneracies are likely to occur.

Consider using an option in the editor to weld nearby vertices or testing the code with a known good mesh such as the Stanford bunny.

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 could be causing the createReadStream function to send a corrupted file?

My current task involves generating a file from a URL using the fs module to my local system. Initially, everything seems successful. However, when attempting to post this file into a group using the createReadStream() function, I encounter an issue where ...

Tips for preventing an AJAX response from populating a select dropdown

https://i.sstatic.net/gA1VE.gif In the example above, there is a placeholder (an option without value) that says something like Select Subcategory. When I change the category value, the subcategories are displayed. But what I want is for the subcategory ...

"Error in react-three-fiber: Only the last mesh retains its model, all others are

Currently, I am working on a React application where I am using react-three-fiber to visualize data in a 3D environment. My goal is to create various models by passing data representing their characteristics as props into components. However, I am encounte ...

Looking for guidance on how to specify the angular direction in the ng-repeat

I am facing a challenge with the structure of my ng-repeat directive and I am having trouble navigating through it. Here is a representation of the data in array format JSON style {"data":[ ["sameer","1001", [ {"button_icon": ...

NodeJS: Increasing memory consumption leads to system failure due to recursive scraping

Currently, I am utilizing a GET URL API in NodeJS to extract various data by looping through the months of the year across multiple cities. For each set of parameters such as startDate, endDate, and location, I invoke a scrapeChunk() function. This functio ...

Sketch on canvas using vue framework

I am trying to modify a selection tool using rectangles that was created with JS and HTML in Vue.js. Here is the original version: https://codepen.io/sebastiancz/pen/mdJVJRw initDraw(document.getElementById('canvas')); function initDraw(canvas) ...

Showing JSON data in AngularJS

I need help with AngularJS to display JSON output. Is using gridOptions the best approach for this? I'm trying to print labels starting from the root in reverse order - label/parent's label/parent's parent's label/... { artifac ...

Is your jquery keydown event detector failing to recognize key inputs?

Lately, I've been working on a new project and encountered an issue with a piece of code that used to work perfectly fine in a previous project. The code in question is $(document).keydown(function(keypressed){});, which I used to detect specific key ...

Top method for creating a dynamic webGL mesh/surface in real-time

In order to achieve a dynamic spectral display in 3D using WebGL, I am looking to create a surface or mesh that updates with a new row of information every 2 seconds. This display will consist of colored vertices/faces/particles reflecting the relative hei ...

Steps for populating a table with data from a JSON array

I am currently facing a challenge in populating an HTML table with data retrieved from a two-dimensional array. The information is being fetched through an $.ajax script after executing a php/MySQL query. Despite successfully parsing the data in the succes ...

What is the best way to play a video from a certain time point in a React application?

How can I make my component automatically play from a specific time like 00:07:12,600 instead of starting from the beginning? import style from './Hero.module.css'; import Image from 'next/image'; import ReactPlayer from 'react-pla ...

Include the insertion button in the Tiny MCE Editor

Currently, I am in the process of developing my own plugin to integrate into the list of TinyMCE v4 plugins. So far, I have successfully added a button to the menu that opens a pop-up when clicked. In this pop-up, users can input data which is then added t ...

Utilize Jquery to locate and update the text of all div elements that have an empty id attribute

I need help with a task involving a list of divs, some with ids and some without. My goal is to identify all the divs within a specific class that have empty ids and change their inner text to say "no data available". Can this be done? My attempt using $( ...

issue with displaying popover component using React with Material UI

A React component I created has 6 different experiences, each triggering a popover with an array of images. The popovers are implemented using Material UI, and while they work, there are some console errors that I'm unsure how to resolve. Below is th ...

Steps to generate an error in the 'response' function of a $httpProvider interceptor

I am currently working on creating a custom HTTP interceptor in Angular and I am looking to generate an error from the response of the $httpProvider interceptor. According to the provided documentation: response: Interceptors are triggered by the http re ...

Transmit analytical data to an external domain without expecting a reply

Initial Conditions I have ownership of mysite.com I lack ownership of othersite.com, but I am able to embed javascript code on that site Query What is the method to transmit analytic data from othersite.com to mysite.com ? ...

How can I switch the values of two select components in React js when clicked?

I am working on a project where I have two select components positioned on the right and left side respectively, each with different values - A on the right side and B on the left side. Now, in response to a button click event, I need to swap component A t ...

Encountering issues with loading styles in Vue single file components

While working on my project at this link, I encountered an issue with displaying a styled modal. Despite trying to import the styles using: <style scoped> @import "../styles/modal-style.css"; </style> and even directly pasting the co ...

Dependency on the selection of items in the Bootstrap dropdown menu

I am currently struggling with a few tasks regarding Bootstrap Dropdown Selection and despite looking for information, I couldn't find anything helpful. Check out my dropdown menu Here are the functions I would like to implement: 1) I want the subm ...

How can data on the server be fetched using an AJAX request in Express.JS and displayed on the client side?

I have been given the task of displaying this code on the client side. I've successfully loaded data/content on the page but it lacks a certain level of elegance. var express = require('express'); router = express.Router(), ...