scaling a three.js geometry in one direction without adjusting the mesh's position in place

Question

scaling a three.js geometry in one direction without adjusting the mesh's position in place

Our goal is to create "edit handles" that will enable users to resize a (projected) plane by dragging from one of 8 positions (4 corners + 4 edges). This resizing should only scale/stretch the surface in the direction of the drag. However, the default scale mechanism in three.js does not meet our requirements as it scales in two opposite directions simultaneously, similar to what can be observed in this example.

I have done extensive research and experimentation, particularly focusing on these two discussions:

Scaling a Three.js geometry only up
Scaling a geometry in one direction with top as reference in threejs

Following these investigations, I arrived at the following solution:

// preparing to resize into -x direction aka "left edge"
// moving the geometry center to the right edge
mesh.geometry.translate(width/2, 0, 0);
mesh.geometry.scale(scaleX, 1, 1);
// moving the geometry center back to the middle 
// as more resizing might happen, into another direction, as per comment here: 
// https://stackoverflow.com/questions/26817717#comment74469004_26818522
mesh.geometry.translate(-(width/2 * scaleX), 0, 0);

However, the outcome was not as expected: The scaling occurs in two opposite directions again, resulting in the translations canceling each other out. It appears that either the scaling does not occur while the center/point of origin is placed on the right edge, or there may be a misconception on my part.

In contrast, the following approach yielded successful results:

mesh.scale.set(scaleX, 1, 1);
mesh.position.x = (-width / 2);

Although effective, continually resetting the mesh position feels like a hacky solution. Additionally, there are concerns about performance implications, especially regarding the frequent application of transformations during every frame, as discussed in this thread: Three.js - Scale model with scale.set() or increase model size?. It has been suggested that transforming the underlying geometry could potentially offer better performance benefits.

I also explored the source code of the TransformControls, but given its limitations and my incomplete understanding of quaternions, the concept remains elusive to me.

Thus, my inquiry is as follows: Is there a method to achieve unidirectional resizing without the need for continuously adjusting the mesh's position?

javascript 3d three.js

Answer 1

Answer №1

There are two ways to approach the issue at hand, as you have discovered.

Adjust the geometry scale.
Modify the Mesh scale and adjust its central position.

Let's first delve into option 1, which I do not recommend for reasons that will become apparent shortly.

To linearly scale geometry in a single direction, every vertex must be moved in accordance with the scaling factor. This entails calculating the new position of each vertex based on the amount of scaling it will undergo (with vertices nearest to the scaling side moving the most, those in the middle moving less, and vertices opposite the scaling side experiencing minimal movement). When performing live scaling, this can result in a substantial number of calculations.

Now, consider option 2: Altering the matrix of the entire mesh, including its new position. Once this matrix is sent to the GPU, the GPU takes care of the rest. Given the GPU's prowess in mathematical operations, particularly matrix mathematics, compared to JavaScript, the process of manipulating matrices poses no challenge to the GPU.

In addition, having the transformation matrix in place allows for obtaining the world positions of the vertices:

vertexCopy.set(myMesh.geometry.attributes.position.getX(index),
    myMesh.geometry.attributes.position.getY(index).
    myMesh.geometry.attributes.position.getZ(index));
myMesh.localToWorld(vertexCopy);

Summary:

Manipulating geometry could be considered even more "hacky" than manipulating the transformation matrix. It's akin to dictating how each pixel of a square should be drawn, rather than simply instructing to draw a square.

Updating the geometry incurs significant computational costs. Despite "baking" the vertices afterward, any subsequent manipulation will trigger further computations.
Updating the mesh's matrix proves straightforward and shifts the computational complexity to the adept GPU, capable of processing such information seamlessly.

You are free to choose the method aligned with your requirements, but based on the details provided, I highly recommend opting for option 2.

An alternative suggestion:

You might explore utilizing Morph Targets to achieve your objective, although my experience in this area is limited. Here's an example of morphing altering a cube for reference. Employing multiple morph targets would be necessary to attain the desired effect, yet this approach likely surpasses direct geometry manipulation given that morph manipulations happen within the GPU environment.

Answer 2

There are two ways to approach the issue at hand, as you have discovered.

Adjust the geometry scale.
Modify the Mesh scale and adjust its central position.

Let's first delve into option 1, which I do not recommend for reasons that will become apparent shortly.

To linearly scale geometry in a single direction, every vertex must be moved in accordance with the scaling factor. This entails calculating the new position of each vertex based on the amount of scaling it will undergo (with vertices nearest to the scaling side moving the most, those in the middle moving less, and vertices opposite the scaling side experiencing minimal movement). When performing live scaling, this can result in a substantial number of calculations.

Now, consider option 2: Altering the matrix of the entire mesh, including its new position. Once this matrix is sent to the GPU, the GPU takes care of the rest. Given the GPU's prowess in mathematical operations, particularly matrix mathematics, compared to JavaScript, the process of manipulating matrices poses no challenge to the GPU.

In addition, having the transformation matrix in place allows for obtaining the world positions of the vertices:

vertexCopy.set(myMesh.geometry.attributes.position.getX(index),
    myMesh.geometry.attributes.position.getY(index).
    myMesh.geometry.attributes.position.getZ(index));
myMesh.localToWorld(vertexCopy);

Summary:

Manipulating geometry could be considered even more "hacky" than manipulating the transformation matrix. It's akin to dictating how each pixel of a square should be drawn, rather than simply instructing to draw a square.

Updating the geometry incurs significant computational costs. Despite "baking" the vertices afterward, any subsequent manipulation will trigger further computations.
Updating the mesh's matrix proves straightforward and shifts the computational complexity to the adept GPU, capable of processing such information seamlessly.

You are free to choose the method aligned with your requirements, but based on the details provided, I highly recommend opting for option 2.

An alternative suggestion:

You might explore utilizing Morph Targets to achieve your objective, although my experience in this area is limited. Here's an example of morphing altering a cube for reference. Employing multiple morph targets would be necessary to attain the desired effect, yet this approach likely surpasses direct geometry manipulation given that morph manipulations happen within the GPU environment.

scaling a three.js geometry in one direction without adjusting the mesh's position in place

Answer №1

Similar questions

The identification number is not used to update Mongo DB

React-file-viewer shrinks any document to a compact size

Tips for enabling or disabling elements within an array using React JS

When using `this.array.find` within methods or computed properties in Vue, it sometimes returns

What is the best way to extract text following a particular symbol in javascript or Jquery?

How to Properly Implement app.use() in Express for Middleware

Retrieve the Span class value contained within a Select Option

Easy-peasy AJAX bookmarking

Exploring the Universe: Modify the hue of a celestial body and showcase information upon hoveringokableCall

Angular sorting - Strings with undefined values are placed at the end

When the add button is clicked, a new radio button will be added along with the value entered in

Guide to correctly passing custom parameters along with the event object to an asynchronous form submission handler

Determine the byte size of the ImageData Object

Are there any event triggers for History.pushstate?

Sending Node.js FileStream Image to HTML5 FileReader API

Tinymce editor does not display icons as expected

Guide to successfully integrate MathJax into your React application

Obtain the jQuery dialog's closure event within the $.Ajax completion function

How can modifications be made to HTML strings passed through props in React?

Using React Router v6, you can easily set up routing for paths such as https://adomain.com/blogs/sample