Estoy tratando de seleccionar aleatoriamente una malla en mi escena dentro de TRES JS de una matriz, seleccionando lo que parece ser una malla dentro de mi escena y editando sus propiedades, parece afectar toda la escena, es decir, cambia el color de todas las mallas. , sin embargo, en este ejemplo no he fusionado ningún polígono. ¿Alguna idea sobre lo que estoy haciendo mal para seleccionar uno al azar>?
var buildingObjs = []; for ( var i = 0; i < 20; i ++ ) { var geometry = new THREE.BoxGeometry( 1, 1, 1 ); geometry.applyMatrix( new THREE.Matrix4().makeTranslation( 0, 0.5, 0 ) ); var building = new THREE.Mesh( geometry, material ); var geo = new THREE.EdgesGeometry( building.geometry ); // or WireframeGeometry var mat = new THREE.LineBasicMaterial( { color: 0xcfcfcf } ); var wireframe = new THREE.LineSegments( geo, mat ); building.add( wireframe ); var value = 1 - Math.random() * Math.random(); var color = new THREE.Color().setRGB( value + Math.random() * 0.1, value, value + Math.random() * 0.1 ); var top = color.clone().multiply( light ); var bottom = color.clone().multiply( shadow ); building.position.x = Math.floor( Math.random() * 200 - 100 ) * 10; building.position.z = Math.floor( Math.random() * 200 - 100 ) * 10; building.rotation.y = Math.random(); building.scale.x = building.scale.z = Math.random() * Math.random() * Math.random() * Math.random() * 50 + 10; building.scale.y = ( Math.random() * Math.random() * Math.random() * building.scale.x ) * 8 + 8; buildingObjs.push(building); scene.add(building); } function randomBuildingSelector() { var randomBuilding = buildingObjs[Math.floor(Math.random()*buildingObjs.length)]; return randomBuilding; } function startAniLabels() { var selectedMesh = undefined; var tt = setInterval(function(){ selectedMesh = randomBuildingSelector(); console.log(selectedMesh); selectedMesh.material.color.setHex( 0x333333 ); }, 5000); }A continuación, el violín ilustra:
https://jsfiddle.net/60j5z9w3/
Verás que todos los edificios cambian de color, mientras que espero que solo cambie uno.
El problema surge de su variable material . Estás usando un solo material para todos los edificios, así que cuando cambias el color de uno, cambias el color de todos. Esta es una versión simplificada de su código para mayor claridad:
// Create 1 material var material = new THREE.MeshPhongMaterial(); for (var i = 0; i < 2000; i++) { var geometry = new THREE.BoxGeometry( 1, 1, 1 ); // Use that same material on 2000 meshes var building = new THREE.Mesh( geometry, material ); } // This is changing the color of the only material, // effectively changing the color of all meshes buildingObjs[500].material.color.setHex( 0x333333 );Necesitará crear un nuevo material para cada malla si planea cambiarlos individualmente.