Three.js每个面设置不同的颜色、每个面设置不同的材质

版权声明： https://blog.csdn.net/niuge8905/article/details/85201276

1.每个面设置不同的颜色

            let geometry = new THREE.BoxGeometry( 1000, 1000, 1000);

            for(let i = 0;i<geometry.faces.length;i++){
                let hex = Math.random() * 0xffffff;
                geometry.faces[ i ].color.setHex( hex );
            }            

            let material = new THREE.MeshBasicMaterial( {
            vertexColors: THREE.FaceColors
            } );

            let mesh=new THREE.Mesh(geometry,material);
            scene.add(mesh);

效果

2.每个面设置不同的材质

            var geometry = new THREE.BoxGeometry( 1000, 1000, 1000);
            let mats=[];

            for(var i = 0;i<geometry.faces.length;i++){
                let material = new THREE.MeshBasicMaterial({ color: new THREE.Color(Math.random() * 0xffffff)});
                mats.push(material);
            }

            let mesh=new THREE.Mesh(geometry,mats);
            
            scene.add(mesh);
            objects.push(mesh);

效果：

但是这里还是看不太懂怎么赋予的材质，通过F12可以发现，实际上是给每个面增加了一个材质的索引。

搞懂这个原理后，我们就明白怎么控制面的颜色了，举个例子，比如一个立方体，我们需要把他第一个面设置为一个颜色，其他的面都设置为同一个颜色：

            var geometry = new THREE.BoxGeometry( 1000, 1000, 1000);
            let mats=[];

            for(var i = 0;i<geometry.faces.length;i++){
                let material = new THREE.MeshBasicMaterial({ color: new THREE.Color(Math.random() * 0xffffff)});
                mats.push(material);
            }

            let mesh=new THREE.Mesh(geometry,mats);
            
            for(let j=0;j< geometry.faces.length;j++){
                if(j>1){
                    geometry.faces[j].materialIndex=1;
                }
            }
            
            scene.add(mesh);
            objects.push(mesh);