时间戳

首页 > 解决方案 > Three.js：更改一个网格的材质会更改场景中的所有材质

javascript - Three.js：更改一个网格的材质会更改场景中的所有材质

问题描述

我正在尝试从数组中随机选择我的场景中的三个 JS 中的网格，在我的场景中选择看起来像网格的东西并编辑它的属性，似乎会影响整个场景，即它会改变所有网格的颜色，但是，在这个例子中我没有合并任何多边形。关于我做错了什么以选择随机一个>的任何想法？

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

            
        }

下面的小提琴说明：

https://jsfiddle.net/60j5z9w3/

你会看到所有的建筑物都会改变颜色，而我预计只有一个会改变。

标签： javascriptthree.js

解决方案

问题源于您的material变量。您只对所有建筑物使用一种材料，因此当您更改其中一个的颜色时，您会更改所有的颜色。为清楚起见，这是您的代码的简化版本：

// 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 );

如果您打算单独更改它们，则需要为每个网格创建一个新材质。

推荐阅读