Error occurs when applyMatrix is used after scaling in three.js

The issue: I am currently in need of updating the vertex positions on a mesh after scaling it. This update is necessary for me to accurately calculate the volume of the mesh. To maintain scale as an active parameter in the original mesh, I have created a cloned mesh.

Initially, I followed the guidance provided at How to update vertices geometry after rotate or move object

This method worked flawlessly with three.js release .70, however, it seems to be broken on release .72.

My implementation:

var volumeClone = new THREE.Mesh(this.mesh.geometry.clone(), new THREE.MeshBasicMaterial({ color: 0xff0000 }));
volumeClone.scale.z = heightScale;
volumeClone.updateMatrix();
volumeClone.geometry.applyMatrix(volumeClone.matrix);
volumeClone.matrix.identity();
volumeClone.geometry.verticesNeedUpdate = true;
volumeClone.scale.set(1, 1, 1);
console(calculateVolume(volumeClone));

Outcome:

When executed in Chrome, the error message indicates:

Uncaught TypeError: Cannot read property 'setFromPoints' of undefined THREE.Geometry.computeBoundingBox @lib.min.js:3THREE.Geometry.applyMatrix

Steps taken so far: I have made attempts to debug and pinpoint the root cause within Geometry.js and Box3.js. Furthermore, I have been analyzing the programmatic flow to identify why "this.boundBox" remains undefined, but thus far, I have yet to determine the underlying issue.

Inquiry: Is the syntax correct? Could there possibly be an update in the specific area of three.js that led to this malfunction?

Answer №1

The solution revealed that extrudeGeometry lacks certain properties found in regular geometry, causing issues when trying to manipulate it due to missing details. The key is to convert bufferGeometry into regular geometry before performing any operations on it. While I acknowledge the advantages of using buffers for performance, in this scenario I can generate a temporary geometry for calculations and discard it once the desired outcome is achieved.

Instead of simply "cloning" the geometry as illustrated in my initial question, I opted to create a specific type of Geometry from the buffer instance:

 var volumeClone = new THREE.Mesh(new THREE.Geometry().fromBufferGeometry(this.mesh.geometry._bufferGeometry), new THREE.MeshBasicMaterial({ color: 0xff0000 }));
volumeClone.scale.z = heightScale;
volumeClone.updateMatrix();
volumeClone.geometry.applyMatrix(volumeClone.matrix);
volumeClone.matrix.identity();
volumeClone.geometry.verticesNeedUpdate = true;
volumeClone.scale.set(1, 1, 1);
console(calculateVolume(volumeClone));

This approach has the added advantage of being compatible with various types of geometries I have encountered so far, including extrusions, imported meshes, and primitives...

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

The formatting of the datepicker-popup is malfunctioning when the initial value is set within the scope

I have implemented the Angular UI bootstrap date picker popup using a custom directive on Plunker (http://plnkr.co/edit/053VJYm1MpZUiKwFTfrT?p=preview): //Module var userModule = angular.module("userModule",['ui.bootstrap']); //Controller userM ...

The failure of the ajax call to encapsulate is likely due to issues with object visibility

Having some trouble with a piece of code meant to run smoothly on Firefox 3.6. The issue arises when the variable this.xmlhttp, defined in STEP2 and used in STEP3, seems to be operating in different variable environments. Even though I expect the two usa ...

What is the best way to animate various sprites using distinct buttons in HTML and CSS?

I've been experimenting with animating a sprite by using different onClick button triggers. I encountered an issue where only one of the buttons works correctly in the fiddle. However, in my local file version, the other buttons work but only once and ...

Using the THREE.js OrthographicCamera with the CanvasRenderer

I have recently started exploring THREE.js and I am currently experimenting with various combinations of renderers and cameras. So far, I have been able to successfully render a simple animation using either the WebGLRenderer with the OrthographicCamera o ...

Setting up npm packages for a Node application

Currently working on developing an npm package for testing purposes and looking to incorporate TypeScript. However, the creation of a node_modules folder is unnecessary. Is there a way to install npm dependencies without generating the node_modules folde ...

Trouble with displaying a cube from Blender to Three.js

Hey everyone, I'm having some trouble exporting a cube from Blender to three.js. I've exported the JSON file, but when I try to display the cube in my code, it's not showing up - instead, all I see is the setColor screen and I can't fig ...

fade in and out twice (for beginners)

Jquery <script> //Code snippet $(document).ready(function(){ $(".team").click(function(){ $(".panel").fadeToggle("3000"); }); $(".team").click(function(){ $(".teamh").fadeToggle("3000"); }); }); </script> HTM ...

Error message: "jQuery is not defined and occurs exclusively in Chrome."

I've been using the following code to asynchronously load my JavaScript in the head section: <script type='text/javascript'> // Add a script element as a child of the body function downloadJSAtOnload() { var element4= document.creat ...

I am having trouble retrieving a JsonResult from an asp.net mvc controller using $resource in angular

I am new to Angularjs and trying to integrate it with asp.net mvc. I am facing an issue where I am unable to access an asp.net mvc controller to return a JsonResult using $resource in angular. Strangely, when I use $.getJson in JavaScript directly, it work ...

Hide the .prev button on the jQuery slider when it is on the first

Is there a way to hide the .prev button when it is the first one? Also, why does the slider go back to the first slide when the .prev button is clicked at the last slide? How can this issue be resolved? var nextPane = function (e) { e &&am ...

Exploring the comparison of information across two sets of databases using Node.js and MongoDB

In the realm of Node.js and MongoDB, I have set up two databases (1-btech2014 & 2-btechre2014) on a single server. My objective is to compare the data in btech2014 with that in btechre2014. If they match, I should retrieve the data from btech2014 as outpu ...

Consider creating a distinct document for your "scripts"

Within my package.json configuration file, the "scripts" section contains numerous commands structured as shown below. "scripts" { "script1": "command example", "script2": "command example", "script3": "command example", "script4": "command exampl ...

The behavior of the jQuery click function seems to be quirky and not functioning as expected. Additionally, the

It seems that instead of triggering a POST request, somehow a GET request is being triggered. Additionally, the ajax call is not being made as expected. I have attempted this many times before, but none of my attempts seem to be working. It could potenti ...

Exploring the issue of why the scroll event handler is not functioning properly within the useEffect hook

After creating a custom hook to retrieve the scroll state of an element, I noticed that the scrollHandler only triggers once. Here's my code: import { MutableRefObject, useEffect, useState } from "react" export const useScrollState = <TE ...

Transmit intricate data structure to a web API endpoint using AJAX requests

When attempting to send a complex object named vm containing an object 'Budget' and an array 'BudgetDetails' populated with rows from an HTML table to my API controller using AJAX, I encounter the error message "Uncaught RangeError: Max ...

Error encountered in NodeJS: Promise TypeError - res.json is not a function while handling pre-signed URLs. This results in

I'm having trouble generating a list of pre-signed URLs for files in my private S3 bucket. Despite researching similar issues on multiple forums, I can't seem to resolve the error with the res.json function in my code. Can someone please help me ...

What other technique can I use to replace the creation of a jquery division?

I`m relatively new to all things related to web technologies and I am currently practicing and learning about them. On my practice page, I've experimented with various elements, including changing div heights based on the viewport height. Here's ...

Is there a way to place two input fields from different forms side by side on the same line?

Here are two forms extracted from an html page: <form method="get" action="search/s" id="number"> <div style="text-align: center;"> <input type="text" id="regNo" name="regNo" size="30" maxLength="50" > or ...

In my upcoming app, I incorporated a tradingview widget that occasionally experiences a glitch. Specifically, when navigating away from and back to the widget, the chart disappears. However, a simple refresh corrects the

Below is the code snippet for embedding a tradingview chart. The script loads the imported tradingview function on page load, and I've included a function to reload the dashboard programmatically onClick event. import Script from "next/script&quo ...

Using Node.js: Interacting with npm inside a module

Is there a more efficient way to implement self-updating functionality for a globally installed module than using the code snippet below? require("child_process").exec("npm update -g module-name"); I came across some documentation regarding installing np ...