網頁視覺特效最強必殺技大全:用 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 概念三明治》作者
 
作者簡介
 
蘇桓晨(Umas)
 
  跨足前端、設計、3D 領域的前端3D視覺特效創作家,擁有智慧建築、BIM、GIS 等系統開發經驗,熱愛研究獨特技術與探索複雜主題,經常在社群中分享研究成果、組織讀書會研究相關領域,並且創作前端 3D 視覺特效作品。
  • 書封
  • 推薦序
  • 序言
  • 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做全視角內光暈、星球材質
  • 後記
同書類書籍