CODEWITHSUNDEEP
javascriptthree.js
d_z90
d_z90

Reputation: 1263

Dynamically change object dimensions in Three.js

I am using the library dat.gui within three.js to let the user interact with an object and modify the dimensions of its mesh. Most of the examples online are using scale when they want to change a mesh dimensions:

mesh.onChange(function(value){mesh.scale.x = value;});

The problem with this solution is that is not very user friendly and requires to also adjust the object.position when a value is changed. Are there other possibilities apart from this one? In case can you post a plausible alternative with a working example? Thanks in advance for your answers.

Upvotes: 1

Views: 1136

Answers (1)

Scott Stensland
Scott Stensland

Reputation: 28285

A clue to solving your question is to understand where the origin of your object is : at the object's geometric center or at some corner. It also depends on the implementation of the scale operation.

Ignoring three.js for a minute, if done by hand a scale operation could be thought of as three distinct operations :

1 - translate the object center to the origin of your world coordinates
2 - multiply its vertex position matrix by your scale factor
3 - translate object back to original world location

So two assumptions need to get resolved : 

- is the ~center~ of your object at its geographic center or 
  at one of its corners

- do you want to scale (stretch) your object by expanding outwards from 
  its origin in all dimensions or simply extend outwards by retaining
  its current origin and ballooning its shape outwards

What behavior you need expressed ?

.... object.position would be needed depending on your answer

Upvotes: 1

Related Questions