iT邦幫忙

鐵人檔案

2022 iThome 鐵人賽
回列表
Modern Web

Three.js 反閘之路 系列

初探 Three.js ,嘗試利用網頁做個簡單的小動畫,藉由這次競賽的機會將所學整理並記錄下來。

鐵人鍊成 | 共 30 篇文章 | 8 人訂閱 訂閱系列文 RSS系列文 團隊來啊!打摳啊!
DAY 21

Day21. 夾娃娃機 - 建立夾爪剛體

今日嘗試建立夾取物件的夾爪剛體 程式碼 設定夾爪初始位置 let gripperR_init_x = 2 let gripperR_init_y = 4 let...

2022-09-25 ‧ 由 Yingge170 分享
DAY 22

Day22. 夾娃娃機 - 物件夾取動畫

今日嘗試根據建立好的夾爪剛體將利用 Tween.js 動畫將物件抓起,做到類似夾娃娃機的效果 程式碼 .ejs 在 ejs 處加入按鈕 <button...

2022-09-26 ‧ 由 Yingge170 分享
DAY 23

Day23. 夾娃娃機 - 建立機台剛體

既然都有夾娃娃機的效果了,就來蓋個夾娃娃機台吧,今天先建立機台的剛體 建立機台夾層地板剛體與網格 let machineBottom = new CANNO...

2022-09-27 ‧ 由 Yingge170 分享
DAY 24

Day24. 夾娃娃機 - 匯入夾娃娃機模型

基於 yting23 看不下去只有剛體的夾娃娃機台外型,熱心的用 blender 繪製了夾娃娃機的模型,今天就來匯入朋友的善意 程式碼 匯入夾娃娃機底座 f...

2022-09-28 ‧ 由 Yingge170 分享
DAY 25

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

有了夾娃娃機的外觀,夾爪也要像夾娃娃機一樣可以前後左右移動,並在夾取後回到原位 程式碼 .ejs 先在 ejs 處設定前後左右移動按鈕 <table&...

2022-09-29 ‧ 由 Yingge170 分享
DAY 26

Day26. 再建立一個物件

因為已經有了夾娃娃機模型,今天將用不到的網格們刪除,並在加入一個物件供夾取 程式碼 設定物件位置 let piske_init_x = 1.5 let pi...

2022-09-30 ‧ 由 Yingge170 分享
DAY 27

Day27. 部屬平台

部署 Deploy 一般寫好程式碼在本地端測試完成後,若想將網頁以公開網址的形式分享出去,就需要把專案放置專門的位置,而這個動作就稱部署 Github 根據維基...

2022-10-01 ‧ 由 Yingge170 分享
DAY 28

Day28. 部署至 Render

Github 先在 github 建立新的專案在 app.js 將當初設定監聽這段註解掉,避免部署時出問題 const http = require('http...

2022-10-02 ‧ 由 Yingge170 分享
DAY 29

Day29. Three.js Editor

three.js 官方除了釋出相關函式庫外,也提供了線上的編輯工具,讓使用者運用圖形化介面開發,可以透過官網左上角的 editor 進入,或是點擊這裡 Edit...

2022-10-03 ‧ 由 Yingge170 分享
DAY 30

Day30. 完賽心得

今天是第三十天,終於到最後一天了 儘管過程忙忙碌碌,但還是很慶幸當初有答應參賽,有了一份特殊的經驗,學到了不少東西,也希望這 30 天的筆記能幫助到一些人。 最...

2022-10-04 ‧ 由 Yingge170 分享