Three.js每個面設定不同的顏色、每個面設定不同的材質
阿新 • • 發佈:2018-12-22
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);