包郵 Three.js權(quán)威指南 在網(wǎng)頁(yè)上創(chuàng)建3D圖形和動(dòng)畫的方法與實(shí)踐(原書第4版)
-
>
全國(guó)計(jì)算機(jī)等級(jí)考試最新真考題庫(kù)模擬考場(chǎng)及詳解·二級(jí)MSOffice高級(jí)應(yīng)用
-
>
決戰(zhàn)行測(cè)5000題(言語(yǔ)理解與表達(dá))
-
>
軟件性能測(cè)試.分析與調(diào)優(yōu)實(shí)踐之路
-
>
第一行代碼Android
-
>
JAVA持續(xù)交付
-
>
EXCEL最強(qiáng)教科書(完全版)(全彩印刷)
-
>
深度學(xué)習(xí)
Three.js權(quán)威指南 在網(wǎng)頁(yè)上創(chuàng)建3D圖形和動(dòng)畫的方法與實(shí)踐(原書第4版) 版權(quán)信息
- ISBN:9787111771333
- 條形碼:9787111771333 ; 978-7-111-77133-3
- 裝幀:平裝-膠訂
- 冊(cè)數(shù):暫無(wú)
- 重量:暫無(wú)
- 所屬分類:>
Three.js權(quán)威指南 在網(wǎng)頁(yè)上創(chuàng)建3D圖形和動(dòng)畫的方法與實(shí)踐(原書第4版) 本書特色
Three.js已成為創(chuàng)建令人驚嘆的3D WebGL內(nèi)容的行業(yè)標(biāo)準(zhǔn)。在本書中,你將學(xué)習(xí)Three.js的所有功能,了解如何將其與*新的物理引擎集成。你還將掌握直接在瀏覽器中創(chuàng)建身臨其境的3D場(chǎng)景并制作動(dòng)畫的技巧,充分挖掘WebGL和現(xiàn)代瀏覽器的潛力。
Three.js權(quán)威指南 在網(wǎng)頁(yè)上創(chuàng)建3D圖形和動(dòng)畫的方法與實(shí)踐(原書第4版) 內(nèi)容簡(jiǎn)介
Three.js已成為創(chuàng)建令人驚嘆的3D WebGL內(nèi)容的行業(yè)標(biāo)準(zhǔn)。在本書中,你將學(xué)習(xí)Three.js的所有功能,了解如何將其與*新的物理引擎集成。你還將掌握直接在瀏覽器中創(chuàng)建身臨其境的3D場(chǎng)景并制作動(dòng)畫的技巧,充分挖掘WebGL和現(xiàn)代瀏覽器的潛力。
本書首先介紹Three.js中使用的基本概念和構(gòu)建模塊,通過(guò)大量示例和代碼幫助你詳細(xì)探索這些基本主題。你將學(xué)習(xí)如何使用紋理和材質(zhì)創(chuàng)建逼真的3D物體,以及如何從外部資源加載現(xiàn)有模型。接下來(lái),你將了解如何使用Three.js內(nèi)置的相機(jī)控件控制相機(jī),這將使你能夠在創(chuàng)建的3D場(chǎng)景中飛行或行走。然后將介紹如何使用HTML5視頻和畫布元素作為三維對(duì)象的材質(zhì),為模型制作動(dòng)畫。在了解如何為場(chǎng)景添加重力和碰撞檢測(cè)等物理特性之前,你將學(xué)習(xí)如何使用變形目標(biāo)和基于骨骼的動(dòng)畫。*后,你將掌握如何將Blender與Three.js相結(jié)合,并創(chuàng)建VR和AR場(chǎng)景。
本書結(jié)束時(shí),你將掌握使用Three.js創(chuàng)建三維動(dòng)畫圖形的技巧。
通過(guò)本書,你將學(xué)到:
·使用Three.js提供的不同相機(jī)控件來(lái)瀏覽3D場(chǎng)景。
·探索直接使用頂點(diǎn)創(chuàng)建雪、雨和星系效果。
·從glTF、OBJ、STL和COLLADA等外部格式導(dǎo)入模型并制作動(dòng)畫。
·使用變形目標(biāo)和基于骨骼的動(dòng)畫設(shè)計(jì)和運(yùn)行動(dòng)畫。
·使用高級(jí)材質(zhì)紋理創(chuàng)建逼真的3D物體。
·通過(guò)創(chuàng)建自定義頂點(diǎn)和片段著色器直接與WebGL交互。
·使用Rapier物理引擎制作場(chǎng)景,并將Three.js與VR和AR集成。
Three.js權(quán)威指南 在網(wǎng)頁(yè)上創(chuàng)建3D圖形和動(dòng)畫的方法與實(shí)踐(原書第4版)Three.js權(quán)威指南 在網(wǎng)頁(yè)上創(chuàng)建3D圖形和動(dòng)畫的方法與實(shí)踐(原書第4版) 前言
Preface 前 言
Three.js在過(guò)去幾年中已經(jīng)成為創(chuàng)建令人驚嘆的3D WebGL內(nèi)容的標(biāo)準(zhǔn)方式。在本書中,我們將探討Three.js的所有特性,并提供額外的內(nèi)容,包括如何將Three.js與Blender、React、TypeScript以及*新的物理引擎進(jìn)行集成。
在本書中,你將學(xué)習(xí)如何在瀏覽器中直接創(chuàng)建和動(dòng)畫化沉浸式3D場(chǎng)景,充分利用WebGL和現(xiàn)代瀏覽器的潛力。
本書從Three.js使用的基本概念和模塊開始,并通過(guò)大量的示例和代碼幫助你詳細(xì)了解這些基本主題。你還將學(xué)習(xí)如何使用紋理和材質(zhì)創(chuàng)建逼真的3D對(duì)象。除了手動(dòng)創(chuàng)建這些對(duì)象之外,我們還將解釋如何從外部文件加載現(xiàn)有模型。接下來(lái),你將了解如何使用Three.js內(nèi)置的相機(jī)控件輕松控制相機(jī),這將使你能夠在你創(chuàng)建的3D場(chǎng)景中飛行或行走。然后,后面的章節(jié)將向你展示如何將HTML5視頻和canvas元素用作3D對(duì)象的材質(zhì)并為你的模型添加動(dòng)畫。你將學(xué)習(xí)如何使用變形和蒙皮動(dòng)畫,了解如何將物理效果(如重力和碰撞檢測(cè))添加到場(chǎng)景中。*后,我們將解釋如何將Blender與Three.js結(jié)合使用,如何將Three.js與React和TypeScript集成,以及如何使用Three.js創(chuàng)建VR(Virtual Reality,虛擬現(xiàn)實(shí))和AR(Augmented Reality,增強(qiáng)現(xiàn)實(shí))場(chǎng)景。
Three.js權(quán)威指南 在網(wǎng)頁(yè)上創(chuàng)建3D圖形和動(dòng)畫的方法與實(shí)踐(原書第4版) 目錄
Contents 目 錄
前言
關(guān)于作者
關(guān)于審校者
**部分 搭建開發(fā)環(huán)境和
運(yùn)行Three.js
第1章 使用Three.js創(chuàng)建你的
**個(gè)3D場(chǎng)景2
1.1 技術(shù)要求5
1.2 測(cè)試和實(shí)驗(yàn)示例9
1.3 探索Three.js應(yīng)用程序的
HTML結(jié)構(gòu)11
1.4 渲染和查看3D對(duì)象13
1.4.1 設(shè)置場(chǎng)景14
1.4.2 添加光源16
1.4.3 添加網(wǎng)格17
1.4.4 添加動(dòng)畫循環(huán)19
1.4.5 使用lil-gui來(lái)控制屬性,
從而使實(shí)驗(yàn)更容易23
1.5 輔助工具25
1.6 本章小結(jié)26
第2章 Three.js應(yīng)用程序的基本組件28
2.1 創(chuàng)建場(chǎng)景28
2.2 幾何體和網(wǎng)格的關(guān)系38
2.2.1 幾何體的屬性和函數(shù)38
2.2.2 網(wǎng)格的函數(shù)和屬性44
2.3 針對(duì)不同的場(chǎng)景使用不同的相機(jī)47
2.3.1 正交相機(jī)與透視相機(jī)48
2.3.2 確定相機(jī)需要看向的位置53
2.3.3 調(diào)試相機(jī)的視角53
2.4 本章小結(jié)55
第3章 在Three.js中使用光源56
3.1 Three.js提供了哪些類型的光源57
3.2 如何使用基本光源57
3.2.1 THREE.AmbientLight58
3.2.2 THREE.SpotLight60
3.2.3 THREE.PointLight67
3.2.4 THREE.DirectionalLight70
3.2.5 使用THREE.Color對(duì)象72
3.3 特殊光源74
3.3.1 THREE.HemisphereLight74
3.3.2 THREE.RectAreaLight76
3.3.3 THREE.LightProbe77
3.3.4 THREE.LensFlare80
3.4 本章小結(jié)83
第二部分 Three.js核心組件
第4章 使用Three.js材質(zhì)86
4.1 常見的材質(zhì)屬性87
4.1.1 基本屬性87
4.1.2 混合屬性89
4.1.3 高級(jí)屬性89
4.2 從簡(jiǎn)單材質(zhì)開始90
4.2.1 THREE.MeshBasicMaterial90
4.2.2 THREE.MeshDepthMaterial94
4.2.3 組合材質(zhì)95
4.2.4 THREE.MeshNormalMaterial95
4.2.5 為單個(gè)網(wǎng)格對(duì)象指定多個(gè)材質(zhì)98
4.3 高級(jí)材質(zhì)102
4.3.1 THREE.MeshLambertMaterial103
4.3.2 THREE.MeshPhongMaterial104
4.3.3 THREE.MeshToonMaterial106
4.3.4 THREE.MeshStandardMaterial106
4.3.5 THREE.MeshPhysicalMaterial108
4.3.6 THREE.ShadowMaterial109
4.3.7 使用自定義著色器與THREE.
ShaderMaterial109
4.3.8 使用CustomShaderMaterial
自定義現(xiàn)有著色器114
4.4 線形幾何體可以使用的材質(zhì)115
4.4.1 THREE.LineBasicMaterial115
4.4.2 THREE.LineDashedMaterial118
4.5 本章小結(jié)119
第5章 基本幾何體120
5.1 2D幾何體121
5.1.1 THREE.PlaneGeometry121
5.1.2 THREE.CircleGeometry123
5.1.3 THREE.RingGeometry125
5.1.4 THREE.ShapeGeometry126
5.2 3D幾何體131
5.2.1 THREE.BoxGeometry131
5.2.2 THREE.SphereGeometry132
5.2.3 THREE.CylinderGeometry134
5.2.4 THREE.ConeGeometry135
5.2.5 THREE.TorusGeometry136
5.2.6 THREE.TorusKnotGeometry137
5.2.7 THREE.PolyhedronGeometry140
5.2.8 THREE.IcosahedronGeometry142
5.2.9 THREE.TetrahedronGeometry142
5.2.10 THREE.OctahedronGeometry142
5.2.11 THREE.Dodecahedron-
Geometry144
5.3 本章小結(jié)144
第6章 高級(jí)幾何體146
6.1 學(xué)習(xí)高級(jí)幾何體146
6.1.1 THREE.ConvexGeometry147
6.1.2 THREE.LatheGeometry148
6.1.3 BoxLineGeometry150
6.1.4 THREE.RoundedBox-
Geometry151
6.1.5 TeapotGeometry152
6.2 通過(guò)2D形狀創(chuàng)建3D幾何體153
6.2.1 THREE.ExtrudeGeometry153
6.2.2 THREE.TubeGeometry155
6.2.3 從SVG圖像中拉伸3D形狀157
6.2.4 THREE.ParametricGeometry160
6.3 用于調(diào)試的幾何體163
6.3.1 THREE.EdgesGeometry163
6.3.2 THREE.WireFrameGeometry164
6.4 創(chuàng)建一個(gè)3D文字網(wǎng)格165
6.4.1 渲染文本165
6.4.2 添加自定義字體167
6.4.3 使用Troika庫(kù)創(chuàng)建文本168
6.5 本章小結(jié)169
第7章 點(diǎn)和精靈170
7.1 理解點(diǎn)和精靈171
7.2 使用紋理樣式化粒子175
7.2.1 使用HTML canvas繪制圖像175
7.2.2 使用紋理來(lái)設(shè)置粒子的樣式177
7.3 使用精靈貼圖183
7.4 從現(xiàn)有幾何體創(chuàng)建THREE.Points186
7.5 本章小結(jié)187
第三部分 創(chuàng)建復(fù)雜的幾何體、
動(dòng)畫和紋理
第8章 創(chuàng)建和加載復(fù)雜的網(wǎng)格
和幾何體190
8.1 幾何體分組和合并190
8.1.1 對(duì)象分組190
8.1.2 合并幾何體194
8.2 從外部資源加載幾何體196
8.3 從3D文件格式導(dǎo)入202
8.3.1 OBJ和MTL格式202
8.3.2 加載glTF模型206
8.3.3 展示完整的樂(lè)高模型207
8.3.4 加載基于voxel的模型208
8.3.5 從PDB渲染蛋白質(zhì)211
8.3.6 從PLY模型加載點(diǎn)云214
8.3.7 其他加載器215
8.4 本章小結(jié)216
第9章 動(dòng)畫和移動(dòng)相機(jī)217
9.1 基本動(dòng)畫217
9.1.1 簡(jiǎn)單動(dòng)畫218
9.1.2 選擇和移動(dòng)對(duì)象220
9.1.3 使用Tween.js來(lái)創(chuàng)建動(dòng)畫224
9.2 通過(guò)相機(jī)實(shí)現(xiàn)動(dòng)畫228
9.2.1 ArcballControls228
9.2.2 TrackBallControls230
9.2.3 FlyControls232
9.2.4 FirstPersonControls233
9.2.5 OrbitControls235
9.3 變形和蒙皮動(dòng)畫236
9.3.1 使用變形目標(biāo)實(shí)現(xiàn)動(dòng)畫236
9.3.2 使用變形目標(biāo)和混合器
實(shí)現(xiàn)動(dòng)畫238
9.3.3 使用蒙皮動(dòng)畫實(shí)現(xiàn)動(dòng)畫244
9.4 使用外部模型創(chuàng)建動(dòng)畫247
9.4.1 使用gltfLoader247
9.4.2 使用fbxLoader可視化動(dòng)作
捕捉模型249
9.4.3 從Quake模型加載動(dòng)畫251
9.4.4 從COLLADA模型加載動(dòng)畫251
9.4.5 使用BVHLoader可視化骨骼253
9.5 本章小結(jié)254
第10章 加載和使用紋理255
10.1 在材質(zhì)中應(yīng)用紋理255
10.1.1 加載紋理并將其應(yīng)用于
網(wǎng)格255
10.1.2 使用凹凸貼圖來(lái)為網(wǎng)格提供
更多的細(xì)節(jié)259
10.1.3 使用法線貼圖實(shí)現(xiàn)更細(xì)致的
凹凸和皺紋261
10.1.4 使用位移貼圖來(lái)改變頂點(diǎn)
的位置263
10.1.5 使用環(huán)境光遮蔽貼圖添加
細(xì)致的陰影265
10.1.6 使用光照貼圖創(chuàng)建偽光照
效果268
10.1.7 金屬貼圖和粗糙貼圖269
10.1.8 使用透明貼圖創(chuàng)建透明
模型271
10.1.9 使用發(fā)光貼圖使模型發(fā)光273
10.1.10 使用高光貼圖來(lái)確定模型
的閃亮度275
10.1.11 使用環(huán)境貼圖創(chuàng)建偽反射277
10.1.12 重復(fù)包裹282
10.2 使用HTML5 canvas作為紋理
的輸入284
10.2.1 使用HTML5 canvas創(chuàng)建
顏色貼圖285
10.2.2 使用canvas作為凸凹貼圖286
10.2.3 使用視頻輸出作為紋理288
10.3 本章小結(jié)289
第四部分 后期處理、物理模擬
和音頻集成
第11章 渲染后期處理292
11.1 設(shè)置Three.js以支持后期處理292
11.1.1 創(chuàng)建THREE.EffectCom-
poser293
11.1.2 配置THREE.EffectComposer
以進(jìn)行后期處理294
11.1.3 更新渲染循環(huán)295
11.2 后期處理通道296
11.2.1 簡(jiǎn)單的后期處理通道297
11.2.2 在同一屏幕上顯示多個(gè)
渲染器的輸出302
11.2.3 其他簡(jiǎn)單通道303
11.3 高級(jí)EffectComposer流之
使用遮罩305
11.3.1 高級(jí)通道—散景309
11.3.2 高級(jí)通道—環(huán)境光遮蔽311
11.4 使用THREE.ShaderPass
自定義效果313
11.4.1 簡(jiǎn)單著色器314
11.4.2 模糊著色器318
11.5 創(chuàng)建自定義后期處理著色器320
11.5.1 自定義灰度著色器320
11.5.2 創(chuàng)建自定義位著色器324
11.6 本章小結(jié)325
第12章 給場(chǎng)景添加物理效果
和音效326
12.1 使用Rapier創(chuàng)建基本Three.js
場(chǎng)景327
12.1.1 設(shè)置世界和創(chuàng)建描述328
12.1.2 渲染場(chǎng)景并模擬世界330
12.2 在Rapier中模擬多米諾骨牌331
12.3 設(shè)置摩擦力和恢復(fù)力335
12.4 Rapier支持的形狀338
12.5 使用關(guān)節(jié)限制對(duì)象的移動(dòng)341
12.5.1 用固定關(guān)節(jié)連接兩個(gè)對(duì)象341
12.5.2 使用球形關(guān)節(jié)連接對(duì)象342
12.5.3 使用旋轉(zhuǎn)關(guān)節(jié)來(lái)限制兩個(gè)
對(duì)象之間的旋轉(zhuǎn)運(yùn)動(dòng)344
12.5.4 使用平移關(guān)節(jié)來(lái)限制一個(gè)
對(duì)象只能沿一個(gè)軸移動(dòng)346
12.6 將聲源添加到場(chǎng)景中348
12.7 本章小結(jié)350
第13章 結(jié)合使用Blender和
Three.js351
13.1 從Three.js導(dǎo)出場(chǎng)景并將其
導(dǎo)入Blender352
13.2 從Blender導(dǎo)出靜態(tài)場(chǎng)景并將其
導(dǎo)入Three.js356
13.3 從Blender導(dǎo)出動(dòng)畫并將其
導(dǎo)入Three.js359
13.4 用Blender烘焙光照貼圖和
環(huán)境光遮蔽貼圖365
13.4.1 在Blender中設(shè)置場(chǎng)景365
13.4.2 將光照加入場(chǎng)景367
13.4.3 將光照烘焙到紋理中369
13.4.4 導(dǎo)出場(chǎng)景并將其導(dǎo)入
Blender373
13.4.5 用Blender烘焙環(huán)境光
遮蔽貼圖375
13.5 在Blender中進(jìn)行自定義
UV建模376
13.6 本章小結(jié)380
第14章 結(jié)合使用Three.js與React、
TypeScript、Web-XR381
14.1 結(jié)合使用Three.js和TypeScript382
14.2 在TypeScript的幫助下集成
Three.js和React385
14.3 在Three.js fibers的幫助下輕松
集成Three.js和React389
14.4 Three.js和VR395
14.5 Three.js和AR400
14.6 本章小結(jié)402
Three.js權(quán)威指南 在網(wǎng)頁(yè)上創(chuàng)建3D圖形和動(dòng)畫的方法與實(shí)踐(原書第4版) 作者簡(jiǎn)介
Jos Dirksen擁有近20年的軟件開發(fā)和架構(gòu)設(shè)計(jì)經(jīng)驗(yàn),涵蓋從后端開發(fā)(如Java、Kotlin和Scala)到前端開發(fā)(使用HTML5、CSS、JavaScript和TypeScript)的多種技術(shù)。除了熟練運(yùn)用這些技術(shù)外,Jos還經(jīng)常在技術(shù)會(huì)議上發(fā)表演講,并在博客上分享關(guān)于新技術(shù)和有趣技術(shù)的文章。他還喜歡嘗試新技術(shù),并探索如何利用它們來(lái)創(chuàng)建美觀的數(shù)據(jù)可視化。他目前是一名自由職業(yè)的全棧工程師,參與多個(gè)Scala和TypeScript項(xiàng)目。Jos曾在私營(yíng)公司(如ING、ASML、Malmberg和Philips)和國(guó)營(yíng)機(jī)構(gòu)(如美國(guó)國(guó)防部和阿姆斯特丹港)擔(dān)任過(guò)許多不同的角色。
- >
經(jīng)典常談
- >
新文學(xué)天穹兩巨星--魯迅與胡適/紅燭學(xué)術(shù)叢書(紅燭學(xué)術(shù)叢書)
- >
莉莉和章魚
- >
朝聞道
- >
龍榆生:詞曲概論/大家小書
- >
二體千字文
- >
羅曼·羅蘭讀書隨筆-精裝
- >
中國(guó)人在烏蘇里邊疆區(qū):歷史與人類學(xué)概述