What is the process for duplicating geometry in three.js?

I am attempting to determine the volume of an object based on a scale value provided by a form submission.
My goal is to recalculate the scale from the original geometry each time, but I encounter an issue when I update the geometry and then change the scale, as it applies to the updated geometry.
I thought about cloning the geometry and applying the scale only to the cloned version. This way, I could always start from the original geometry whenever the scale value changes. However, I am unsure how to implement this solution.

Here is the code I have so far. Any suggestions?

$(document).on('change', '.scaleBox', function (e) {
    if (idfile == $(this).attr('idgl')) {
        var val = $(this).val();
        if (val <= 0)
            val = 0.1;

        myObj.scale.set(val, val, val);            
        myObj.updateMatrix();
        myObj.geometry.applyMatrix(myObj.matrix);
        myObj.matrix.identity();
        myObj.geometry.verticesNeedUpdate = true;

        var volume = myVolume(myObj.geometry);
        $("#specs-" + idfile).find('.volumeVal').html(myRound(volume, 3));     

        var box = new THREE.Box3().setFromObject(myObj);
        xyzSizes = box.size();
        $("#specs-" + idfile).find('.sizesVal').html('x: ' + myRound(xyzSizes.x, 3) + ' y: ' + myRound(xyzSizes.y, 3) + ' z: ' + myRound(xyzSizes.z, 3));
    }
});

Answer №1

After carefully analyzing the situation, I successfully resolved the issue by reversing the scale factor and updating the geometry once again. Hopefully, this solution will benefit others who may encounter a similar problem.

 $(document).on('change', '.scaleBox', function (e) {
    if (idfile == $(this).attr('idgl')) {
        var val = $(this).val();
        if (val <= 0)
            val = 0.1;

        myObj.scale.set(val, val, val);
        var box = new THREE.Box3().setFromObject(myObj);
        xyzSizes = box.size();
        $("#specs-" + idfile).find('.sizesVal').html('x: ' + myRound(xyzSizes.x, 3) + ' y: ' + myRound(xyzSizes.y, 3) + ' z: ' + myRound(xyzSizes.z, 3));
        myObj.scale.set(val,val,val);
        myObj.updateMatrix();
        myObj.geometry.applyMatrix(myObj.matrix);


        var volume = myVolume(myObj.geometry);
        $("#specs-" + idfile).find('.volumeVal').html(myRound(volume, 3));
        myObj.scale.set(1/val,1/val,1/val);
        myObj.updateMatrix();
        myObj.geometry.applyMatrix(myObj.matrix);
    }
});

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

Regularly switch up the background image using the same URL

I am currently developing an angular JS application where the background of my body needs to change every minute based on the image stored on my server. In my HTML file, I am using ng-style to dynamically set the background image: <body ng-controller= ...

Disappearance of newly added row in jquery

I am currently facing an issue with a code I have written for database updates. The problem arises after adding a new row, as it initially displays but then promptly disappears. This peculiar behavior occurs on the server end when I attempt to view the p ...

What is the best way to update an object with a new object using JavaScript or lodash?

My data structure is as follows: const data = { getSomething: { id: '1', items: [ { id: '1', orders: [ { id: '1', ...

What sets this.prototype apart from module.exports?

As a newcomer to the world of Node.js, I am eager to gather information, experiment with testing techniques, and explore the code written by others. In my exploration, I have noticed that creating and requiring modules is a common practice in Node.js. Dif ...

Creating an Engaging Data Visualization: Blending Candlestick Insights with Line Graphs

I'm attempting to display a moving average on a candlestick chart, but I'm facing an issue where the path of the line is not fully appearing on the SVG canvas that I've created. I've searched through various posts to understand how to o ...

Guide to Resolving Nodemailer Error with Code 4078 for Sendgrid

In my email class, I have the following code: const pug = require('pug') const nodemailer = require('nodemailer'); const htmlToText = require('html-to-text'); module.exports = class Email{ constructor(user, url) { th ...

Verify if the nested arrays within the object consist of any empty elements

Take a look at the object below: { "params": { "time_to_diagnosis": [ { "field": "date_of_diagnosis", "value": "" }, { "field": "date_of_symptom_onset", "value": "2019-09-01" } ], "time ...

When attempting to execute an npm command, an error is encountered stating that chunk.sortModules is

It’s time to bring back an old project and make some modifications. I tried using git checkout 0.0.2 since that's the tag currently running on production, but it seems to be causing issues. After downloading the code to my PC, I removed the node_mo ...

Display all files within every subdirectory located in a specified folder on Google Drive

Recently, I stumbled upon a script located at https://github.com/bluexm/snipets/blob/master/list%20Gdrive%20files%20and%20folders. The challenge I encountered was that the script was not capable of handling folders with identical names. As a result, I made ...

Utilize React to generate HTML content and send it as the email body through Node.js

I am currently working on a react application that consists of two main pages - AddStatus and ViewStatus. Both of these are implemented as react components. My current task involves sending out an email daily at a specific time, containing the details dis ...

What is the optimal method for fetching JSON information with Angular?

I have data that I organized in a JSON-like structure, as shown below: { "Id": { "1": [ { "Item1": "Item One", "Item2": "Item Two", "Item3": "Item Three" ...

Error encountered while using XLSX.write in angular.js: n.t.match function is not recognized

I've encountered an issue while trying to generate an .xlsx file using the XLSX library. The error message I received is as follows: TypeError: n.t.match is not a function at Ps (xlsx.full.min.js:14) at Jd (xlsx.full.min.js:18) at Sv (xlsx.full.min ...

Node.js user update complete

I am currently working on enabling users to edit their profiles. However, the code I have set up does not seem to be functioning as expected. The form I am using looks like this: <form action="/dashboard/users/edit/:id" method="put"> And my route ...

Using TypeScript in Node.js to iterate through an asynchronous forEach loop

I attempted to integrate a database operation within an async forEach loop with the following code snippet: let successCounter = 0; let failureCounter = 0; let myData = [101, 102, 104, 105]; myData.forEach(async data => { let response = awai ...

Having trouble with a Three.JS/WebGL 3D object not loading in Firefox?

After creating a 3D Object using Three.js examples, I noticed that it works perfectly in Chrome and IE 11, but for some reason, it's not loading on Firefox. I am currently using the latest version of Firefox (FF 27.0). When I tested the code on Firef ...

When entering a sub-URL into the browser address bar, the routes do not display as expected

I am encountering an issue with navigating to different routes within my React application. While the home route is visible and functions properly when I start the app locally (npm run dev), I am unable to access other routes. No errors are displayed in t ...

PhoneGap/Cordova-built android application fails to display external links

I'm currently developing a geolocation app and encountering an issue with loading a Google map. The native geolocation is functioning properly, but incorporating the map has been challenging, similar to the example shown in Simple Markers here. After ...

Enhancing the session helper in Silex with additional values

Hey there, I'm currently working on a basic shopping cart using an MVC framework called Silex. However, I've run into a JavaScript/AJAX issue that I could use some help with. My problem arises when trying to add a product to the basket. The issue ...

Utilize Javascript to locate the image width and assign it to the wrapper divs in WordPress

I am trying to figure out how to set the wrapper divs' widths equal to the size of the images (featured images) they contain so that they are evenly spaced from each other. I came across a potential solution here: (solution at the bottom), but I am ...

What could be the reason behind the failure of this computed property to update in my Vue 3 application?

As I transition from Vue's Options API to the Composition API, I decided to create a small Todo App for practice. Within App.vue, my code looks like this: <template> <div id="app"> <ErrorMessage v-if="!isVali ...