iT邦幫忙

17th鐵人賽相關文章
共有 19758 則文章
0 Like 0 留言 51 瀏覽
鐵人賽 Modern Web DAY 30
從 Web 到宇宙：Three.js × WebGL 互動式太陽系與光影實作 系列 第 30 篇

技術 Day 30 - Final Project：30 天打造互動式太陽系

終於來到 Day 30。從第一天認識 Modern Web，到今天我們已經完成一個可以實際操作的：Interactive Solar System 這 30 天...

Andygong ‧ 2026-10-14 ‧團隊nutc imac
0 Like 0 留言 80 瀏覽
鐵人賽 Modern Web DAY 29
從 Web 到宇宙：Three.js × WebGL 互動式太陽系與光影實作 系列 第 29 篇

技術 Day 29 - Integration × Debug：最終整合與問題修正

一路做到 Day 28，目前我們功能其實已經相當完整。但專案做到這個階段後，最重要的事情反而不是繼續加功能，而是：把所有功能一起操作找出彼此衝突的地方並且修正...

Andygong ‧ 2026-10-13 ‧團隊nutc imac
0 Like 0 留言 98 瀏覽
鐵人賽 Modern Web DAY 28
從 Web 到宇宙：Three.js × WebGL 互動式太陽系與光影實作 系列 第 28 篇

技術 Day 28 - Responsive × Performance：讓太陽系在不同裝置更順暢

現在整個專案已經有相當完整的互動功能。但功能越來越多之後，也會開始遇到兩個很實際的問題：不同螢幕尺寸↓UI 可能擠在一起 Geometry、Shadow、Pix...

Andygong ‧ 2026-10-12 ‧團隊nutc imac
0 Like 0 留言 56 瀏覽
鐵人賽 Modern Web DAY 27
從 Web 到宇宙：Three.js × WebGL 互動式太陽系與光影實作 系列 第 27 篇

技術 Day 27 - Planet Focus × Planet Info：鎖定行星與資訊面板

今天要把「選中行星」這件事真正利用起來。也就是點擊 Earth 之後 Camera 開始鎖定 Earth，OrbitControls.target 跟著 Ear...

Andygong ‧ 2026-10-11 ‧團隊nutc imac
0 Like 0 留言 92 瀏覽
鐵人賽 Modern Web DAY 26
從 Web 到宇宙：Three.js × WebGL 互動式太陽系與光影實作 系列 第 26 篇

技術 Day 26 - Raycaster：用滑鼠選擇行星

現在使用者已經可以透過右上角 UI 控制整個太陽系。今天要進一步把操作方式從操作 UI 變成直接操作 3D Scene也就是讓使用者可以直接用滑鼠點擊行星當某顆...

Andygong ‧ 2026-10-10 ‧團隊nutc imac
0 Like 0 留言 97 瀏覽
鐵人賽 Modern Web DAY 25
從 Web 到宇宙：Three.js × WebGL 互動式太陽系與光影實作 系列 第 25 篇

技術 Day 25 - Animation Controls：Play、Pause × Speed

今天要繼續讓控制面板真正影響時間也就是加入： ▶ Play⏸ Pause⏩ Speed 讓使用者可以暫停整個太陽系，也可以自由調整行星運行速度。 由於目前...

Andygong ‧ 2026-10-09 ‧團隊nutc imac
0 Like 0 留言 89 瀏覽
鐵人賽 Modern Web DAY 24
從 Web 到宇宙：Three.js × WebGL 互動式太陽系與光影實作 系列 第 24 篇

技術 Day 24 - UI Controls：替太陽系加入控制面板

目前的太陽系已經有不少功能，但幾乎所有效果都是：程式啟動全部顯示使用者只能觀看 所以從今天開始，我們要正式進入 User Interaction，今天先建立一個...

Andygong ‧ 2026-10-08 ‧團隊nutc imac
0 Like 0 留言 97 瀏覽
鐵人賽 Modern Web DAY 23
從 Web 到宇宙：Three.js × WebGL 互動式太陽系與光影實作 系列 第 23 篇

技術 Day 23 - Saturn Ring × Starfield：加入土星環與宇宙星空

今天要繼續處理另一顆非常有辨識度的行星：土星除了加入 Saturn Ring，我們也會把原本單純的黑色背景升級成星空背景另外，隨著 Moon、Venus Atm...

Andygong ‧ 2026-10-07 ‧團隊nutc imac
0 Like 0 留言 96 瀏覽
鐵人賽 Modern Web DAY 22
從 Web 到宇宙：Three.js × WebGL 互動式太陽系與光影實作 系列 第 22 篇

技術 Day 22 - Planet Effects：地球夜景 × 金星大氣層

今天開始替不同的行星加入自己的特色。這次會處理兩顆 Earth → 夜間城市燈光Venus → 金星大氣／雲層 Texture 而且金星的大氣層不再只是單純...

Andygong ‧ 2026-10-06 ‧團隊nutc imac
0 Like 0 留言 122 瀏覽
鐵人賽 Modern Web DAY 21
從 Web 到宇宙：Three.js × WebGL 互動式太陽系與光影實作 系列 第 21 篇

技術 Day 21 - Moon：建立地球與月球系統

Day 20 我們已經把 Three.js 的 Shadow 系統準備好了。今天要第一次加入「衛星」。目前所有行星都是繞著太陽今天加入月球之後，月球會繞著地球...

Andygong ‧ 2026-10-05 ‧團隊nutc imac
0 Like 0 留言 97 瀏覽
鐵人賽 Modern Web DAY 19
微光採集瓶：用 Vue 3 打造每日美好記錄網頁 系列 第 19 篇

技術 【Day 19】封存月份的美好：月度色卡的誕生及儀式感動畫

隨著日子一天天過去，瓶底積累了每天最幸福的痕跡，以及忙著生活的象徵。如果只是任由它們堆在瓶底，是不是少了一點儀式感。 今天我們要實作一個重磅功能：在月底最後一天...

y0yi9ue ‧ 2026-10-03
0 Like 0 留言 78 瀏覽
鐵人賽 Modern Web DAY 20
從 Web 到宇宙：Three.js × WebGL 互動式太陽系與光影實作 系列 第 20 篇

技術 Day 20 - Shadow：讓行星開始產生陰影

Day 19 我們已經完成基本的光照系統，現在太陽會透過 PointLight 照亮行星，也加入了 AmbientLight 讓暗面保留一些細節。今天不會加入新...

Andygong ‧ 2026-10-04 ‧團隊nutc imac
0 Like 0 留言 68 瀏覽
鐵人賽 Modern Web DAY 19
從 Web 到宇宙：Three.js × WebGL 互動式太陽系與光影實作 系列 第 19 篇

技術 Day 19 - Lighting：調整太陽系的明暗效果

現在會遇到一個很明顯的問題，背對太陽的一面可能太黑。所以今天我們要再加入另一種光源 THREE.AmbientLight (環境光)讓整個場景保留一點基本亮度，...

Andygong ‧ 2026-10-03 ‧團隊nutc imac
0 Like 0 留言 116 瀏覽
鐵人賽 Modern Web DAY 18
從 Web 到宇宙：Three.js × WebGL 互動式太陽系與光影實作 系列 第 18 篇

技術 Day 18 - Sun Light：讓太陽真正成為光源

Day 17 我們已經使用 TextureLoader，把原本只有單一顏色的行星換成真正的表面貼圖。現在地球、火星、木星等行星已經開始有比較真實的外觀。但目前還...

Andygong ‧ 2026-10-02 ‧團隊nutc imac
0 Like 0 留言 78 瀏覽
鐵人賽 Vibe Coding DAY 30
Vibe Coding 實戰手冊：30 天打造具備預算控管與數據視覺化的 React 記帳應用 系列 第 30 篇

技術 Day 30｜三十天之後，我重新思考了 Vibe Coding

今天是鐵人賽的最後一天，也是我回頭整理這三十天努力與成果的時候。其實說到底，這三十天我做的只是一個小小的記帳 App，但對現在的我來說，它帶來的收穫好像不只是「...

czy06 ‧ 2026-10-01 ‧團隊我跟對面一隊
0 Like 0 留言 119 瀏覽
鐵人賽 Modern Web DAY 17
從 Web 到宇宙：Three.js × WebGL 互動式太陽系與光影實作 系列 第 17 篇

技術 Day 17 - Texture：替八大行星換上真正的表面

Day 16 我們已經加入 OrbitControls，現在可以直接使用滑鼠旋轉、縮放與平移整個太陽系。不過目前還有一個很明顯的問題，所有行星都只是不同顏色的球...

Andygong ‧ 2026-10-01 ‧團隊nutc imac
0 Like 0 留言 128 瀏覽
鐵人賽 Modern Web DAY 16
從 Web 到宇宙：Three.js × WebGL 互動式太陽系與光影實作 系列 第 16 篇

技術 Day 16 - OrbitControls：用滑鼠自由觀看整個太陽系

Day 15 我們已經讓 Camera 可以透過鍵盤切換不同視角。但都還是固定好的位置。今天我們要加入 OrbitControls讓使用者可以直接用滑鼠自由操作...

Andygong ‧ 2026-09-30 ‧團隊nutc imac
0 Like 0 留言 89 瀏覽
鐵人賽 Vibe Coding DAY 28
Vibe Coding 實戰手冊：30 天打造具備預算控管與數據視覺化的 React 記帳應用 系列 第 28 篇

技術 Day 28｜雲端部署：讓 React 記帳 App 正式上線

今天進入 Day 28，主要是把前幾天完成的 React 記帳 App 部署到 Vercel，讓原本只能在 localhost:5173 執行的專案，真正變成可...

czy06 ‧ 2026-09-29 ‧團隊我跟對面一隊
0 Like 0 留言 144 瀏覽
鐵人賽 Modern Web DAY 15
從 Web 到宇宙：Three.js × WebGL 互動式太陽系與光影實作 系列 第 15 篇

技術 Day 15 - Camera：從不同角度觀察太陽系

Day 14 我們已經使用 THREE.Clock，讓行星的自轉與公轉速度改成依照時間計算。今天我們要處理另一個很重要的東西 Camera。目前太陽系雖然已經會...

Andygong ‧ 2026-09-29 ‧團隊nutc imac
0 Like 0 留言 77 瀏覽
鐵人賽 Vibe Coding DAY 27
Vibe Coding 實戰手冊：30 天打造具備預算控管與數據視覺化的 React 記帳應用 系列 第 27 篇

技術 Day 27｜整理專案與編寫 README：讓成果有跡可循

今天進入 Day 27，主要是整理整個專案，並開始編寫 README.md。 README 到底是寫給誰看的？我整理後發現，README 不只是介紹作品，讓不同...

czy06 ‧ 2026-09-28 ‧團隊我跟對面一隊
0 Like 0 留言 91 瀏覽
鐵人賽 Modern Web DAY 14
從 Web 到宇宙：Three.js × WebGL 互動式太陽系與光影實作 系列 第 14 篇

技術 Day 14 - 不同速度：讓八大行星擁有自己的運行節奏

Day 13 我們已經替八大行星加入公轉軌道，現在每顆行星都可以沿著自己的軌道繞太陽運行。不過目前還有一個問題，我們的動畫速度是使用： planet.angle...

Andygong ‧ 2026-09-28 ‧團隊nutc imac
0 Like 0 留言 92 瀏覽
鐵人賽 Vibe Coding DAY 26
Vibe Coding 實戰手冊：30 天打造具備預算控管與數據視覺化的 React 記帳應用 系列 第 26 篇

技術 Day 26｜localStorage 安全防禦與資料備援：讓資料保存更穩定

今天進入 Day 26，原本設的目標在之前就順帶做了，所以今天主要是重新整理 App 的 localStorage，讓資料在讀取或寫入發生問題時，不會直接造成白...

czy06 ‧ 2026-09-27 ‧團隊我跟對面一隊
0 Like 0 留言 92 瀏覽
鐵人賽 Modern Web DAY 13
從 Web 到宇宙：Three.js × WebGL 互動式太陽系與光影實作 系列 第 13 篇

技術 Day 13 - 行星軌道：把看不見的公轉路線畫出來

Day 12 我們已經讓八大行星開始繞太陽公轉。今天要做的是把每顆行星的公轉路線畫出來。目前行星雖然有在繞太陽移動，但是沒有軌道線時，畫面會比較難看出它到底沿著...

Andygong ‧ 2026-09-27 ‧團隊nutc imac
1 Like 0 留言 90 瀏覽
鐵人賽 AI 自動化 DAY 15
訓練AI製作導覽解說的圖文資料 系列 第 15 篇

技術 Day15 走出戶外導覽的裝備系列1－適用的衣物

只要是戶外導覽，必定不能以在家或住所附近的穿著為準，以符合所到之處需要的環境、氣候做準備，不用準備「黃金聖衣」等級的貴松松裝備，只要符合「吸濕／排汗／透氣／彈力...

竹風之翼 ‧ 2026-09-27
0 Like 0 留言 120 瀏覽
鐵人賽 Vibe Coding DAY 25
Vibe Coding 實戰手冊：30 天打造具備預算控管與數據視覺化的 React 記帳應用 系列 第 25 篇

技術 Day 25｜狀態重構與目標刪除聯動：讓不同資料真正同步

今天進入第二十五今天的目標，使用 useContext 與 Custom Hook 重構 App 的狀態管理，減少原本需要一層一層傳遞的 Props。不過在完成...

czy06 ‧ 2026-09-26 ‧團隊我跟對面一隊
0 Like 0 留言 105 瀏覽
鐵人賽 Modern Web DAY 12
從 Web 到宇宙：Three.js × WebGL 互動式太陽系與光影實作 系列 第 12 篇

技術 Day 12 - 行星公轉：讓八大行星開始繞太陽運行

Day 11 我們已經讓八大行星開始自轉，並暫時使用 Wireframe 網格，讓旋轉效果比較容易觀察。今天要加入太陽系最重要的動畫之一 行星公轉也就是讓行星不...

Andygong ‧ 2026-09-26 ‧團隊nutc imac
1 Like 0 留言 135 瀏覽
鐵人賽 AI 自動化 DAY 14
訓練AI製作導覽解說的圖文資料 系列 第 14 篇

技術 Day14 AI導覽模擬系列7-值得注意的宗教節慶活動導覽

關於宗教節慶結合旅遊是會讓人記憶深刻，如同臺灣本島的大甲媽和白沙屯媽遶境，當然馬祖保有閩東祭祀的舊俗，旅客到這裡一定要提醒，務必遵守當地禁忌，以下會挑出比較特別...

竹風之翼 ‧ 2026-09-26
0 Like 0 留言 75 瀏覽
鐵人賽 Vibe Coding DAY 24
Vibe Coding 實戰手冊：30 天打造具備預算控管與數據視覺化的 React 記帳應用 系列 第 24 篇

技術 Day 24｜提示訊息與介面優化：讓操作結果被看見

今天主要目標是幫記帳 App 加入操作提示，讓使用者在執行動作後，可以知道功能是否成功。除了提示功能之外，今天也一起優化了多國語言與設定頁面，將介面語言擴充成繁...

czy06 ‧ 2026-09-25 ‧團隊我跟對面一隊
0 Like 0 留言 151 瀏覽
鐵人賽 Modern Web DAY 11
從 Web 到宇宙：Three.js × WebGL 互動式太陽系與光影實作 系列 第 11 篇

技術 Day 11 - 行星自轉：讓八大行星開始旋轉

Day 10 我們已經把太陽與八大行星全部建立完成。今天開始讓太陽系真正「動起來」。這次我們會讓八大行星都加入自己的 rotationSpeed也就是自轉速度。...

Andygong ‧ 2026-09-25 ‧團隊nutc imac
0 Like 0 留言 76 瀏覽
鐵人賽 Vibe Coding DAY 23
Vibe Coding 實戰手冊：30 天打造具備預算控管與數據視覺化的 React 記帳應用 系列 第 23 篇

技術 Day 23｜錢包重構與動態存錢目標：讓資料真正連動

在原計劃中Day 23的目標是與外部 API 串接，但先前為了整體性我提早做好了這部分，於是今天主要是繼續優化前幾天加入的匯率功能。除此之外我還新增了「錢包」和...

czy06 ‧ 2026-09-24 ‧團隊我跟對面一隊
iThome鐵人賽
參賽組數
929 組
團體組數
32 組
累計文章數
20285 篇
完賽人數
534 人
iT+看影片追技術 看影片追技術 看更多
熱門tag
15th鐵人賽 16th鐵人賽 13th鐵人賽 18th鐵人賽 17th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽 鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# linux windows server css
熱門問題
熱門回答
熱門文章
IT邦幫忙