Day25. 夾娃娃機 - 夾爪前後左右移動+歸位

14th鐵人賽 three.js javascript

Yingge170

團隊來啊!打摳啊!

2022-09-29 08:33:18

709 瀏覽

分享至

有了夾娃娃機的外觀，夾爪也要像夾娃娃機一樣可以前後左右移動，並在夾取後回到原位

程式碼

.ejs

先在 ejs 處設定前後左右移動按鈕

<table>
        <tr>
            <td></td>
            <td><button id="forward_btn" style="font-size:30px" onclick="click_Forward()">Forward</button></td>
            <td></td>
          </tr>
          <tr>
            <td><button id="left_btn" style="font-size:30px" onclick="click_Left()">Left</button></td>
            <td><button id="gripper_btn" style="font-size:30px" onclick="click_Gripper()">Gripper</button></td>
            <td><button id="right_btn" style="font-size:30px" onclick="click_Right()">Right</button></td>
          </tr>
          <tr>
            <td></td>
            <td align="center"><button id="back_btn" style="font-size:30px" onclick="click_Back()">Back</button></td>
            <td></td>
          </tr>
    </table>

.js

夾爪往前

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