Three.js mesh resize

Question

I have a 3D model that was loaded as an obj file into Three.js . The model itself is a furniture.

The problem is, that furniture material is dynamic and is different in size (thickness). I need to have to able to made thickness of material bigger, but the total size of the model can't be changed. So scaling isn't an option.

Is there a way I can resize parts of the model (few specific meshes) and doesn't compromise the structure of mesh itself ? I need to change thickness of the structure, but internal parts of the model shouldn't change.

The only solution I can think of is to change scale of some of the meshes and then to change global position of the other meshes based on that. Is this the right way ?

object.traverse(function(child) {
    if (child instanceof THREE.Mesh) {
        // resize and reposition some of the meshes
    }
});

Possible ways to solve it:

1. Bones
2. Deformation

Answer 1

Well, if all of the meshes are separate primitives, then you can just change the scale of each part you want to change along one axis, and just set up anchor points to constrain to the outside. So for pieces on the border, you scale the empty object that they're attached to so that they maintain the outer shell.

EG:

 OOOOOO
OMMMMMMO
OMmmmmMO
OMmmmmMO
OMMMMMMO
 OOOOOO

where O is an Object3D carrying the adjacent Mesh-M, and the m's represent meshes that are scaled themselves. This way if you adjust the scale of all 'm's and 'O's, the outer shell stays in place,

But you're on the right track with the traversal. You'll just have to do this. For an easy way to traverse, I would give everything you want to change some attribute in their .userData object. Because in some cases you'll want to scale empty objects (O) (so that you can effectively move the anchor point) whereas at others you'll want to scale the meshes in place (m). So it's not purely a mesh based operation (since meshes want to scale from their center). Doing some tagging makes the traversal simpler:

object.traverse(function(child){
    if(child instanceof THREE.Mesh){
        if(child.userData.isScalable){
            //do the scaling.
        }
    }
});

and if you set up the heirarchy and .userData tagging correctly, then you just scale things and you keep the outer shell.

Is this what you're asking? because the question is unclear.

Answer 2

You could use Clara.io, it is built on top of ThreeJS and allows for you to run operators on geometry that you setup in Clara.io scenes. There is a thickness operator in Clara.io that you can use.

Documentation here: http://clara.io/learn/sdk/interactive-experiences

Anything you can do in the Clara.io editor you can do in an interactive-embed.

Answer 3

You can use your method of changing different meshes sizes and other positions, but when you use object.scale.set( x, y, z ); the browser has to change the scale of the model for every frame rendered. So if you use this for lots of meshes, it can decrease your game's performance. The best way to go would be to use a 3d editor like Blender. It is easier and more efficient.