Is there any way for the mouse to control the size of the graphic?

when I add a cube in webgl,I want to change this cube size by mouse click and move,It is possible to change only the depth, width, or height ,How should we achieve it? thanks

Check out this example.

After pressing R key you are allowed to freely scale the box in depth, width, and height

Instead of change the scaling, you can also re-create the geometry of cube like in this example (use the drop-down menu):

Keep in mind that this process is computationally expensive since you re-generate the entire geometry. This is not an operation you want to perform each frame.

Yeah, I know the example but sometimes i just want change the height of a face. For example, my cube is on the ground, I want to make him bigger and higher through mouse events. But this example is based on scaling will stretch up or down at the same time, then the bottom of my bottom may be below the ground.

What you are looking for is a type of geometry manipulation which is comparable to geometric modeling software like Blender. AFAIK, there is no official three.js example for such a use case. It’s possible but quite work intensive to provide different selection modes (vertices, edges, faces) and the corresponding type of geometric transformation.

You can use .translate(0, height_of_the_box * 0.5, 0) of THREE.BoxGeometry()/THREE.BoxBufferGeometry(), thus the box will stay above the ground.
Or you can use the same approach for the position of a mesh: mesh.position.set(0, height_of_the_box * 0.5, 0). Depends on what your goal is :slight_smile:

yes,But there is indeed this demand,thank you

1 Like

yeah,I tried it, but I don’t know what method to use to implement mouse interaction