CODEWITHSUNDEEP
javascriptthree.js
henryJack
henryJack

Reputation: 4614

three.js Cube Geometry - how to update parameters?

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.net/kn3owveg/2/

Any help appreciated!

Upvotes: 5

Views: 4352

Answers (3)

jgphilpott
jgphilpott

Reputation: 649

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()

Upvotes: 1

gaitat
gaitat

Reputation: 12632

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.

Upvotes: 2

prisoner849
prisoner849

Reputation: 17586

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

Upvotes: 0

Related Questions