Three.js前端三维图形开发案例集锦

　　本书以“问题描述 解决方案”的模式，使用二百多个实例介绍了Scene、Renderer、Camera、Geometry、Mesh、Light、Material、EffectComposer等Three.js封装的三维图形对象的具体应用，如绘制正交照相机，绘制透视照相机，浏览全景图，播放全景视频，创建天空盒，绘制沙漏，绘制被切割的圆柱体，绘制旋转的地球模型，绘制克莱因瓶，绘制莫比乌斯环，创建普通贴图、环境贴图、移位贴图、高光贴图、光照贴图，创建辉光特效、漂白特效、拖尾特效，检测图形边缘，添加轮廓边线，加载各种外部模型并播放模型动画等。 本书适合作为广大Web前端及三维图形开发人员的案头参考书，无论对于编程初学者，还是编程高手，本书都极具参考价值。

　　罗帅，自由职业者，深耕前端开发领域多年，积累了大量的开发经验和实战案例库，著有多部网页前端开发和移动开发的技术图书，曾经在清华大学出版社出版《Android炫酷应用300例.实战篇》《Android炫酷应用300例.提升篇》《Bootstrap Vue.js前端开发超实用代码集锦》《Android App开发超实用代码集锦——jQuery Mobile OpenCV OpenGL》等。

第1章场景
001在场景中自定义光源绘制立方体
002使用正交照相机绘制多个立方体
003使用CameraHelper绘制正交照相机
004使用透视照相机绘制多个立方体
005使用CameraHelper绘制透视照相机
006使用透视照相机滚动浏览全景图
007使用鼠标拖曳功能查看并缩放全景图
008使用鼠标拖曳功能播放全景视频
009在场景中添加粒子实现星空背景
010使用六幅图像的天空盒设置背景
011使用一个图像文件创建天空盒
012使用TransformControls平移对象
013使用TransformControls拉伸对象
014使用TransformControls旋转对象
015使用DragControls任意拖曳对象
016使用OrbitControls任意缩放对象
017使用OrbitControls旋转照相机
018在多个对象中使用鼠标选择对象
019在鼠标单击对象时改变对象颜色
020使用线性雾设置场景的雾化效果
021使用线性雾渲染场景的多个对象
022使用指数雾设置场景的雾化效果
023在场景中使用ArrowHelper绘制箭头
024在场景中使用AxesHelper绘制坐标轴
025使用CSS3DRenderer渲染全景图
026使用CSS3DRenderer渲染三维对象
027使用SVGRenderer渲染线条宽度
028使用多个渲染器渲染相同的场景
029在场景中统一设置所有对象的材质
030在场景中统一调整所有对象的亮度
031使用JSON格式保存和加载网格对象
032使用JSON格式保存和加载整个场景
 
 
 
第2章几何体
033使用图像设置立方体的各个表面
034使用多个图像设置立方体的表面
035使用多种颜色设置立方体的表面
036使用视频设置立方体的各个表面
037使用颜色和视频设置立方体表面
038使用画布贴图设置立方体的表面
039使用画布动画设置立方体的表面
040使用天空盒背景设置立方体表面
041根据索引设置立方体face的材质
042隐藏或显示立方体的指定表面
043在场景中根据透明度绘制立方体
044在场景中绘制圆角化的立方体
045在场景中绘制居中显示的魔方
046在场景中围绕坐标轴旋转立方体
047在场景中根据名称旋转立方体
048在场景中绘制普通的圆柱体
049在场景中绘制被切割的圆柱体
050在场景中根据圆柱体绘制圆台
051在场景中根据圆柱体绘制沙漏
052在场景中绘制旋转的圆柱体
053在场景中实现动态缩放圆柱体
054在场景中绘制普通的圆锥体
055在场景中绘制被切割的圆锥体
056在经度方向上根据弧度绘制球体
057在纬度方向上根据弧度绘制球体
058在经纬度方向上根据弧度绘制球体
059在场景中以嵌套方式绘制多个球体
060在场景中同时绘制球体和圆柱体
061在场景中绘制持续旋转的球体
062在场景中绘制旋转的地球模型
063在场景中实现小球围绕大球旋转的效果
064在场景中围绕隐藏的中心旋转球体
065在场景中实现沿着轨道旋转球体的效果
066在场景中为球体添加弹跳动画
067在场景中绘制整周样条曲线图形
068在场景中绘制半周样条曲线图形
069在场景中绘制样条曲线及其图形
070在场景中绘制样条曲线的线框盒
071在场景中绘制旋转的圆环面
072在场景中绘制旋转的扇面
073在场景中绘制正弦样式的管子
074在场景中自定义曲线绘制管子
075在场景中自定义曲线绘制扭结
076在场景中自定义顶点绘制曲线
077在场景中绘制甜甜圈式的圆环
078在场景中根据弧度绘制半圆环
079在场景中绘制救生圈式的圆环
080在场景中绘制多次旋转的圆环结
081在场景中隐藏或显示圆环结
082在场景中绘制自定义多面体
083使用多面体方法绘制八面体
084使用多面体方法绘制四面体
085在场景中自定义顶点绘制凸面体
086在场景中绘制立方体的边框线
087在场景中绘制二十面体的边框线
088在场景中绘制十二面体的边框线
089在场景中使用虚线绘制对象边框
090在场景中绘制多条不连续的线段
091在场景中使用渐变色线条绘制图形
092在场景中自定义线条的宽度和颜色
093在场景中根据二维坐标绘制螺线
094在场景中根据三维坐标绘制螺线
095在场景中使用虚线绘制空心矩形
096在场景中根据路径拉伸圆角矩形
097在场景中根据路径拉伸多个矩形
098在场景中拉伸自定义的SVG图形
099在场景中根据顶点绘制空心三角形
100在场景中根据顶点绘制空心七边形
101在场景中根据顶点绘制空心五角星
102在场景中根据指定厚度绘制五角星
103在场景中沿着随机曲线拉伸五角星
104在场景中根据顶点绘制空心六角星
105在场景中根据边数绘制多边形
106在场景中使用曲线绘制桃心
107在场景中使用虚线绘制桃心
108在场景中根据厚度和斜角绘制桃心
109在场景中沿着桃心边线移动小球
110在场景中使用多个桃心构建球体
111在场景中根据半径和切片绘制圆
112在场景中根据指定参数绘制扇形
113在场景中根据指定参数绘制圆弧
114在场景中根据指定参数绘制椭圆
115通过自定义函数绘制克莱因瓶
116通过自定义函数绘制莫比乌斯环
117通过自定义函数绘制NURBS曲面
118通过自定义函数绘制波浪图形
119通过自定义函数绘制平面图形
120在场景中为平面图形添加波浪
121在场景中绘制法向量贴图波浪
122在场景中绘制太阳照射的波浪
123在场景中绘制自定义平面图形
124在平面图形的前后设置相同贴图
125在平面图形的前后设置不同贴图
126使用FontLoader加载字库绘制英文字母
127使用TTFLoader加载字库绘制数字
128在场景中绘制自定义的斜角字母
129在场景中加载中文字库绘制汉字
130使用精简的自定义字库绘制汉字
131在场景中绘制线条镂空的汉字
132使用自定义属性自定义线条颜色
133在场景中根据汉字实现汉字镜像
134在场景中加载中文字库绘制二维汉字
135在场景中的球体上添加文本标签
136在场景中的文本上添加火焰动画
137深度遍历在组中的多个子对象
138使用InstancedBufferGeometry
139使用InstancedMesh提升渲染性能
第3章光源
140绘制DirectionalLight光源产生的阴影
141模糊DirectionalLight光源产生的阴影
142绘制DirectionalLight光源的辅助线
143绘制PointLight光源产生的阴影
144绘制PointLight光源的辅助线
145绘制PointLight光源的光线阴影
146绘制SpotLight光源产生的阴影
147绘制SpotLight光源的辅助线
148绘制HemisphereLight光源的辅助线
149绘制RectAreaLight光源的辅助图形
150绘制多个光源照射球体产生的阴影
151在场景中自定义环境光的强度
152在场景中实现飘移的特殊光晕镜头
第4章材质
153使用MeshBasicMaterial设置表面颜色
154使用MeshBasicMaterial创建材质数组
155在MeshBasicMaterial中启用透明度
156在MeshBasicMaterial中使用普通贴图
157在MeshBasicMaterial中使用环境贴图
158自定义MeshBasicMaterial的贴图样式
159创建线框风格的MeshBasicMaterial
160使用MeshBasicMaterial混合其他材质
161根据视频创建MeshBasicMaterial材质
162在MeshStandardMaterial中使用ao贴图
163在MeshStandardMaterial中使用移位贴图
164在MeshMatcapMaterial中设置matcap
165使用MeshNormalMaterial创建多色表面
166使用MeshNormalMaterial创建多色字母
167使用MeshNormalMaterial绘制法向量
168在MeshNormalMaterial中设置着色器
169扁平化MeshNormalMaterial创建的球体
170使用MeshDepthMaterial淡化多个图形
171使用MeshDepthMaterial绘制随机图形
172使用MeshDepthMaterial绘制圆环结
173使用MeshDepthMaterial混合其他材质
174在场景属性中设置MeshDepthMaterial
175在MeshPhongMaterial中使用普通贴图
176在MeshPhongMaterial中使用高光贴图
177在MeshPhongMaterial中使用法向量贴图
178在MeshPhongMaterial中使用凹凸贴图
179在MeshPhongMaterial中镜像平铺贴图
180在MeshPhongMaterial中重复平铺贴图
181在MeshPhongMaterial中使用剪裁平面
182使用MeshLambertMaterial呈现局部照射
183在MeshLambertMaterial中使用普通贴图
184在MeshLambertMaterial中使用环境贴图
185在MeshLambertMaterial中使用光照贴图
186设置MeshLambertMaterial贴图重复方式
187在MeshLambertMaterial中实现发光的效果
188在MeshLambertMaterial中实现形变动画
189在MeshLambertMaterial中启用反射特效
190使用SpriteMaterial绘制平面粒子
191使用SpriteMaterial随机绘制粒子
192根据画布内容创建SpriteMaterial
193使用普通贴图创建SpriteMaterial
194根据颜色和尺寸创建PointsMaterial
195在PointsMaterial中自定义粒子形状
196使用普通贴图创建PointsMaterial
197使用渐变纹理贴图创建PointsMaterial
198使用PointsMaterial创建雨滴下落动画
199使用PointsMaterial创建雪花飘舞动画
200使用PointsMaterial创建粒子波动动画
201使用ShaderMaterial创建自定义着色器
202使用ShaderMaterial自定义颜色饱和度
203使用ShaderMaterial将彩色转换为灰度
204使用ShaderMaterial高亮显示凹面和凸面
205使用ShaderMaterial自定义字母线条颜色
206使用ShaderMaterial动态改变贴图的颜色
207使用ShaderMaterial实现持续燃烧的大火
208使用ShaderMaterial实现变换的时空漩涡
209使用外部着色器自定义ShaderMaterial
210使用LineDashedMaterial绘制高斯帕曲线
第5章后期特效
211在场景中的三维图形上添加马赛克
212在场景中的三维图形上添加小灰点
213在场景中的三维图形上添加怀旧特效
214在场景中的三维图形上添加重影特效
215在场景中的三维图形上添加特艺彩色
216在场景中的三维图形上添加锯齿特效
217在场景中的三维图形上添加泛光特效
218在场景中的三维图形上添加辉光特效
219在场景中的三维图形上添加老电影特效
220在场景中的三维图形上添加电脉冲特效
221在场景中的三维图形上添加漂白特效
222在场景中的三维图形上添加光晕特效
223在场景中的三维图形上添加聚焦特效
224在场景中的三维图形上添加模糊特效
225在场景中的三维图形上添加三角形模糊
226在场景中的三维图形上添加拖尾特效
227根据在场景中的三维图形添加水平镜像
228根据在场景中的三维图形添加垂直镜像
229对在场景中的三维图形进行水平移轴
230对在场景中的三维图形进行垂直移轴
231对在场景中的三维图形进行伽马校正
232对在场景中的三维图形进行颜色校正
233对在场景中的三维图形使用颜色过滤
234自定义在场景中的三维图形颜色色调
235自定义在场景中的三维图形颜色饱和度
236自定义在场景中的三维图形颜色对比度
237自定义在场景中的三维图形颜色亮度
238自定义在场景中的三维图形光亮度
239使用Sobel算子检测三维图形边缘
240使用FreiChenShader检测三维图形边缘
241在场景中的三维图形上添加轮廓边线
242在场景中根据三维图形实现万花筒变换
243在场景中以三维眼镜视觉查看三维图形
第6章外部模型
244使用AssimpLoader加载Assimp模型
245使用BabylonLoader加载Babylon模型
246使用LegacyJSONLoader加载JSON文件
247使用MTLLoader加载模型材质
248使用AWDLoader加载AWD模型
249使用STLLoader加载STL模型
250使用FBXLoader加载FBX模型
251播放使用FBXLoader加载的FBX模型
252使用VOXLoader加载VOX模型
253使用DRACOLoader加载DRC模型
254使用AMFLoader加载AMF模型
255使用ThreeMFLoader加载3MF模型
256使用TDSLoader加载3DS模型
257使用Rhino3dmLoader加载3DM模型
258使用PRWMLoader加载PRWM模型
259使用SVGLoader加载SVG模型
260使用FileLoader加载SVG模型
261使用CTMLoader加载CTM模型
262使用OBJLoader加载OBJ模型
263使用ObjectLoader加载JSON文件
264使用ObjectLoader加载圆环结模型
265使用PDBLoader加载PDB模型
266使用PCDLoader加载PCD模型
267使用GLTFLoader加载GLTF模型
268使用GLTFLoader加载GLB模型
269使用ColladaLoader加载DAE模型
270加载并播放DAE格式的模型动画
271加载并播放GLB格式的模型动画
272加载并播放MMD格式的模型动画
273使用Tween动画控制皮肤模型状态
274使用Tween动画拉伸和折叠PLY模型
275使用DDSLoader加载DDS图像文件
276使用TGALoader加载TGA图像文件
277使用ImageBitmapLoader加载图像
278使用SubdivisionModifier细化模型