於上一篇"[ThreeJS] 初心者入門 (二) ─ 幾何 Geometry"，介紹了ThreeJS的基礎模型，那麼這篇我們就來實作如何利用基礎模型建立模型吧！
在建立模型之前，我們先建立一個新的群組容器，這樣之後在建立好各部位模型之後才可以連動一起動作。
const group = new THREE.Group(); //建立群組容器接著，我們就可以開始建立羊咩咩的模型了，首先是身體。範例如下：
const bodyGeometry = new THREE.IcosahedronGeometry(1.7, 0); //身體模型
const body = new THREE.Mesh(bodyGeometry, woolMaterial); //身體模型綁定材質
body.castShadow = true;
body.receiveShadow = true;
group.add(body); //將身體模型加入至群組容器裡緊接著我們繼續製作牠的整個頭部，頭的物件比較多，所以我們也一樣建立一個群組容器。範例如下：
const head = new THREE.Group(); //建立名為head的群組容器製作臉部上緣。
const foreheadGeometry = new THREE.BoxGeometry(0.7, 0.6, 0.7); //臉上緣模型
const forehead = new THREE.Mesh(foreheadGeometry, skinMaterial); //臉上緣模型綁定材質
forehead.castShadow = true;
forehead.receiveShadow = true;
forehead.position.y = -0.15;
head.add(forehead); //將臉部上緣模型加入至head裡製作臉部下緣。
const faceGeometry = new THREE.CylinderGeometry(0.5, 0.15, 0.4, 4, 1); //臉下緣模型
const face = new THREE.Mesh(faceGeometry, skinMaterial); //臉下緣模型綁定材質
face.castShadow = true;
face.receiveShadow = true;
face.position.y = -0.65;
face.rotation.y = 45 * (Math.PI / 180); //x軸旋轉角度
head.add(face); //將臉部下緣模型加入至head裡製作頭部。
const woolGeometry = new THREE.BoxGeometry(0.84, 0.46, 0.9); //頭模型
const wool = new THREE.Mesh(woolGeometry, woolMaterial); //頭模型綁定材質
wool.position.set(0, 0.12, 0.07);
wool.rotation.x = 20 * (Math.PI / 180); //x軸旋轉角度
head.add(wool); //將頭部模型加入至head裡製作眼睛。
const rightEyeGeometry = new THREE.CylinderGeometry(0.08, 0.1, 0.06, 6); //右眼模型
const rightEye = new THREE.Mesh(rightEyeGeometry, darkMaterial); //右眼模型綁定材質
rightEye.castShadow = true;
rightEye.receiveShadow = true;
rightEye.position.set(0.35, -0.48, 0.33);
rightEye.rotation.set(rad(130.8), 0, rad(-45));
head.add(rightEye); //將右眼模型加入至head裡因為眼睛是一對的，所以我們可以利用建立好的右眼模型，複製一份成為左眼。
const leftEye = rightEye.clone(); //複製右眼成為左眼
leftEye.position.x = -rightEye.position.x;
leftEye.rotation.z = -rightEye.rotation.z;
head.add(leftEye); //將左眼模型加入至head裡接著，我們製作牠的耳朵，耳朵也跟眼睛一樣，是一對的，我們依然可以利用製作好的右耳，複製一份成為左耳。
const rightEarGeometry = new THREE.BoxGeometry(0.12, 0.5, 0.3); //右耳模型
rightEarGeometry.translate(0, -0.25, 0);
const rightEar = new THREE.Mesh(rightEarGeometry, skinMaterial); //右耳模型綁定材質
rightEar.castShadow = true;
rightEar.receiveShadow = true;
rightEar.position.set(0.35, -0.12, -0.07);
rightEar.rotation.set(rad(20), 0, rad(50));
head.add(rightEar); //將右耳模型加入至head裡const leftEar = rightEar.clone(); //複製右耳成為左耳
leftEar.position.x = -rightEar.position.x;
leftEar.rotation.z = -rightEar.rotation.z;
head.add(leftEar); //將左耳模型加入至head裡
然後我們把製作好的整個頭部群組調整到適當的位置，並與身體部位群組。
head.position.set(0, 0.65, 1.6); //set整個頭模型位置
head.rotation.x = -20 * (Math.PI / 180); //x軸旋轉角度
group.add(head); //將頭部與其他部位群組接著我們製作牠的腳，腳有前後兩對，我們就運用剛剛製作眼睛、耳朵的方法，製作一隻腳然後複製成四份，並與身體模型、頭部模型群組。
const legGeometry = new THREE.CylinderGeometry(0.3, 0.15, 1, 4); //腳模型
legGeometry.translate(0, -0.5, 0);
const frontRightLeg = new THREE.Mesh(legGeometry, darkMaterial);//右前腳模型綁定素材
frontRightLeg.castShadow = true;
frontRightLeg.receiveShadow = true;
frontRightLeg.position.set(0.7, -0.8, 0.5);
frontRightLeg.rotation.x = rad(-12);
group.add(frontRightLeg);const frontLeftLeg = frontRightLeg.clone(); //複製右前腳模型成為左前腳
frontLeftLeg.position.x = -frontRightLeg.position.x;
frontLeftLeg.rotation.z = -frontRightLeg.rotation.z;
group.add(frontLeftLeg);const backRightLeg = frontRightLeg.clone(); //複製右前腳模型成為右後腳
backRightLeg.position.z = -frontRightLeg.position.z;
backRightLeg.rotation.x = -frontRightLeg.rotation.x;
group.add(backRightLeg);const backLeftLeg = frontLeftLeg.clone(); //複製左前腳模型成為左後腳
backLeftLeg.position.z = -frontLeftLeg.position.z;
backLeftLeg.rotation.x = -frontLeftLeg.rotation.x;
group.add(backLeftLeg);
scene.add(group); //把整個羊咩咩模型建立至場景
這樣我們就完成了一隻可愛的羊咩咩模型啦！
