還記得"[ThreeJS] 初心者入門 (三) ─ 幾何 Geometry 應用"裡的可愛羊咩咩模型嗎？
這篇我們就把牠加上材質，讓牠更可愛吧！
這邊我們選用比較新形態的MeshStandardMaterial材質，這種材質使用更複雜的算法，能讓物體更真實。首先，我們設定羊毛顏色為白色，粗糙度設為1最高，這樣可以使羊毛為全漫射狀態，這種狀態完全沒有鏡面高光，可以製造出柔軟的塑膠玩具質感，然後著色方式選用單色平面著色，保留模型菱角的狀態。
const woolMaterial = new THREE.MeshStandardMaterial({
color: 0xffffff,
roughness: 1,
shading: THREE.FlatShading
}); //毛的材質const body = new THREE.Mesh(bodyGeometry, woolMaterial); //身體模型綁定材質
接著設定皮膚的顏色為膚色、粗糙度依然設定為1，著色方式維持單色平面著色，保留模型菱角的狀態。
const skinMaterial = new THREE.MeshStandardMaterial({
color: 0xffaf8b,
roughness: 1,
shading: THREE.FlatShading
}); //皮膚的材質const forehead = new THREE.Mesh(foreheadGeometry, skinMaterial); //臉上緣模型綁定材質const face = new THREE.Mesh(faceGeometry, skinMaterial); //臉下緣模型綁定材質const rightEar = new THREE.Mesh(rightEarGeometry, skinMaterial); //右耳模型綁定材質
最後設定眼睛與四肢的顏色為深色、粗糙度與著色方式也維持不變，然後綁定在模型上。
const rightEyeGeometry = new THREE.CylinderGeometry(0.08, 0.1, 0.06, 6); //右眼模型
const legGeometry = new THREE.CylinderGeometry(0.3, 0.15, 1, 4); //腳模型const rightEye = new THREE.Mesh(rightEyeGeometry, darkMaterial); //右眼模型綁定材質
const frontRightLeg = new THREE.Mesh(legGeometry, darkMaterial);//右前腳模型綁定素材
如果沒有打上光源模型會呈現一片黑暗，為了讓大家看到貼上材質之後的模樣，我們這邊先打上燈光。
最後再用渲染器渲染出來，這樣我們就完成一隻帶有柔軟材質的可愛羊咩咩了。
