这一节单独来列一下我们做过的所有实战,持续更新:
随机山脉地形

学完顶点概念之后的一个实战,我们可以通过自定义顶点数据加上噪声算法来生成这种几何体。
云雷纹

学完曲线 API 之后的练习
隧道穿梭

学完曲线、纹理贴图、生成几何体之后,做了一个弯曲的管道,然后通过相机动画来实现穿梭管道的效果。
无限时空隧道

学完 uv 动画后,用 uv 动画 + alphaMap + HSL 改变色相的方式实现的无限隧道,是一个比较综合的小实战。
盖房子

学习用 Shape + ExtrudeGeometry 来画各种形状然后拉伸成几何体,加上纹理贴图,来自己盖了一个房子。
然后相机动画做了圆周运动,并且每转一周都会随机修改相机位置。
颜色渐变柱状图

学完自定义顶点颜色之后的实战,自定义顶点颜色实现渐变,结合 canvas 来绘制数字,设置 CanvasTexture
林海雪原

学完阴影、Sprite、模型加载,之后的实战,练习了自定义顶点 + 噪声算法实现山脉地形、gltf 模型的加载和遍历操作、阴影、Sprite 实现下雪效果、自定义顶点颜色实现不同海拔高度不同颜色、相机圆周运动等基础知识。
丝滑入场动画


学完 tween.js 之后的练习,给 3D 场景加一个入场的过渡效果。
3D 饼图

用到了曲线 CurvePath + ExtrudeGeometry 来画形状,Sprite + canvas 画标签,tweenjs 做缓动动画。
难点在于角度的计算,需要计算出中间角度,根据 cos、sin 来计算移动的目标位置。
双人斗舞


这个实战我们综合用到了聚光灯、阴影、gltf 模型加载、后期处理、射线和点击、css2d 标注、tweenjs 相机缓动动画、音频播放等基础知识,是一个比较综合的实战。
汽车选配


学完 PBR 材质的实战,深入理解金属度、粗糙度、清漆度、清漆层粗糙度、透光率、折射率等属性。
练舞房

学完镜子效果的实战。
用 Reflector 创建了 4 面镜子,然后加载 gltf 人物模型,用 AnimationMixer 播放了跳舞的骨骼动画。
用 Tween.js 做了圆周的相机动画。
之后添加了矩形平面光,用它的 ReactAreaLightHelper 来做灯管效果。
最后添加了平行光的阴影。
音乐频谱可视化

用 AudioAnalyser 拿到音频频谱数据,然后用 lodash 分组之后求和,最后得到一个 20 多个元素的数组,然后用 BoxGeometry 画立方体来可视化。
通过自定义顶点颜色实现了根据高度来设置颜色的渐变色效果。
数字雨

学完 three-spritetext 这个包的实战,练习绘制文字。
3D 音乐播放器

学完音频 API 后的一个实战,用 canvas 绘制的播放、暂停按钮的纹理图片,还有歌词,用 Tween.js 实现的歌词的动画,用 AudioAnalyser 实现了频谱的可视化,然后用 Sprite + 噪声算法实现了跳动的音符。
T 恤印花设计



用贴花几何体 DecalGeometry 实现的在T恤表面添加装饰的功能。
并且还可以保存设计结果为图片、视频。
3D 电脑

这个实战是练习 CSS3DRenderer,可以用 html css 来画一些 3D 场景里的内容,比如电脑屏幕。
Three.js Editor


我们实现了和https://threejs.org/editor/功能一样的 3D 编辑器。
支持物体的添加、删除,位移、旋转、缩放,属性编辑。
所有数据存在 json 里,通过 json 渲染场景,从而把场景保存下来。
这个编辑器比较小,但五脏俱全,做完这个编辑器,你对各种 3D 编辑器就都有思路了。
酷家乐装修编辑器





第一个综合实战做这个经典的 3D 项目,酷家乐装修编辑器
从户型切换、到拖拽家具到 3D 场景,到预览编辑好的效果,整体和酷家乐的流程一样
自定义控制器

自己实现了 TransformControls,类似酷家乐的那种控制器。
之后需要自己实现控制器的时候就有思路了。
打保龄球

这是物理引擎 cannon 的实战,实现碰撞、弹性、摩擦等。
小猪爱心发射器

这是一个粒子效果的实战,点击小猪会发射爱心粒子。
使用锥形的发射器实现的粒子效果,是 three-quarks 的小练习。
火树银花

这是一个粒子效果的实战,用 three.quarks 的粒子系统的锥形发射器发射粒子,设置重力和反弹,并且自定义了粒子速度变化。
小鱼吐泡泡

粒子效果的实战,用 gsap 实现的来回游动的动画,用 three.quraks 实现的泡泡粒子效果。
粒子打碎重组

通过 three.quarks 的粒子序列功能,实现的打碎重组的粒子效果。
躲避汽车


用包围盒 Box3 做碰撞检测, three.quarks 实现流血的粒子效果,three-spritetext 来绘制文字,gsap 做补间动画,是一个比较综合的实战。
佛光普照

学完粒子效果后的实战,用到了曲线 API、两种粒子效果、后期通道、gsap 等
全国人口柱状地图

学完 geojson 地图绘制和标注后的实战,用自定义顶点颜色实现了高度可视化,用 SpriteText 做了标注。
地图飞线

地图 + 曲线的实战
交互式地球仪

球体地图绘制的练习
小镇旅游

学完玩家漫游后的实战,可以控制玩家在小镇内行走。
开放世界






物理引擎实战,可以控制玩家在开放世界内探索,可以跳跃到平台上,可以上台阶,可以开车、开飞机、打电脑。
https://quarkgluonplasma.github.io/threejs-open-world/
部署上去了,大家可以点上面的链接体验下。
全屏滚动实战:太阳系 3D 科普网站

通过页面滚动和 3D 场景交互,滚动到对应页面,把对应的行星定位到视野中央。
采样器实战:漫山遍野的植被

练习表面采样器的小实战,植被位置都是用采样器自动计算出来的。