1. 程式人生 > >Three.js每個面設定不同的顏色、每個面設定不同的材質

Three.js每個面設定不同的顏色、每個面設定不同的材質

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