因為已經有了夾娃娃機模型，今天將用不到的網格們刪除，並在加入一個物件供夾取

程式碼

設定物件位置

let piske_init_x = 1.5
let piske_init_y = 5.1
let piske_init_z = 0

建立物件貼圖

class Piske{
    constructor(){
        const headGeo = new THREE.BoxGeometry(1.5, 1, 1);

        //設定 Piske 圖案
        const headTexture = new THREE.TextureLoader().load('images/Piske_face.jpg')
        const bodyTexture = new THREE.TextureLoader().load('images/Piske_body.jpg')

        // 只給一面有臉
        const headMaterials = []
        for (let i = 0; i < 6; i++) {
            let map

            if (i === 4){
                map = headTexture
            }
            else map = bodyTexture

            headMaterials.push(new THREE.MeshStandardMaterial({ map: map }))
        }

        //設定部位
        this.head = new THREE.Mesh(headGeo,headMaterials)
        this.head.position.set(0,0,0)

        // 組合
        this.piske = new THREE.Group()
        this.piske.add(this.head)

        this.piske.traverse(function(object) {
            if (object instanceof THREE.Mesh) {
              object.castShadow = true
              object.receiveShadow = true
            }
        })
    }
}

創建 function 將物件加入場景

function createPiske(){
    piskeObj = new Piske()
    scene.add(piskeObj.piske)
}

Init() 處呼叫function

function init(){
        ///
    createPiske()
        ///
}

建立物件剛體

function initObjectCannon(obj_x,obj_y,obj_z){
  // 建立 A 剛體 
    let ObjAShape = new CANNON.Box(new CANNON.Vec3(0.75, 0.1, 0.5))
    ObjACM = new CANNON.Material()
    ObjABody = new CANNON.Body({
      mass: 1,
      shape: ObjAShape,
      position: new CANNON.Vec3(obj_x,obj_y+0.4,obj_z),
      material: ObjACM,
    })
    world.add(ObjABody) 
    
    // 建立 B 剛體 
    let ObjBShape = new CANNON.Box(new CANNON.Vec3(0.75, 0.1, 0.5))
    let ObjBCM = new CANNON.Material()
    ObjBBody = new CANNON.Body({
      mass: 1,
      shape: ObjBShape,
      position: new CANNON.Vec3(obj_x, obj_y-0.4, obj_z),
      material: ObjBCM,
    })
    world.add(ObjBBody)
    
    // 建立 C 剛體
    let ObjCShape = new CANNON.Box(new CANNON.Vec3(0.25, 0.3, 0.25))
    let ObjCCM = new CANNON.Material()
    ObjCBody = new CANNON.Body({
      mass: 1,
      shape: ObjCShape,
      position: new CANNON.Vec3(obj_x, obj_y, obj_z),
      material: ObjCCM,
    })
    world.add(ObjCBody)
    
    // Obj 剛體組裝
    ObjBodyJoint1 = new CANNON.LockConstraint(ObjABody,ObjBBody)
    world.addConstraint(ObjBodyJoint1)
    ObjBodyJoint2 = new CANNON.LockConstraint(ObjBBody,ObjCBody)
    world.addConstraint(ObjBodyJoint2)
}

複製剛體位址到物體位置

function render() {
   			…
    piskeObj.piske.position.copy(ObjCBody.position)
    piskeObj.piske.quaternion.copy(ObjCBody.quaternion)
}

成果

Day26 Demo | Github