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):
https://threejs.org/docs/#api/geometries/BoxBufferGeometry
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 
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