Skip to content

2. 实战列表

Published:

这一节单独来列一下我们做过的所有实战,持续更新:

随机山脉地形

2025-03-20 20.20.09.gif

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

云雷纹

2025-08-09 23.35.36.gif

学完曲线 API 之后的练习

隧道穿梭

2025-03-23 11.15.53.gif

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

无限时空隧道

2025-04-04 08.46.10.gif

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

盖房子

2025-03-24 23.50.00.gif

学习用 Shape + ExtrudeGeometry 来画各种形状然后拉伸成几何体,加上纹理贴图,来自己盖了一个房子。

然后相机动画做了圆周运动,并且每转一周都会随机修改相机位置。

颜色渐变柱状图

2025-04-08 21.56.21.gif

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

林海雪原

2025-04-04 22.02.48.gif

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

丝滑入场动画

2025-04-06 16.06.37.gif

2025-04-06 16.10.12.gif

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

3D 饼图

2025-04-20 12.32.15.gif

用到了曲线 CurvePath + ExtrudeGeometry 来画形状,Sprite + canvas 画标签,tweenjs 做缓动动画。

难点在于角度的计算,需要计算出中间角度,根据 cos、sin 来计算移动的目标位置。

双人斗舞

2025-04-07 22.15.08.gif

2025-04-08 18.40.03.gif

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

汽车选配

image.png

image.png

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

练舞房

2025-04-13 20.16.22.gif

学完镜子效果的实战。

用 Reflector 创建了 4 面镜子,然后加载 gltf 人物模型,用 AnimationMixer 播放了跳舞的骨骼动画。

用 Tween.js 做了圆周的相机动画。

之后添加了矩形平面光,用它的 ReactAreaLightHelper 来做灯管效果。

最后添加了平行光的阴影。

音乐频谱可视化

2025-04-15 00.30.06.gif

用 AudioAnalyser 拿到音频频谱数据,然后用 lodash 分组之后求和,最后得到一个 20 多个元素的数组,然后用 BoxGeometry 画立方体来可视化。

通过自定义顶点颜色实现了根据高度来设置颜色的渐变色效果。

数字雨

2025-05-24 02.19.46.gif

学完 three-spritetext 这个包的实战,练习绘制文字。

3D 音乐播放器

2025-04-17 12.33.45.gif

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

T 恤印花设计

2025-06-07 10.17.30.gif

2025-06-07 10.17.55.gif

2025-07-08 17.51.04.gif

用贴花几何体 DecalGeometry 实现的在T恤表面添加装饰的功能。

并且还可以保存设计结果为图片、视频。

3D 电脑

2025-07-07 14.32.39.gif

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

Three.js Editor

2025-05-17 23.58.07.gif

2025-05-17 23.58.56.gif

我们实现了和https://threejs.org/editor/功能一样的 3D 编辑器。

支持物体的添加、删除,位移、旋转、缩放,属性编辑。

所有数据存在 json 里,通过 json 渲染场景,从而把场景保存下来。

这个编辑器比较小,但五脏俱全,做完这个编辑器,你对各种 3D 编辑器就都有思路了。

酷家乐装修编辑器

2025-08-05 22.22.51.gif

2025-08-05 22.25.03.gif

2025-08-05 22.26.37.gif

2025-08-05 22.30.51.gif

2025-08-05 22.33.44.gif

第一个综合实战做这个经典的 3D 项目,酷家乐装修编辑器

从户型切换、到拖拽家具到 3D 场景,到预览编辑好的效果,整体和酷家乐的流程一样

自定义控制器

2025-09-20 18.09.27.gif

自己实现了 TransformControls,类似酷家乐的那种控制器。

之后需要自己实现控制器的时候就有思路了。

打保龄球

2025-11-17 22.35.22.gif

这是物理引擎 cannon 的实战,实现碰撞、弹性、摩擦等。

小猪爱心发射器

2025-06-01 13.27.13.gif

这是一个粒子效果的实战,点击小猪会发射爱心粒子。

使用锥形的发射器实现的粒子效果,是 three-quarks 的小练习。

火树银花

2025-06-01 21.44.34.gif

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

小鱼吐泡泡

2025-06-02 19.11.57.gif

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

粒子打碎重组

2025-06-02 22.50.51.gif

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

躲避汽车

2025-06-04 08.55.39.gif

2025-06-04 08.56.09.gif

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

佛光普照

2025-08-11 17.15.02.gif

学完粒子效果后的实战,用到了曲线 API、两种粒子效果、后期通道、gsap 等

全国人口柱状地图

2025-08-09 20.33.23.gif

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

地图飞线

2025-08-17 22.52.06.gif

地图 + 曲线的实战

交互式地球仪

2025-08-24 23.42.25.gif

球体地图绘制的练习

小镇旅游

2025-09-22 19.01.50.gif

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

开放世界

2025-12-14 18.05.44.gif 2025-12-14 18.28.08.gif 2025-12-07 22.20.44.gif

2025-12-20 19.09.31.gif 2025-12-20 19.13.38.gif

2026-01-03 00.27.25.gif

2026-01-03 00.42.18.gif

2026-01-18 21.25.25.gif

2026-01-18 21.27.35.gif

物理引擎实战,可以控制玩家在开放世界内探索,可以跳跃到平台上,可以上台阶,可以开车、开飞机、打电脑。

https://quarkgluonplasma.github.io/threejs-open-world/

部署上去了,大家可以点上面的链接体验下。

全屏滚动实战:太阳系 3D 科普网站

2025-10-10 19.15.18.gif

通过页面滚动和 3D 场景交互,滚动到对应页面,把对应的行星定位到视野中央。

采样器实战:漫山遍野的植被

2025-10-26 20.44.15.gif

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

汽车展厅

跳一跳

3D 画廊

飞行游戏

射击游戏

冒险家与迷宫

方块叠上叠

评论