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

问题描述+解决方案+真实源码+效果截图，278个实例，提供完整源代码，边看边做边学

本书以“问题描述+解决方案”的模式，使用二百多个实例介绍了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在场景中使用AesHelper绘制坐标轴




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加载字库绘制数字