鐵人檔案
以 Modern Web 為核心，透過 30 天的學習與實作，逐步探索現代網頁技術在三維視覺化與互動式應用上的可能性。專題將從 HTML5、CSS3 與 JavaScript 等 Web 基礎技術開始，逐步學習最終建立一套可於瀏覽器中運行的互動式三維太陽系。作品將以太陽作為主要光源，模擬八大行星的自轉、公轉與受光後產生的明暗變化，並進一步加入行星材質、陰影、月球與土星環等視覺元素。使用者可透過滑鼠操作觀察不同角度的太陽系，並透過介面控制動畫速度或觀看特定天體。除了完成作品外，也將記錄 30 天的學習過程，從 Web 基礎、3D 座標系統、動畫運算，到三維渲染、光照與互動設計，逐步理解各項技術在
Day 10 我們已經把太陽與八大行星全部建立完成。今天開始讓太陽系真正「動起來」。這次我們會讓八大行星都加入自己的 rotationSpeed也就是自轉速度。...
Day 11 我們已經讓八大行星開始自轉，並暫時使用 Wireframe 網格，讓旋轉效果比較容易觀察。今天要加入太陽系最重要的動畫之一 行星公轉也就是讓行星不...
Day 12 我們已經讓八大行星開始繞太陽公轉。今天要做的是把每顆行星的公轉路線畫出來。目前行星雖然有在繞太陽移動，但是沒有軌道線時，畫面會比較難看出它到底沿著...
Day 13 我們已經替八大行星加入公轉軌道，現在每顆行星都可以沿著自己的軌道繞太陽運行。不過目前還有一個問題，我們的動畫速度是使用： planet.angle...
Day 14 我們已經使用 THREE.Clock，讓行星的自轉與公轉速度改成依照時間計算。今天我們要處理另一個很重要的東西 Camera。目前太陽系雖然已經會...
Day 15 我們已經讓 Camera 可以透過鍵盤切換不同視角。但都還是固定好的位置。今天我們要加入 OrbitControls讓使用者可以直接用滑鼠自由操作...
Day 16 我們已經加入 OrbitControls，現在可以直接使用滑鼠旋轉、縮放與平移整個太陽系。不過目前還有一個很明顯的問題，所有行星都只是不同顏色的球...
