網頁視覺特效最強必殺技大全:用 Three.js 與 Shader 圖說核心原理 x 閃避踩雷 x 創作指南
點閱:1其他題名:用Three.js與Shader圖說核心原理x閃避踩雷x創作指南 用Three.js與Shader圖說核心原理閃避踩雷創作指南 三百七十張全彩圖解0基礎也能駕馭的3D網頁設計
作者:蘇桓晨 (Umas) 著
出版年:2023
出版社:博碩文化
出版地:臺北市
集叢名:iThome鐵人賽
格式:EPUB 版式
頁數:383
ISBN:9786263336797
EISBN:9786263338012 EPUB; 9786263337886 PDF
分類:程式設計  
學網頁 3D 可以用聰明的方式融會貫通,
再也不用埋頭苦幹!
| 內容簡介
本書內容改編自第 14 屆 iThome 鐵人賽 Software Development 組的優選系列文章《30 天成為鍵盤麥可貝:前端視覺特效開發實戰》。本書透過不同前端 3D 作品案例逐步解釋 WebGL 底層運作原理,用淺顯易懂的方式,搭配豐富的插圖,進而解釋艱澀難懂的主題,幫助讀者打造屬於自己的網頁 3D 作品。內容從數學原理到畫面上的特效,從第一行程式碼到各個 bug 的解方,深入淺出,口吻風趣,涵蓋理論到實務創作的全面認識,帶領讀者輕鬆進入前端 3D 的大門。
網頁 3D 在創作時,最麻煩的是踩到深不見底的大坑,而這些大坑往往代表底層原理需要被理解,本書也依照不同案例會遇到的大坑做詳盡解釋,讓新手除了能夠打造自己的作品外,還可以省下埋頭苦幹的時間,用聰明的方式融會貫通!
| 核心內容
本書分為三部曲,第一部曲介紹多種底層關係,第二部曲提供多個 three.js 案例的教學同時引出原理,第三部曲深入 Shader 的世界。每一部都能單獨看,每一個案例都有上手的程式碼以及完成的程式碼,學網頁 3D 再也不必茫然!
| 目標讀者
◪ 對網頁開發相對陌生,但希望能更嘗試網頁 3D 並融入創作的網頁設計師
◪ 對 3D 相對陌生,但對網頁 3D 躍躍欲試的前端工程師
◪ 對網頁 3D 感到好奇,想多加認識該領域的勇者
◪ 想嘗試在網頁上呈現創作的 3D 建模師
◪ 尋找更酷炫的媒材加以創作的視覺藝術家
好評推薦
「我衷心推薦《網頁視覺特效最強必殺技大全》,書中很多艱澀的原理在 Umas 的文筆下都相當有趣,相信你將從中受益匪淺。」——蔡木景,《JavaScript 概念三明治》作者
再也不用埋頭苦幹!
| 內容簡介
本書內容改編自第 14 屆 iThome 鐵人賽 Software Development 組的優選系列文章《30 天成為鍵盤麥可貝:前端視覺特效開發實戰》。本書透過不同前端 3D 作品案例逐步解釋 WebGL 底層運作原理,用淺顯易懂的方式,搭配豐富的插圖,進而解釋艱澀難懂的主題,幫助讀者打造屬於自己的網頁 3D 作品。內容從數學原理到畫面上的特效,從第一行程式碼到各個 bug 的解方,深入淺出,口吻風趣,涵蓋理論到實務創作的全面認識,帶領讀者輕鬆進入前端 3D 的大門。
網頁 3D 在創作時,最麻煩的是踩到深不見底的大坑,而這些大坑往往代表底層原理需要被理解,本書也依照不同案例會遇到的大坑做詳盡解釋,讓新手除了能夠打造自己的作品外,還可以省下埋頭苦幹的時間,用聰明的方式融會貫通!
| 核心內容
本書分為三部曲,第一部曲介紹多種底層關係,第二部曲提供多個 three.js 案例的教學同時引出原理,第三部曲深入 Shader 的世界。每一部都能單獨看,每一個案例都有上手的程式碼以及完成的程式碼,學網頁 3D 再也不必茫然!
| 目標讀者
◪ 對網頁開發相對陌生,但希望能更嘗試網頁 3D 並融入創作的網頁設計師
◪ 對 3D 相對陌生,但對網頁 3D 躍躍欲試的前端工程師
◪ 對網頁 3D 感到好奇,想多加認識該領域的勇者
◪ 想嘗試在網頁上呈現創作的 3D 建模師
◪ 尋找更酷炫的媒材加以創作的視覺藝術家
好評推薦
「我衷心推薦《網頁視覺特效最強必殺技大全》,書中很多艱澀的原理在 Umas 的文筆下都相當有趣,相信你將從中受益匪淺。」——蔡木景,《JavaScript 概念三明治》作者
章節
- 書封
- 推薦序
- 序言
- CHAPTER 01 導論:前端3D視覺特效是什麼?
- PART Ⅰ | 用three.js理解3D世界觀
- CHAPTER 02 安裝、建置環境
- CHAPTER 03 Hello three.js!
- CHAPTER 04 three.js空間座標――讓世界繞著我旋轉!
- CHAPTER 05 什麼!空間被扭曲了?我three願稱你為最強――矩陣
- CHAPTER 06 The World!砸瓦魯多!歐拉歐拉歐拉!――歐拉角跟四元數
- CHAPTER 07 three.js圓弧的藝術家!弧線的教授!――OrbitControls軌道控制器
- CHAPTER 08 three.js的一方通行:矢量操作――全面釐清向量與底層特性
- CHAPTER 09 你有被光速踢過嗎?解析3D界的黃猿――光的底層原理與介紹
- CHAPTER 10 傲慢的太陽――光的開發
- PART Ⅱ | 用Three.js實戰3D作品
- CHAPTER 11 前端視覺特效工程師實戰:全球戰情室――貼圖原理
- CHAPTER 12 前端 3D 視覺特效開發實戰:全球戰情室――實作地球
- CHAPTER 13 3D地球特效開發實戰:留下飛雷神術式吧!――經緯度座標轉換
- CHAPTER 14 three.js 3D地球特效開發實戰:飛雷神之術走跳地球!――鏡頭追蹤與浮動文字
- CHAPTER 15 three.js 3D圖表特效開發實戰――繪畫就跟佐為下棋一樣簡單:線段原理
- CHAPTER 16 3D圖表特效開發實戰――來人!餵公子吃餅:圓餅圖
- CHAPTER 17 3D圖表特效開發實戰――你爹只給個爛餅,大不了還你3D爛餅:用粉圓體做立體圓餅圖
- CHAPTER 18 three.js GIS系統開發實戰――鄉鎮市區GIS系統:SVG、GeoJson的應用
- CHAPTER 19 three.js GIS系統開發實戰――成為網頁特效的鹿丸!影子模仿術:陰影的終極原理
- CHAPTER 20 three.js前端3D視覺特效開發實戰――設備檢視器:倒影特效
- CHAPTER 21 前端3D視覺特效開發實戰――智慧工廠:倒影特效
- CHAPTER 22 智慧工廠開發實戰――Dejavu!讓鏡頭跟著拓海一起飄移:鏡頭追蹤、飄移特效
- PART Ⅲ | 用Shader實戰視覺特效
- CHAPTER 23 WebGL Shader――你好啊大哥哥,沒想到你可以到Shader來呢!
- CHAPTER 24 WebGL Shader――從認識GLSL開始釐清Shader
- CHAPTER 25 WebGL Shader――透過自製環境光實作Shader傳值
- CHAPTER 26 使用Shader創造漸層
- CHAPTER 27 WebGL Shader――透過Shader製作光暈:速成篇
- CHAPTER 28 WebGL Shader――透過Shader製作光暈:Shader傳值的原理
- CHAPTER 29 WebGL Shader――透過Shader製作光暈:光暈原理與多種變化形式
- CHAPTER 30 WebGL Shader――用Shader做全視角內光暈、星球材質
- 後記
同書類書籍