推薦序

序言



CHAPTER 01 導論：前端 3D 視覺特效是什麼？

誰適合學習前端 3D 視覺特效？

學習前端 3D 視覺特效有什麼好處？

網頁視覺特效包含哪些做法？

我所準備的資源

本書內容



PART Ⅰ | 用 three.js 理解 3D 世界觀

CHAPTER 02 安裝、建置環境

透過 CodePen 上手

透過 Live Server 上手



CHAPTER 03 Hello three.js!

三者關係

從 three.js 開始，要怎麼起頭？

開始程式碼



CHAPTER 04 three.js 空間座標──讓世界繞著我旋轉！

巢狀結構

以程式碼示範

設定空間的方法？



CHAPTER 05 什麼！空間被扭曲了？我 three 願稱你為最強──矩陣

順序到底有沒有差？

在 three.js 看這個問題

矩陣

在 three.js 實作該方法



CHAPTER 06 The World ！砸瓦魯多！歐拉歐拉歐拉！──歐拉角跟四元數

天球問題

在 three.js 應用歐拉角

在 three.js 應用四元數

製作天球



CHAPTER 07 three.js 圓弧的藝術家！弧線的教授！──OrbitControls 軌道控制器

Control

OrbitControls 控制「目標」跟「鏡頭」

實作

Target 不正確問題

總結：target 跟 lookAt 的差異



CHAPTER 08 three.js 的一方通行：矢量操作──全面釐清向量與底層特性

我們需要有向量操作能力

學一方通行在短時間內分析向量來反擊 immutable

不止向量，這觀念遍布 three.js

必學的向量函式

如同「矢量操作」般必殺的向量函式



CHAPTER 09 你有被光速踢過嗎？解析 3D 界的黃猿──光的底層原理與介紹

最常用的光源及其原理

這些光怎麼來的？

光就是內積算出的結果

以上 three.js 都幫你包好了



CHAPTER 10 傲慢的太陽──光的開發

實作地球與太陽



PART Ⅱ | 用 Three.js 實戰 3D 作品

CHAPTER 11 前端視覺特效工程師實戰：全球戰情室──貼圖原理

做一個地球可以做什麼？──地球的應用

理解貼圖的運作模式

數不清的貼圖

小結



CHAPTER 12 前端 3D 視覺特效開發實戰：全球戰情室──實作地球

成品

運用貼圖

加上雲圖

跨入修圖領域

加上互動



CHAPTER 13 3D 地球特效開發實戰：留下飛雷神術式吧！──經緯度座標轉換

開發鏡頭跳躍功能

完成品

經緯度轉三維空間座標

結論



CHAPTER 14 three.js 3D 地球特效開發實戰：飛雷神之術走跳地球！──鏡頭追蹤與浮動文字

開發功能

地球的潛力



CHAPTER 15 three.js 3D 圖表特效開發實戰──繪畫就跟佐為下棋一樣簡單：線段原理

線段是什麼？

三個重要的線段物件：Shape、Path、Curve

線段物件：路徑 Path

線段物件：曲線 Curve



CHAPTER 16 3D 圖表特效開發實戰──來人！餵公子吃餅：圓餅圖

開發線段

小結



CHAPTER 17 3D 圖表特效開發實戰──你爹只給個爛餅，大不了還你 3D 爛餅：用粉圓體做立體圓餅圖

完成品

開發立體圓餅圖

加上圖例

完成品

小結



CHAPTER 18 three.js GIS 系統開發實戰──鄉鎮市區 GIS 系統：SVG、GeoJson 的應用

由 SVG 渲染模型

讀取 SVG

將 Path 轉成 3D Mesh

將數值轉成物件高度

完成品



CHAPTER 19 three.js GIS 系統開發實戰──成為網頁特效的鹿丸！影子模仿術：陰影的終極原理

陰影的實作

陰影的本質

渲染問題解決方法

Self-Shadow Aliasing 問題

Bias 修正

延伸的陰影技術：Shadow Map、PCF、PCSS

各種光源所產生的陰影差異

小結



CHAPTER 20 three.js 前端 3D 視覺特效開發實戰──設備檢視器：倒影特效

成品

鏡面反射原理

開發鏡面特效

成果

envMap 是什麼？

envMap 流程

CubeCamera 怎麼照出 360 度照片的？

什麼是 HDRI

Cube 是什麼意思？



CHAPTER 21 前端 3D 視覺特效開發實戰──智慧工廠：倒影特效

成品

開發鏡面特效

進階鏡面特效

成品

小結



CHAPTER 22 智慧工廠開發實戰──Dejavu！讓鏡頭跟著拓海一起飄移：鏡頭追蹤、飄移特效

準備程式碼

鏡頭追蹤

鏡頭飄移

小結



PART Ⅲ | 用 Shader 實戰視覺特效

CHAPTER 23 WebGL Shader──你好啊大哥哥，沒想到你可以到 Shader 來呢！

Shader 是什麼

Shader 要如何開發

小結

延伸閱讀



CHAPTER 24 WebGL Shader──從認識 GLSL 開始釐清 Shader

Shader 是什麼？

寫Shader 從認識 GLSL 開始

小結



CHAPTER 25 WebGL Shader──透過自製環境光實作 Shader 傳值

實作即時變化的環境光

完成品

從實作過程中釐清變數類型

小結



CHAPTER 26 使用 Shader 創造漸層

為甚麼要用 Shader?

快速建置 Shader 環境──透過 p5.js

快速建置 Shader 環境──透過 three.js

建立具有光暈的粒子──原理

建立具有光暈的粒子──實作放射狀漸層

建立具有光暈的粒子──移動中心點

建立具有光暈的粒子──反白整個畫面

更多探索



CHAPTER 27 WebGL Shader──透過 Shader 製作光暈：速成篇

用 three.js 製作 Shader 材質

在 Vertex Shader 加上 vertexNormal

在 Fragment Shader 加上「神祕的程式碼」

完成品

小結



CHAPTER 28 WebGL Shader──透過 Shader 製作光暈：Shader 傳值的原理

觀察程式碼

vertexNormal 有值嗎？如果有的話，數值是從哪裡來的？



CHAPTER 29 WebGL Shader──透過 Shader 製作光暈：光暈原理與多種變化形式

dot() 是在哪裡宣告的？它的作用是什麼？

我們釐清了關鍵問題，現在順一遍程式碼

透過 intensity 生成顏色

延伸嘗試

小結



CHAPTER 30 WebGL Shader──用 Shader 做全視角內光暈、星球材質

成品

全視角的內光暈

內光暈在地球的應用

外光暈

小結



後記