鐵人檔案
本系列利用30天介紹前端視覺特效開發，幫助大家學習webGL，並且專注在視覺特效方面。
視覺特效開發需要多個角色以及工具完成，本篇以Three.js為主軸，觸及WebGL, Shader, SVG, Maya, Yoka等等，提供工程師在開發視覺特效時所需要的工具，藉此更熟悉前端視覺特效的應用。
身為3D網頁視覺特效工程師，深知此坑水深，我自己時常掉入陷阱。因此希望能夠幫助大家往網頁特效邁進。 前端視覺特效可以做什麼？ 很多，最常見的用途是網頁品牌形象、...
剛開始學前端視覺特效經常是這樣： 在開始Three.js之前，得先解釋清楚三者關係。接下來我也會不斷解釋三者關聯。 三者關係 Three.js 上層的API...
在HTML我們有X與Y。 但在Three.js的座標系中是三維空間：不僅有XY，還有Z。一切都複雜起來。 我會介紹3D的樹狀結構，這個不只是Three.js，在...
圖片來源 「矩陣」是最強大的空間扭曲招數。 它比其他「空間忍數」：位移、縮放、旋轉這三個加起來都強！因為他一次就可以作掉這三個，而且解決了這三個的致命缺點——順...
圖片來源 當我們在場景空間裡面對物體旋轉時，它到底是怎麼旋轉的呢？又怎麼儲存旋轉資訊呢？這是因為Three.js召喚了替身——歐拉角與四元數！ 它們代替我們在...
圖片來源 每個場景都有OrbitControl，就好像每個賽道都有彎道一樣。要是你沒有Orbitcontrol，那就像你沒有「圓弧的藝術家」或是「弧線的教授」...
圖片出處 我們都要有矢量（向量）操作能力 只是差別是，我們不需要像一方通行那樣，吸入必要的氧氣防止能力消失，我們學會了就可以操作！ 向量一般來說，是指一個同時...
three.js的光 圖片來源 有看過航海王的人，應該對這句話非常有印象：「你有被光速踢過嗎？」。 身為海軍三大將的黃猿，最能利用光速打敗對手。跟我們的視覺特...
圖片來源 艾斯卡諾在正中午最強，就如同three.js的光。你可能會覺得： 圖片來源 我可不是瞎掰喔，聽我解釋。 中午光線最強，就像艾斯卡諾中午最猛，而這是...
成品 本篇我們將完成圖中的地球畫面，從介紹貼圖開始。 做一個地球可以幹嘛？——地球的應用 地球的應用：B2C應用 B2C主要是行銷網站、企業形象網站、活動網站...
