How to update / modify the dimensions of a rectangle which was created with ' new THREE.PlaneGeometry()'

Questions
1

I want to use a mouse to size a rectangle interactively in real time.

An example of this can be seen by right clicking on a windows desktop and dragging. That will size a selection box across the desktop.

Im my Three.js application I also want the user to be able to size a selection box. I know how to add the initial rectangle on right mouse button down but on mouse move I retrieve the latest mouse position but do not know how to update/modify the rectangle.

Thanks

1 Like
2

You should avoid modifying geometry after creation if possible. The best way to deal with this will be to create a 1x1 plane and then use mesh.scale to set the size:

const geo = new THREE.PlaneBufferGeometry( 1, 1 );

const mat = new THREE.MeshBasicMaterial( {color: 0xFFFFFF } );

const rectangleMesh = new THREE.Mesh( geo, mat );

// now set the size 
rectangleMesh.scale.set( 25, 50, 1);

Since the initial size is 1 x 1, the mesh.scale can be used easily - the above code will create a 25 x 50 rectangle.

Then to update the size - if you want to create a selection box from two mouse clicks you’ll have to do some calculation and move/scale the rectangle accordingly. Just remember that you should be doing these operations on the Mesh, not the Geometry.

5 Likes
3

I tried the .scale.set() It work as you explained. Thank you.

I just had a look at the Three.js web page.
Their documentation page does not have a search box. I wanted to search for “.scale.set” to see what the documentation had to say.

Do you recall where you saw this in the documentation or was is just self evident from your experience with three.js?

Thanks

4

It’s on the Object3D page, here.

Most objects in three.js inherit from Object3D - you can see the inheritance chain at the top of the docs page. So for example if you look at the top of the Mesh page, you’ll see:

Object3D →

meaning that Mesh inherits from Object3D and you can use all of Object3D’s methods as well.

1 Like
5

What effect does scaling have on a texture on the geometry vs making a new non-scaled geometry of a different size? (I haven’t played with textures yet, maybe it’s time!)

6

UV coordinates are the same :slight_smile: What effect do you expect?

7

Not sure what to expect actually (yep, time to play with textures :smile:) . I would guess that scaling scales everything including the texture, but resizing does not resize the texture?

8

Thanks so much for that solution, looee. This took me like 4 hours to find and works as intended. The internet is filled with so many inaccurate search results. I was about to rip my hair out.

1 Like