本系列利用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主要是行銷網站、企業形象網站、活動網站...