Excuse my inexperience, I am quite new to javascript and THREE. In the code snippet below, I am attempting to add meshes to a list of objects:
geometry = new THREE.BoxGeometry( 1, 50, 1 );
for ( var i = 0, l = geometry.faces.length; i < l; i ++ ) {
var face = geometry.faces[ i ];
face.vertexColors[ 0 ] = new THREE.Color().setHSL( Math.random() * 0.3 + 0.5, 0.75, Math.random() * 0.25 + 0.75 );
face.vertexColors[ 1 ] = new THREE.Color().setHSL( Math.random() * 0.3 + 0.5, 0.75, Math.random() * 0.25 + 0.75 );
face.vertexColors[ 2 ] = new THREE.Color().setHSL( Math.random() * 0.3 + 0.5, 0.75, Math.random() * 0.25 + 0.75 );
}
for ( var i = 0; i < list.length; i=i+2 ) {
geometry.width = size_list[i];
geometry.depth = size_list[i+1];
console.log('geo');
console.log(geometry.width);
console.log(geometry.depth);
material = new THREE.MeshPhongMaterial( { specular: 0xffffff, shading: THREE.FlatShading, vertexColors: THREE.VertexColors } );
var mesh = new THREE.Mesh( geometry, material );
mesh.position.x = list[i];
mesh.position.y = 5;
mesh.position.z = list[i+1];
console.log('mesh');
console.log(mesh.geometry.width);
console.log(mesh.geometry.depth);
scene.add( mesh );
material.color.setHSL( Math.random() * 0.2 + 0.5, 0.75, Math.random() * 0.25 + 0.75 );
objects.push( mesh );
}
All the meshes are rectangles with varying sizes stored in size_list. To prevent program crashes, I have only one geometry object. When attempting to create multiple geometry objects per mesh within the loop, the browser couldn't handle it.
Instead, I modify the properties of the geometry object before creating each mesh and adding it to the object array. The values log correctly as they are changed. However, when viewing the scene, all meshes still display dimensions of (1, 50, 1) from the initial code line. My understanding of JavaScript leads me to believe the issue could be related to how it handles copies and references, but this behavior is unclear to me.
How can I effectively update the meshes without needing a new geometry object for each? And why does the current method not achieve the desired result?