iT邦幫忙

鐵人檔案

2022 iThome 鐵人賽
回列表
Software Development

30天成為鍵盤麥可貝:前端視覺特效開發實戰 系列

本系列利用30天介紹前端視覺特效開發,幫助大家學習webGL,並且專注在視覺特效方面。

視覺特效開發需要多個角色以及工具完成,本篇以Three.js為主軸,觸及WebGL, Shader, SVG, Maya, Yoka等等,提供工程師在開發視覺特效時所需要的工具,藉此更熟悉前端視覺特效的應用。

鐵人鍊成 | 共 31 篇文章 | 34 人訂閱 訂閱系列文 RSS系列文
DAY 1

Day 1:前端視覺特效做出什麼內容?可以吃嗎?

身為3D網頁視覺特效工程師,深知此坑水深,我自己時常掉入陷阱。因此希望能夠幫助大家往網頁特效邁進。 前端視覺特效可以做什麼? 很多,最常見的用途是網頁品牌形象、...

2022-09-16 ‧ 由 伍瑪斯 分享
DAY 2

Day2: ThreeJS、OpenGL、WebGL:誰是誰?我要怎麼開始?

剛開始學前端視覺特效經常是這樣: 在開始Three.js之前,得先解釋清楚三者關係。接下來我也會不斷解釋三者關聯。 三者關係 Three.js 上層的API...

2022-09-17 ‧ 由 伍瑪斯 分享
DAY 3

Day3: Three.js空間座標!讓世界繞著我旋轉!

在HTML我們有X與Y。 但在Three.js的座標系中是三維空間:不僅有XY,還有Z。一切都複雜起來。 我會介紹3D的樹狀結構,這個不只是Three.js,在...

2022-09-18 ‧ 由 伍瑪斯 分享
DAY 4

Day4: Three.js 什麼!空間被扭曲了?我願稱你為最強——矩陣

圖片來源 「矩陣」是最強大的空間扭曲招數。 它比其他「空間忍數」:位移、縮放、旋轉這三個加起來都強!因為他一次就可以作掉這三個,而且解決了這三個的致命缺點——順...

2022-09-19 ‧ 由 伍瑪斯 分享
DAY 5

Day5: The World!砸瓦魯多!歐拉歐拉歐拉!——歐拉角跟四元數

圖片來源 當我們在場景空間裡面對物體旋轉時,它到底是怎麼旋轉的呢?又怎麼儲存旋轉資訊呢?這是因為Three.js召喚了替身——歐拉角與四元數! 它們代替我們在...

2022-09-20 ‧ 由 伍瑪斯 分享
DAY 6

Day6: three.js 圓弧的藝術家!弧線的教授!——OrbitControl軌道控制器

圖片來源 每個場景都有OrbitControl,就好像每個賽道都有彎道一樣。要是你沒有Orbitcontrol,那就像你沒有「圓弧的藝術家」或是「弧線的教授」...

2022-09-21 ‧ 由 伍瑪斯 分享
DAY 7

Day7: three.js的一方通行:矢量操作——全面釐清向量與底層特性

圖片出處 我們都要有矢量(向量)操作能力 只是差別是,我們不需要像一方通行那樣,吸入必要的氧氣防止能力消失,我們學會了就可以操作! 向量一般來說,是指一個同時...

2022-09-22 ‧ 由 伍瑪斯 分享
DAY 8

Day8: Three.js 你有被光速踢過嗎?解析3D界的黃猿——光的底層原理與介紹

three.js的光 圖片來源 有看過航海王的人,應該對這句話非常有印象:「你有被光速踢過嗎?」。 身為海軍三大將的黃猿,最能利用光速打敗對手。跟我們的視覺特...

2022-09-23 ‧ 由 伍瑪斯 分享
DAY 9

Day9: Three.js 傲慢的太陽——光的開發與矩形區域光原理

圖片來源 艾斯卡諾在正中午最強,就如同three.js的光。你可能會覺得: 圖片來源 我可不是瞎掰喔,聽我解釋。 中午光線最強,就像艾斯卡諾中午最猛,而這是...

2022-09-24 ‧ 由 伍瑪斯 分享
DAY 10

Day10: three.js 前端視覺特效工程師實戰:全球戰情室—貼圖原理

成品 本篇我們將完成圖中的地球畫面,從介紹貼圖開始。 做一個地球可以幹嘛?——地球的應用 地球的應用:B2C應用 B2C主要是行銷網站、企業形象網站、活動網站...

2022-09-25 ‧ 由 伍瑪斯 分享