How to Change a Box's dimensions/size after creation?

Question

One can easily create a THREE.BoxGeometry where you have to pass arguments when creating as three separated arguments for width, height, and depth.

I would like to create any and all THREE[types]() with no parameters and set the values after that.

Is there a way to set the dimensions/size of the box geometry after creation (possibly buried in a Mesh already too)? other then scaling etc.

I couldn't find this in the documentation if so, otherwise maybe a major feature request if not a bug there. Any thoughts on how to classify this? maybe just a documentation change.

Answer 1

If you want to scale a mesh, you have two choices: scale the mesh

mesh.scale.set( x, y, z );

or scale the mesh's geometry

mesh.geometry.scale( x, y, z );

The first method modifies the mesh's matrix transform.

The second method modifies the vertices of the geometry.

Look at the source code so you understand what each scale method is doing.

three.js r.73

Answer 2

When you instantiate a BoxGeometry object, or any other geometry for that matter, the vertices and such buffers are created on the spot using the parameters provided. As such, it is not possible to simply change a property of the geometry and have the vertices update; the entire object must be re-instantiated.

You will need to create your geometries as you have the parameters for them available. You can however create meshes without geometries, add them to a scene, and update the mesh's geometry property once you have enough information to instantiate the object. If not that, you could also set a default value at first and then scale to reach your target.

Answer 3

Technically, scaling only creates the illusion of an updated geometry and the question did say (other then scaling). So, I would say a better approach would be to reassign the geometry property of your mesh to a new geometry.

mesh.geometry = new THREE.BoxGeometry(newSize, newSize, newSize)

With this approach you can update any aspect of the geometry including width segments for example. This is especially useful when working with non box geometries like cylinders or spheres.

Here is a full working example using this approach:

let size = 10
let newSize = 20

// Create a blank geometry and make a mesh from it.
let geometry = new THREE.BoxGeometry()
let material = new THREE.MeshNormalMaterial()
let mesh = new THREE.Mesh(geometry, material)

// Adding this mesh to the scene won't display anything because ...
// the geometry has no parameters yet.
scene.add(mesh)

// Unless you intend to reuse your old geometry dispose of it...
// this will significantly reduce memory footprint.
mesh.geometry.dispose()

// Update the mesh geometry to a new geometry with whatever parameters you desire.
// You will now see these changes reflected in the scene.
mesh.geometry = new THREE.BoxGeometry(size, size, size)

// You can update the geometry as many times as you like.
// This can be done before or after adding the mesh to the scene.
mesh.geometry = new THREE.BoxGeometry(newSize, newSize, newSize)