系列文章
Day 1：前端視覺特效做出什麼內容？可以吃嗎？
身為3D網頁視覺特效工程師，深知此坑水深，我自己時常掉入陷阱。因此希望能夠幫助大家往網頁特效邁進。 前端視覺特效可以做什麼？ 很多，最常見的用途是網頁品牌形象、...
Day2: ThreeJS、OpenGL、WebGL：誰是誰？我要怎麼開始？
剛開始學前端視覺特效經常是這樣： 在開始Three.js之前，得先解釋清楚三者關係。接下來我也會不斷解釋三者關聯。 三者關係 Three.js 上層的API...
Day3: Three.js空間座標！讓世界繞著我旋轉！
在HTML我們有X與Y。 但在Three.js的座標系中是三維空間：不僅有XY，還有Z。一切都複雜起來。 我會介紹3D的樹狀結構，這個不只是Three.js，在...
Day4: Three.js 什麼！空間被扭曲了？我願稱你為最強——矩陣
圖片來源 「矩陣」是最強大的空間扭曲招數。 它比其他「空間忍數」：位移、縮放、旋轉這三個加起來都強！因為他一次就可以作掉這三個，而且解決了這三個的致命缺點——順...
Day5: The World！砸瓦魯多！歐拉歐拉歐拉！——歐拉角跟四元數
圖片來源 當我們在場景空間裡面對物體旋轉時，它到底是怎麼旋轉的呢？又怎麼儲存旋轉資訊呢？這是因為Three.js召喚了替身——歐拉角與四元數！ 它們代替我們在...
Day6: three.js 圓弧的藝術家！弧線的教授！——OrbitControl軌道控制器
圖片來源 每個場景都有OrbitControl，就好像每個賽道都有彎道一樣。要是你沒有Orbitcontrol，那就像你沒有「圓弧的藝術家」或是「弧線的教授」...
Day7: three.js的一方通行：矢量操作——全面釐清向量與底層特性
圖片出處 我們都要有矢量（向量）操作能力 只是差別是，我們不需要像一方通行那樣，吸入必要的氧氣防止能力消失，我們學會了就可以操作！ 向量一般來說，是指一個同時...
Day8: Three.js 你有被光速踢過嗎？解析3D界的黃猿——光的底層原理與介紹
three.js的光 圖片來源 有看過航海王的人，應該對這句話非常有印象：「你有被光速踢過嗎？」。 身為海軍三大將的黃猿，最能利用光速打敗對手。跟我們的視覺特...
Day9: Three.js 傲慢的太陽——光的開發與矩形區域光原理
圖片來源 艾斯卡諾在正中午最強，就如同three.js的光。你可能會覺得： 圖片來源 我可不是瞎掰喔，聽我解釋。 中午光線最強，就像艾斯卡諾中午最猛，而這是...
Day10: three.js 前端視覺特效工程師實戰：全球戰情室—貼圖原理
成品 本篇我們將完成圖中的地球畫面，從介紹貼圖開始。 做一個地球可以幹嘛？——地球的應用 地球的應用：B2C應用 B2C主要是行銷網站、企業形象網站、活動網站...