why three.js updates geometry only when new geometry is defined?

Question

I have a question about updating geometry in three.js using dat.gui.

I expected I could update the geometry by updating the value tied into the geometry by object as below.

gui.add(parameter, 'width')
    .min(1)
    .max(10)
    .step(0.1)
    .name('cubeWidth')
    .onChange((value) => {
        mesh.geometry.dispose();

        geometry.parameters.width = parameter.width
        console.log(mesh)

    })

However, it updates the geometry only when I redefine the geometry like below.

mesh.geometry = new THREE.BoxGeometry(parameter.width, 1, 1);

It's bit weird to me because even when I log the geometry data both shows the updated width value like below.

Why does only the first approach work while the other one not work?

Answer 1

geometry.parameters.width = parameter.width

This has no effect. Parameters are only processed when a geometry is created. The parameters property is in fact read-only.

The solution for your issue is indeed to recreate the geometry with the new set of parameters.