Possibly dumb question but here goes. Three.js geometries have 'parameter' feilds associated with them, see the box geometry here...

box Geometry parameters

I am trying to update these parameters like this...

var nodeSize = 10;
var geometry = new THREE.CubeGeometry(nodeSize, nodeSize, nodeSize);
mesh = new THREE.Mesh(geometry, new THREE.MeshNormalMaterial({side:THREE.DoubleSide}));

scene.add(mesh);
mesh.geometry.parameters.depth=20;

But of course, the geometry remains unchanged. Is there a way of updating the geometry by editing these parameters?

fiddle here /

Any help appreciated!

Possibly dumb question but here goes. Three.js geometries have 'parameter' feilds associated with them, see the box geometry here...

box Geometry parameters

I am trying to update these parameters like this...

var nodeSize = 10;
var geometry = new THREE.CubeGeometry(nodeSize, nodeSize, nodeSize);
mesh = new THREE.Mesh(geometry, new THREE.MeshNormalMaterial({side:THREE.DoubleSide}));

scene.add(mesh);
mesh.geometry.parameters.depth=20;

But of course, the geometry remains unchanged. Is there a way of updating the geometry by editing these parameters?

fiddle here https://jsfiddle/kn3owveg/2/

Any help appreciated!

• javascript
• three.js

• what are you trying to do by changing the depth field? that information could be helpful – Giovazz89 Commented Dec 2, 2016 at 14:00
• Thanks for your help @Giovazz89, I have made a fiddle from the answers received jsfiddle/henryJack/kn3owveg/6 – henryJack Commented Dec 6, 2016 at 13:56
• 2 ... NOT a dumb question by any measure – kandinski Commented Oct 8, 2018 at 7:09
• I would use geometry reassignment rather than scaling, for details on how this is achieved see my answer. – jgphilpott Commented Mar 20, 2022 at 12:25

3 Answers 3

parameters.depth is only used at geometry construction time. it has no effect when modifying it. you can think of it as read only.

Use the example at BoxGeometry and the gui on the right to see how to achieve what you want.

Technically, scaling only creates the illusion of an updated geometry. I would say a better approach would be to reassign the geometry value of your mesh to a new geometry.

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

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

Here is a full rework of your original code using this approach, really only the last line has changed:

var nodeSize = 10;
var geometry = new THREE.CubeGeometry(nodeSize, nodeSize, nodeSize);
mesh = new THREE.Mesh(geometry, new THREE.MeshNormalMaterial({side: THREE.DoubleSide}));

scene.add(mesh);
mesh.geometry = new THREE.CubeGeometry(nodeSize, nodeSize, 20);

Update:

Before assigning the new geometry you should always dispose of the old geometry to free up GPU resources. This can be done using the built-in disposal method. Simply add a line like this before assigning the new geometry:

mesh.geometry.dispose()

Gaitat is totally right, you can't change geometry with changing of parameters.

And there can be another solution. With scaling of your cube.

function setSize( myMesh, xSize, ySize, zSize){
  scaleFactorX = xSize / myMesh.geometry.parameters.width;
  scaleFactorY = ySize / myMesh.geometry.parameters.height;
  scaleFactorZ = zSize / myMesh.geometry.parameters.depth;
  myMesh.scale.set( scaleFactorX, scaleFactorY, scaleFactorZ );
}
...
setSize(mesh, 10, 10, 20);

jsfiddle example