day26.js

let scene, renderer, camera
let cameraControl, stats, gui
let Speed = 0

// Cannon.js
var world
let groundBody,groundCM,gripperRGroup,gripperRCM
let friction = 0.5
let restitution = 0.7

// Usagi初始位置
let usagi_init_x = -1
let usagi_init_y = 5.1
let usagi_init_z = 0

// Piske初始位置
let piske_init_x = 1.5
let piske_init_y = 5.1
let piske_init_z = 0

// 夾爪初始位置
let gripperR_init_x = -3.8
let gripperR_init_y = 8.5
let gripperR_init_z = 1
let gripperL_init_x = -6.8
let gripperL_init_y = 8.5
let gripperL_init_z = 1


class Usagi{
    constructor(){
        const headGeo = new THREE.BoxGeometry(1.5, 1, 1);
        const earGeo = new THREE.BoxGeometry(0.25, 0.75, 0.25);

        //設定 Usagi 圖案
        const headTexture = new THREE.TextureLoader().load('images/Usagi_face.jpg')
        const earTexture = new THREE.TextureLoader().load('images/Usagi_ear.jpg')
        
        // 每一面同圖案
        const earMaterial = new THREE.MeshLambertMaterial({map:earTexture})

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

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

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

        //設定部位
        this.head = new THREE.Mesh(headGeo,headMaterials)
        this.head.position.set(0,0,0)
        this.ear1 = new THREE.Mesh(earGeo,earMaterial)
        this.ear1.position.set(-0.25,0.5,0)
        this.ear2 = new THREE.Mesh(earGeo,earMaterial)
        this.ear2.position.set(0.25,0.5,0)

        // 組合
        this.usagi = new THREE.Group()
        this.usagi.add(this.head)
        this.usagi.add(this.ear1)
        this.usagi.add(this.ear2)

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

// 加入場景
function createUsagi(){
    usagiObj = new Usagi()
    scene.add(usagiObj.usagi)
}

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 createPiske(){
    piskeObj = new Piske()
    scene.add(piskeObj.piske)
}
  
// 建立監測器
function initStats() {
    const stats = new Stats()
    stats.setMode(0)
    document.getElementById('stats').appendChild(stats.domElement)
    return stats
}

// 初始化
function init() {
    scene = new THREE.Scene()
    camera = new THREE.PerspectiveCamera(
      40,
      window.innerWidth / window.innerHeight,
      0.1,
      1000
    )
    camera.position.set(0, 10, 30)
    camera.lookAt(scene.position)
  
    statsUI = initStats()

    // 建立渲染器
    renderer = new THREE.WebGLRenderer()
    renderer.setSize(window.innerWidth, window.innerHeight)
    // 設定背景顏色
    renderer.setClearColor(0xeeeeee, 1.0)
    renderer.shadowMap.enabled = true
    renderer.outputEncoding = THREE.sRGBEncoding;

    // 陰影貼圖種類   
    renderer.shadowMap.type = 2
        
    // 設置環境光提供輔助柔和白光
    let ambientLight = new THREE.AmbientLight(0x404040)
    scene.add(ambientLight)
    // 設置聚光燈幫忙照亮物體
    let spotLight = new THREE.SpotLight(0xf0f0f0)
    spotLight.position.set(-10, 30, 20)
    scene.add(spotLight)

    // 建立光源
    let pointLight = new THREE.PointLight(0xccffcc, 1, 100)
    pointLight.castShadow = true // 投影
    pointLight.position.set(-30, 30, 30)
    scene.add(pointLight)
  
    //建立軌道控制器   
    cameraControl = new THREE.OrbitControls(camera, renderer.domElement)
    // 啟用阻尼效果
    cameraControl.enableDamping = true
    // 阻尼系數
    cameraControl.dampingFactor = 0.05
  
    //物件加入場景   
    createUsagi()
    createPiske()
    base_loader()
    glass_outer_loader()
    roof_loader()
    
  // 將渲染器的 DOM 綁到網頁上
  document.body.appendChild(renderer.domElement)
}

function initCannon(){
  // 建立Cannon世界
  world = new CANNON.World()
  // 設定重力場為 y 軸 -9.8 m/s²
  world.gravity.set(0, -9.8, 0)
  // 碰撞偵測
  world.broadphase = new CANNON.NaiveBroadphase()

  // 建立地板剛體
  let groundShape = new CANNON.Plane()
  groundCM = new CANNON.Material()
  groundBody = new CANNON.Body({
    mass: 0,
    shape: groundShape,
    material: groundCM
  })
  // setFromAxisAngle 地板沿著X軸轉90度
  groundBody.quaternion.setFromAxisAngle(new CANNON.Vec3(1, 0, 0), -Math.PI / 2)
  world.add(groundBody)

  // 地板網格
  let groundGeometry = new THREE.PlaneGeometry(30, 30, 30)
  let groundtexture = new THREE.TextureLoader().load('images/map.png')
  let groundMaterial = new THREE.MeshLambertMaterial({
    map:groundtexture,side: THREE.DoubleSide,
  })
  let ground = new THREE.Mesh(groundGeometry, groundMaterial)
  ground.rotation.x = -Math.PI / 2
  ground.receiveShadow = true
  scene.add(ground)

  // gripperR 剛體
  let gripperRShape = new CANNON.Box(new CANNON.Vec3(0.6, 0.1, 0.3))
  gripperRCM = new CANNON.Material()
  gripperRBody = new CANNON.Body({
    mass: 0,
    shape: gripperRShape,
    position: new CANNON.Vec3(gripperR_init_x, gripperR_init_y, gripperR_init_z),
    material: gripperRCM
  })
  world.add(gripperRBody)

  // gripperR 網格
  const gripperRGeo = new THREE.BoxGeometry(1.2, 0.2, 0.6);
  const gripperRMat = new THREE.MeshPhongMaterial({
    color: 0x4287f5,
  });
  gripperR = new THREE.Mesh(gripperRGeo, gripperRMat);
  gripperR.castShadow = true
  scene.add(gripperR);

  // gripperRTop 剛體
  let gripperRTopShape = new CANNON.Box(new CANNON.Vec3(0.2, 0.5, 0.25))
  gripperRTopCM = new CANNON.Material()
  gripperRTopBody = new CANNON.Body({
    mass: 5,
    shape: gripperRTopShape,
    position: new CANNON.Vec3(gripperR_init_x+0.4, gripperR_init_y+0.5, gripperR_init_z),
    material: gripperRTopCM
  })
  world.add(gripperRTopBody)

  // gripperRTop 網格
  const gripperRTopGeo = new THREE.BoxGeometry(0.4, 1, 0.5);
  const gripperRTopMat = new THREE.MeshPhongMaterial({
    color: 0x4287f5,
  });
  gripperRTop = new THREE.Mesh(gripperRTopGeo, gripperRTopMat);
  gripperRTop.castShadow = true
  scene.add(gripperRTop)

  // gripperR 網格組裝   
  gripperRBodyJoint = new CANNON.LockConstraint(gripperRBody,gripperRTopBody)
  world.addConstraint(gripperRBodyJoint)

  // gripperL剛體
  let gripperLShape = new CANNON.Box(new CANNON.Vec3(0.6, 0.1, 0.25))
  let gripperLCM = new CANNON.Material()
  gripperLBody = new CANNON.Body({
    mass: 0,
    shape: gripperLShape,
    position: new CANNON.Vec3(gripperL_init_x, gripperL_init_y, gripperL_init_z),
    material: gripperLCM,
  })
  world.add(gripperLBody)

  // gripperL網格
  const gripperLGeo = new THREE.BoxGeometry(1.2, 0.2, 0.5);
  const gripperLMat = new THREE.MeshPhongMaterial({
    color: 0x4287f5,
  });
  gripperL = new THREE.Mesh(gripperLGeo, gripperLMat);
  gripperL.castShadow = true
  scene.add(gripperL);

  // gripperLTop 剛體
  let gripperLTopShape = new CANNON.Box(new CANNON.Vec3(0.2, 0.5, 0.25))
  gripperLTopCM = new CANNON.Material()
  gripperLTopBody = new CANNON.Body({
    mass: 5,
    shape: gripperLTopShape,
    position: new CANNON.Vec3(gripperL_init_x-0.4, gripperL_init_y+0.5, gripperL_init_z),
    material: gripperLTopCM
  })
  world.add(gripperLTopBody)

  // gripperLTop 網格
  const gripperLTopGeo = new THREE.BoxGeometry(0.4, 1, 0.5);
  const gripperLTopMat = new THREE.MeshPhongMaterial({
    color: 0x4287f5,
  });
  gripperLTop = new THREE.Mesh(gripperLTopGeo, gripperLTopMat);
  gripperLTop.castShadow = true
  scene.add(gripperLTop)

  // gripperL 網格組裝
  gripperLBodyJoint = new CANNON.LockConstraint(gripperLBody,gripperLTopBody)
  world.addConstraint(gripperLBodyJoint)
}

function initClawMachineCannon(){  
    // 建立機台夾層地板剛體 
    let machineBottom = new CANNON.Box(new CANNON.Vec3(3.5, 0.1, 3))
    let machineBottomMaterial = new CANNON.Material()
    machineBottomBody = new CANNON.Body({
        shape: machineBottom,
        position: new CANNON.Vec3(-0.5, 4.5, 0),
        material: machineBottomMaterial,
    })
    world.add(machineBottomBody)

    // 右牆壁剛體
    let wallshape = new CANNON.Box(new CANNON.Vec3(0.1, 2.7, 3))
    let wallMaterial = new CANNON.Material()
    wallBody = new CANNON.Body({
        shape: wallshape,
        position: new CANNON.Vec3(3, 7.2, 0),
        material: wallMaterial,
    })
    world.add(wallBody)

    // 左牆壁剛體
    let wallLshape = new CANNON.Box(new CANNON.Vec3(0.1, 4.5, 3))
    let wallLMaterial = new CANNON.Material()
    wallLBody = new CANNON.Body({
        shape: wallLshape,
        position: new CANNON.Vec3(-7.5, 5.4, 0),
        material: wallLMaterial,
    })
    world.add(wallLBody)

    // 檔板剛體
    let swallshape = new CANNON.Box(new CANNON.Vec3(0.1, 2.5, 3))
    let swallMaterial = new CANNON.Material()
    swallBody = new CANNON.Body({
        shape: swallshape,
        position: new CANNON.Vec3(-4, 3.4, 0),
        material: swallMaterial,
    })
    world.add(swallBody)

    // 掉落物地板剛體
    let floorshape = new CANNON.Box(new CANNON.Vec3(1.8, 0.1, 3))
    let floorMaterial = new CANNON.Material()
    floorBody = new CANNON.Body({
        shape: floorshape,
        position: new CANNON.Vec3(-5.8, 1, 0),
        material: floorMaterial,
    })
    world.add(floorBody)

    // 背板剛體
    let backwallshape = new CANNON.Box(new CANNON.Vec3(5.2, 2.8, 0.1))
    let backwallMaterial = new CANNON.Material()
    backwallBody = new CANNON.Body({
        shape: backwallshape,
        position: new CANNON.Vec3(-2.2, 7.1, -3),
        material: backwallMaterial,
    })
    world.add(backwallBody)

    // 前玻璃剛體
    let frontwallshape = new CANNON.Box(new CANNON.Vec3(5.2, 2.8, 0.1))
    let frontwallMaterial = new CANNON.Material()
    frontwallBody = new CANNON.Body({
        shape: frontwallshape,
        position: new CANNON.Vec3(-2.2, 7.1, 3),
        material: frontwallMaterial,
    })
    world.add(frontwallBody)
}

function initUsagiCannon(){
// 建立Usagi A 剛體 Sphere(radius)
  let UsagiAShape = new CANNON.Box(new CANNON.Vec3(0.75, 0.1, 0.5))
  UsagiACM = new CANNON.Material()
  UsagiABody = new CANNON.Body({
    mass: 1,
    shape: UsagiAShape,
    position: new CANNON.Vec3(usagi_init_x,usagi_init_y+0.4,usagi_init_z),
    material: UsagiACM,
  })
  world.add(UsagiABody) 

  // 建立Usagi B 剛體 Sphere(radius)
  let UsagiBShape = new CANNON.Box(new CANNON.Vec3(0.75, 0.1, 0.5))
  let UsagiBCM = new CANNON.Material()
  UsagiBBody = new CANNON.Body({
    mass: 1,
    shape: UsagiBShape,
    position: new CANNON.Vec3(usagi_init_x, usagi_init_y-0.4, usagi_init_z),
    material: UsagiBCM,
  })
  world.add(UsagiBBody)

  // 建立Usagi C 剛體 Sphere(radius)
  let UsagiCShape = new CANNON.Box(new CANNON.Vec3(0.25, 0.3, 0.25))
  let UsagiCCM = new CANNON.Material()
  UsagiCBody = new CANNON.Body({
    mass: 1,
    shape: UsagiCShape,
    position: new CANNON.Vec3(usagi_init_x, usagi_init_y, usagi_init_z),
    material: UsagiCCM,
  })
  world.add(UsagiCBody)

  // Usagi 剛體組裝
  UsagiBodyJoint1 = new CANNON.LockConstraint(UsagiABody,UsagiBBody)
  world.addConstraint(UsagiBodyJoint1)
  UsagiBodyJoint2 = new CANNON.LockConstraint(UsagiBBody,UsagiCBody)
  world.addConstraint(UsagiBodyJoint2)
}

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

const timeStep = 1.0 / 60.0 // seconds

function render() {
    world.step(timeStep)
    // 複製剛體位址到物體位置
    usagiObj.usagi.position.copy(UsagiCBody.position)
    usagiObj.usagi.quaternion.copy(UsagiCBody.quaternion)

    piskeObj.piske.position.copy(ObjCBody.position)
    piskeObj.piske.quaternion.copy(ObjCBody.quaternion)

    statsUI.update()
    TWEEN.update()
    cameraControl.update()

    requestAnimationFrame(gripper_load)
    requestAnimationFrame(render)

    renderer.render(scene, camera)
}

function gripper_load(){
  gripperRTop.position.copy(gripperRTopBody.position)
  gripperRTop.quaternion.copy(gripperRTopBody.quaternion)

  gripperR.position.copy(gripperRBody.position)
  gripperR.quaternion.copy(gripperRBody.quaternion)

  gripperLTop.position.copy(gripperLTopBody.position)
  gripperLTop.quaternion.copy(gripperLTopBody.quaternion)

  gripperL.position.copy(gripperLBody.position)
  gripperL.quaternion.copy(gripperLBody.quaternion)
}

function click_Gripper(){
    console.log("click_Gripper")

    initR_x = gripperRBody.position.x
    initR_z = gripperRBody.position.z
    initR_y = gripperRBody.position.y
    initL_x = gripperLBody.position.x
    initL_z = gripperLBody.position.z
    initL_y = gripperLBody.position.y

    // R
    let offsetR = {x:initR_x,z:initR_z,y:initR_y}
    let DownTargetR = {x:initR_x,z:initR_z,y:initR_y-3.5}
    let MoveTargetR = {x:initR_x-0.65,z:initR_z,y:initR_y-3.5}
    let UpTargetR = {x:initR_x-0.65,z:initR_z,y:initR_y}
    let OriginR = {x:gripperR_init_x-0.65,z:gripperR_init_z,y:gripperR_init_y}
    let ReleaseTargetR = {x:gripperR_init_x,z:gripperR_init_z,y:gripperR_init_y}

    // L
    let offsetL= {x:initL_x,z:initL_z,y:initL_y}
    let DownTargetL = {x:initL_x,z:initL_z,y:initL_y-3.5}
    let MoveTargetL = {x:initL_x+0.65,z:initL_z,y:initL_y-3.5}
    let UpTargetL = {x:initL_x+0.65,z:initL_z,y:initL_y}
    let OriginL = {x:gripperL_init_x+0.65,z:gripperL_init_z,y:gripperL_init_y}
    let ReleaseTargetL = {x:gripperL_init_x,z:gripperL_init_z,y:gripperL_init_y}

    console.log(offsetR)

    const DownR=()=>{
        gripperRBody.position.y = offsetR.y
    }
    tweenDownR = new TWEEN.Tween(offsetR)
      .to(DownTargetR,1800)
      .easing(TWEEN.Easing.Quintic.Out)
      .onUpdate(DownR)
      .onComplete(()=>{
          console.log("downR")
    })

    const DownL=()=>{
        gripperLBody.position.y = offsetL.y
    }
    tweenDownL = new TWEEN.Tween(offsetL)
      .to(DownTargetL,1800)
      .easing(TWEEN.Easing.Quintic.Out)
      .onUpdate(DownL)
      .onComplete(()=>{
          console.log("downL")
    })

    const MoveR=()=>{
      gripperRBody.position.x = DownTargetR.x
    }
    
    tweenMoveR = new TWEEN.Tween(DownTargetR)
    .to(MoveTargetR,1500)
    .easing(TWEEN.Easing.Quintic.Out)
    .onUpdate(MoveR)
    .onComplete(()=>{
        console.log("moveR")
    })

    const MoveL=()=>{
        gripperLBody.position.x = DownTargetL.x
      }
      
    tweenMoveL = new TWEEN.Tween(DownTargetL)
      .to(MoveTargetL,1500)
      .easing(TWEEN.Easing.Quintic.Out)
      .onUpdate(MoveL)
      .onComplete(()=>{
          console.log("moveL")
    })

    const UpR=()=>{
        gripperRBody.position.y = MoveTargetR.y
    }

    tweenUpR = new TWEEN.Tween(MoveTargetR)
    .to(UpTargetR,2500)
    .easing(TWEEN.Easing.Linear.None)
    .onUpdate(UpR)
    .onComplete(()=>{
      console.log("UpR")
    }) 

    const UpL=()=>{
        gripperLBody.position.y = MoveTargetL.y
    }

    tweenUpL = new TWEEN.Tween(MoveTargetL)
    .to(UpTargetL,2500)
    .easing(TWEEN.Easing.Linear.None)
    .onUpdate(UpL)
    .onComplete(()=>{
      console.log("UpL")
    })

    const ToOriginR=()=>{
        gripperRBody.position.x = UpTargetR.x
        gripperRBody.position.y = UpTargetR.y
        gripperRBody.position.z = UpTargetR.z
    }

    tweenToOriginR = new TWEEN.Tween(UpTargetR)
    .to(OriginR,5000)
    .easing(TWEEN.Easing.Linear.None)
    .onUpdate(ToOriginR)
    .onComplete(()=>{
      console.log("ToOriginR")
    })

    const ToOriginL=()=>{
        gripperLBody.position.x = UpTargetL.x
        gripperLBody.position.y = UpTargetL.y
        gripperLBody.position.z = UpTargetL.z
    }

    tweenToOriginL = new TWEEN.Tween(UpTargetL)
    .to(OriginL,5000)
    .easing(TWEEN.Easing.Linear.None)
    .onUpdate(ToOriginL)
    .onComplete(()=>{
      console.log("ToOriginL")
    })

    const ReleaseR=()=>{
        gripperRBody.position.x = OriginR.x
    }

    tweenReleaseR = new TWEEN.Tween(OriginR)
    .to(ReleaseTargetR,1800)
    .easing(TWEEN.Easing.Linear.None)
    .onUpdate(ReleaseR)
    .onComplete(()=>{
      console.log("ReleaseR")
    })   

    const ReleaseL=()=>{
        gripperLBody.position.x = OriginL.x
    }

    tweenReleaseL = new TWEEN.Tween(OriginL)
    .to(ReleaseTargetL,1800)
    .easing(TWEEN.Easing.Linear.None)
    .onUpdate(ReleaseL)
    .onComplete(()=>{
      console.log("ReleaseL")
    })

    tweenDownR.start()
    tweenDownR.chain(tweenMoveR)
    tweenMoveR.chain(tweenUpR)
    tweenUpR.chain(tweenToOriginR)
    tweenToOriginR.chain(tweenReleaseR)

    tweenDownL.start()
    tweenDownL.chain(tweenMoveL)
    tweenMoveL.chain(tweenUpL)
    tweenUpL.chain(tweenToOriginL)
    tweenToOriginL.chain(tweenReleaseL)
}

function click_Right(){
    initR_x = gripperRBody.position.x
    initR_z = gripperRBody.position.z
    initR_y = gripperRBody.position.y
    initL_x = gripperLBody.position.x
    initL_z = gripperLBody.position.z
    initL_y = gripperLBody.position.y
    let offsetR = {x:initR_x,z:initR_z,y:initR_y}
    let targetR = {x:initR_x+1,z:initR_z,y:initR_y}
    let offsetL = {x:initL_x,z:initL_z,y:initL_y}
    let targetL = {x:initL_x+1,z:initL_z,y:initL_y}

    const RRight=()=>{
      //移動
      gripperRBody.position.x = offsetR.x
    }
    tweenRRight = new TWEEN.Tween(offsetR)
        .to(targetR,750)
        .easing(TWEEN.Easing.Quadratic.Out)
        .onUpdate(RRight)
        .onComplete(()=>{
        })

    
    const LRight=()=>{
      //移動
      gripperLBody.position.x = offsetL.x
    }
    tweenLRight = new TWEEN.Tween(offsetL)
        .to(targetL,750)
        .easing(TWEEN.Easing.Quadratic.Out)
        .onUpdate(LRight)
        .onComplete(()=>{
            console.log("Right done")
        })

    tweenRRight.start()
    tweenLRight.start()
}

function click_Left(){
    initR_x = gripperRBody.position.x
    initR_z = gripperRBody.position.z
    initR_y = gripperRBody.position.y
    initL_x = gripperLBody.position.x
    initL_z = gripperLBody.position.z
    initL_y = gripperLBody.position.y
    let offsetR = {x:initR_x,z:initR_z,y:initR_y}
    let targetR = {x:initR_x-1,z:initR_z,y:initR_y}
    let offsetL = {x:initL_x,z:initL_z,y:initL_y}
    let targetL = {x:initL_x-1,z:initL_z,y:initL_y}

    const RLeft=()=>{
      gripperRBody.position.x = offsetR.x
    }
    tweenRLeft = new TWEEN.Tween(offsetR)
        .to(targetR,750)
        .easing(TWEEN.Easing.Quadratic.Out)
        .onUpdate(RLeft)
        .onComplete(()=>{
        })

    
    const LLeft=()=>{
      gripperLBody.position.x = offsetL.x
    }
    tweenLLeft = new TWEEN.Tween(offsetL)
        .to(targetL,750)
        .easing(TWEEN.Easing.Quadratic.Out)
        .onUpdate(LLeft)
        .onComplete(()=>{
            console.log("Left done")
        })

    tweenRLeft.start()
    tweenLLeft.start()
}

function click_Forward(){
    initR_x = gripperRBody.position.x
    initR_z = gripperRBody.position.z
    initR_y = gripperRBody.position.y
    initL_x = gripperLBody.position.x
    initL_z = gripperLBody.position.z
    initL_y = gripperLBody.position.y
    let offsetR = {x:initR_x,z:initR_z,y:initR_y}
    let targetR = {x:initR_x,z:initR_z+0.5,y:initR_y}
    let offsetL = {x:initL_x,z:initL_z,y:initL_y}
    let targetL = {x:initL_x,z:initL_z+0.5,y:initL_y}

    const RForward=()=>{
      gripperRBody.position.z = offsetR.z
    }
    tweenRForward = new TWEEN.Tween(offsetR)
        .to(targetR,750)
        .easing(TWEEN.Easing.Quadratic.Out)
        .onUpdate(RForward)
        .onComplete(()=>{
        })

    
    const LForward=()=>{
      gripperLBody.position.z = offsetL.z
    }
    tweenLForward = new TWEEN.Tween(offsetL)
        .to(targetL,750)
        .easing(TWEEN.Easing.Quadratic.Out)
        .onUpdate(LForward)
        .onComplete(()=>{
            console.log("Forward done")
        })

    tweenRForward.start()
    tweenLForward.start()
}

function click_Back(){
    initR_x = gripperRBody.position.x
    initR_z = gripperRBody.position.z
    initR_y = gripperRBody.position.y
    initL_x = gripperLBody.position.x
    initL_z = gripperLBody.position.z
    initL_y = gripperLBody.position.y
    let offsetR = {x:initR_x,z:initR_z,y:initR_y}
    let targetR = {x:initR_x,z:initR_z-0.5,y:initR_y}
    let offsetL = {x:initL_x,z:initL_z,y:initL_y}
    let targetL = {x:initL_x,z:initL_z-0.5,y:initL_y}

    const RBack=()=>{
      gripperRBody.position.z = offsetR.z
    }
    tweenRBack = new TWEEN.Tween(offsetR)
        .to(targetR,750)
        .easing(TWEEN.Easing.Quadratic.Out)
        .onUpdate(RBack)
        .onComplete(()=>{
        })

    
    const LBack=()=>{
      gripperLBody.position.z = offsetL.z
    }
    tweenLBack = new TWEEN.Tween(offsetL)
        .to(targetL,750)
        .easing(TWEEN.Easing.Quadratic.Out)
        .onUpdate(LBack)
        .onComplete(()=>{
            console.log("Back done")
        })

    tweenRBack.start()
    tweenLBack.start()
}

function base_loader(){
    // 載入 loader
    const loader = new THREE.GLTFLoader()
    // Load a glTF resource
    loader.load(
        'gltf/claw_machine/base.gltf',

	// called when the resource is loaded
    function ( gltf ) {
        base = gltf
        baseObj = gltf.scene
        baseObj.position.x = -2;

        baseObj.scale.set(1, 1, 1);

        // 設定陰影
        baseObj.traverse(function(object) {
            if (object instanceof THREE.Mesh) {
              object.castShadow = true
              object.receiveShadow = true
            }
          })

        scene.add(baseObj);
	},
	// called while loading is progressing
	function ( xhr ) {
		console.log( ( xhr.loaded / xhr.total * 100 ) + '% loaded' );
	},
	// called when loading has errors
	function ( error ) {
		console.log( 'An error happened:'+error );
	}
)}

function glass_outer_loader(){
  // 載入 loader
  const loader = new THREE.GLTFLoader()
  // Load a glTF resource
  loader.load(
      'gltf/claw_machine/glass.gltf',
// called when the resource is loaded
  function ( gltf ) {
      glass_outer = gltf
      glass_outerObj = gltf.scene
      glass_outerObj.position.x = -2;
      glass_outerObj.position.y = 4.5;

      glass_outerObj.scale.set(1, 1, 1);

      // 設定陰影
      glass_outerObj.traverse(function(object) {
          if (object instanceof THREE.Mesh) {
            object.castShadow = true
            object.receiveShadow = true
          }
          // 設定 gltf 透明度
          if(object.isMesh ===true){
            object.material.transparent = true
            object.material.opacity = 2
          }
        })

      scene.add(glass_outerObj);
},
// called while loading is progressing
function ( xhr ) {
  console.log( ( xhr.loaded / xhr.total * 100 ) + '% loaded' );
},
// called when loading has errors
function ( error ) {
  console.log( 'An error happened:'+error );
}
)}

function roof_loader(){
  // 載入 loader
  const loader = new THREE.GLTFLoader()
  // Load a glTF resource
  loader.load(
      'gltf/claw_machine/roof.gltf',
// called when the resource is loaded
  function ( gltf ) {
      roof = gltf
      roofObj = gltf.scene
      roofObj.position.x = -2.3;
      roofObj.position.y = 9.8;
      roofObj.position.z = 1;

      roofObj.scale.set(1, 1, 1);

      // 設定陰影
      roofObj.traverse(function(object) {
          if (object instanceof THREE.Mesh) {
            object.castShadow = true
            object.receiveShadow = true
          }
        })

      scene.add(roofObj);
},
// called while loading is progressing
function ( xhr ) {
  console.log( ( xhr.loaded / xhr.total * 100 ) + '% loaded' );
},
// called when loading has errors
function ( error ) {
  console.log( 'An error happened:'+error );
}
)}

// 監聽螢幕寬高來做簡單 RWD 設定
window.addEventListener('resize', function() {
    camera.aspect = window.innerWidth / window.innerHeight
    camera.updateProjectionMatrix()
    renderer.setSize(window.innerWidth, window.innerHeight)
  })

init()
initCannon()
initUsagiCannon()
initObjectCannon(piske_init_x,piske_init_y,piske_init_z)
initClawMachineCannon()
render()