How do I create resizable objects in THREE.JS

Question

Lets say I have a simple cube and some variables specifying its width, height and depth.

How do I update my THREE mesh when the w/h/d changes? (I have everything else like changelisteners etc). Do I update vertices directly? Or is it easier to just redraw everything?

Answer 1

I think easiest would be to create your cube with 1 unit dimensions (1x1x1). Then set the dimensions by scaling it:

mesh.scale.x = width;
mesh.scale.y = height;
mesh.scale.z = depth;

Not actually sure if mesh supports scale, if not, you can wrap it in Object3D

var obj = new THREE.Object3D();
    obj.add(mesh);
obj.scale.x = width;
obj.scale.y = height;
obj.scale.z = depth;

Nothing stops you from modifying the vertices directly. I think you need to specify geometry.dynamic=true; and then geometry.verticesNeedUpdate=true; in that case.