鐵人檔案
以 Modern Web 為核心，透過 30 天的學習與實作，逐步探索現代網頁技術在三維視覺化與互動式應用上的可能性。專題將從 HTML5、CSS3 與 JavaScript 等 Web 基礎技術開始，逐步學習最終建立一套可於瀏覽器中運行的互動式三維太陽系。作品將以太陽作為主要光源，模擬八大行星的自轉、公轉與受光後產生的明暗變化，並進一步加入行星材質、陰影、月球與土星環等視覺元素。使用者可透過滑鼠操作觀察不同角度的太陽系，並透過介面控制動畫速度或觀看特定天體。除了完成作品外，也將記錄 30 天的學習過程，從 Web 基礎、3D 座標系統、動畫運算，到三維渲染、光照與互動設計，逐步理解各項技術在
前言 這次的 30 天鐵人賽，我想從最基本的 Web 技術開始，一步步學習如何在瀏覽器中建立一個互動式三維太陽系，最終希望能夠使用 HTML5、CSS、Java...
一、今天完成目標 今天要把昨天介紹的三個 Web 基礎技術真正放在一起： HTML：建立網頁結構 CSS：設計網頁外觀 JavaScript：加入互動功能...
今天開始讓網頁「動起來」。前兩天我們先認識 Modern Web，並用 HTML + CSS + JavaScript 做出第一個網頁。今天加入 Canvas，...
DAY 3 我們開始使用 Canvas，讓 JavaScript 可以控制畫布並製作簡單動畫。今天要再往前一步，認識 WebGL。WebGL 可以讓瀏覽器使用...
今天終於要進入這次 30 天專案的核心之一：Three.js。Three.js 是建立在 WebGL 上的 JavaScript 3D 函式庫，可以幫我們簡化很...
今天不再只是讓立方體旋轉，而是開始控制它在 3D 空間中的位置、旋轉與大小。這些概念之後都會直接用在太陽系。 一、今天完成目標 今天我們會學習： 認識 X、Y...
DAY 6 我們學會了 3D 座標。也學會了： position → 位置rotation → 旋轉scale → 大小 今天我們來了解 Three.js...
一、今天完成目標 今天我們會完成： 再次認識 X、Y、Z 座標 建立多個 3D 球體 使用 position 設定不同位置 讓不同物件出現在 3D 空間 初步...
前面幾天我們都是使用固定大小的 800 × 500 來顯示 Three.js 畫面。從今天開始，我們要把原本的小型 Three.js 畫面改造成 全螢幕 3D...
今天開始加入太陽系最重要的成員「八大行星」。今天不會直接複製八份 SphereGeometry + Material + Mesh，而是開始把程式整理成「資料...
