How to change width of CubeGeometry with Three.js?

Question

I have a cube geometry and a mesh, and i don't know how to change the width (or height... i can change x, y and z though). Here's a snippet of what i have right now:

geometry = new THREE.CubeGeometry( 200, 200, 200 );
material = new THREE.MeshBasicMaterial( { color: 0xff0000, wireframe: true } );
mesh = new THREE.Mesh( geometry, material );
// WebGL renderer here

function render(){
    mesh.rotation.x += 0.01;
    mesh.rotation.y += 0.02;
    renderer.render( scene, camera );
}

function changeStuff(){
    mesh.geometry.width = 500; //Doesn't work.
    mesh.width = 500; // Doesn't work.
    geometry.width = 500; //Doesn't work.
    mesh.position.x = 500// Works!!

    render();
}

Thanks!

EDIT

Found a solution:

mesh.scale.x = 500;

CubeGeometry extends Geometry, but it uses width, height, depth properties as constructor arguments only, not as properties,so as you mentioned, mesh.scale is your solution — George Profenza, Dec 07 '11 at 00:44

score 12 · Accepted Answer · edited May 07 '21 at 05:42

Just to complete comment and solution from question (and have an answer present with example code):

// create a cube, 1 unit for width, height, depth
var geometry = new THREE.CubeGeometry(1,1,1);

// each cube side gets another color
var cubeMaterials = [ 
    new THREE.MeshBasicMaterial({color:0x33AA55, transparent:true, opacity:0.8}),
    new THREE.MeshBasicMaterial({color:0x55CC00, transparent:true, opacity:0.8}), 
    new THREE.MeshBasicMaterial({color:0x000000, transparent:true, opacity:0.8}),
    new THREE.MeshBasicMaterial({color:0x000000, transparent:true, opacity:0.8}), 
    new THREE.MeshBasicMaterial({color:0x0000FF, transparent:true, opacity:0.8}), 
    new THREE.MeshBasicMaterial({color:0x5555AA, transparent:true, opacity:0.8}), 
]; 
// create a MeshFaceMaterial, allows cube to have different materials on each face 
var cubeMaterial = new THREE.MeshFaceMaterial(cubeMaterials); 
var cube = new THREE.Mesh(geometry, cubeMaterial);

cube.position.set(0,0,0);
scene.add( cube );
cube.scale.x = 2.5; // SCALE
cube.scale.y = 2.5; // SCALE
cube.scale.z = 2.5; // SCALE

A slightly advanced, dynamic example (still the same scaling) implemented here:

score 7 · Answer 2 · answered Apr 23 '19 at 12:45

7

You can dispose the geometry of cube and affect the new one like this :

let new_geometry = new THREE.CubeGeometry(500,200,200);
geometry.dispose();
cube.geometry = new_geometry;

answered Apr 23 '19 at 12:45

houssk

146
1
7

This is the best answer, scaling only creates the illusion of an updated geometry. With this approach you can update any aspect of the geometry including width segments for example. This is especially useful when working with non cube geometries like cylinders or spheres. – Jacob Philpott Mar 20 '22 at 11:50
My only addition would be that `geometry.dispose()` is not entirely necessary. You could skip that step and go straight to `cube.geometry = new_geometry` and it will overwrite the existing geometry. – Jacob Philpott Mar 20 '22 at 11:52
@JacobPhilpott Your statement is false. `geometry.dispose()` is necessary. three.js r.138. – WestLangley Mar 21 '22 at 14:24
@WestLangley well it's not necessary with the version i'm using and I don't think it should be ... either way, it's the difference of one line of code. – Jacob Philpott Mar 21 '22 at 20:02

score 2 · Answer 3 · answered Apr 25 '16 at 08:06

Scale properties can be used to for changing width, height and and depth of cube.

    //creating a cube 
    var geometry = new THREE.BoxGeometry(1,1,1);
    var material = new THREE.MeshBasicMaterial({color:"white"});
    var cube = new THREE.Mesh(geometry, material);


    //changing size of cube which is created.
    cube.scale.x = 30;
    cube.scale.y = 30;
    cube.scale.z = 30;

How to change width of CubeGeometry with Three.js?

3 Answers3

Linked