threejs-course-code

掘金小册《Three.js 通关秘籍》案例代码

后续更多内容关注 #神光的幸福生活 公众号

npx live-server 起个静态服务就可以访问

如果是 vite 项目，那就先 npm install 再 npm run dev

第一个 3D 场景

dat.gui 可视化调试

深入理解透视相机和视椎体

BufferGeometry：顶点生成几何体

点模型、线模型、网格模型

实战：随机山脉地形

材质颜色和纹理贴图

uv 坐标和 uv 动画

如何画各种曲线

实战: 云雷纹

按照规律生成各种几何体

实战：隧道穿梭

uv 动画实战：无限隧道穿梭

实战：盖房子

场景遍历和世界坐标

各种灯光和常用 helper

顶点法线和反射原理

自定义顶点颜色实现渐变

实战：颜色渐变柱状图

如何加载外部模型

gltf 的三种文件结构

gltf-pipeline: 处理 gltf 模型的工具

DRACO：压缩 gltf 模型，提升加载性能

包围盒与模型大小计算

包围盒 Box3 常用 api

正投影相机和 3 种灯光的阴影

OrbitControl 的常用属性方法

射线与点击选中 3D 场景的物体

后期处理与描边发光效果

各种后期处理效果

精灵模型 Sprite 和下雪效果

实战：林海雪原

几何体材质共用问题和 copy、clone

补间动画库 Tween.js

Tween.js 常用 API

关键帧动画和模型动画播放

丝滑入场动画

改变顶点的变形动画

骨骼动画：关节带动顶点运动

骨骼动画丝滑切换

GSAP:另一个常用动画库

CSS2DRenderer 实现标注：给 3D 物体加标签

CSS3DRenderer 实现标注：电视内容、公告栏内容

Sprite 结合 canvas 实现各种形状的标注

SpriteText：开箱即用的文字组件

实战：数字雨

Canvas 画各种图案作为纹理

3D 场景如何加入音频

实战：3D 饼图

系统掌握噪声库 Simplex Noise

实战:双人斗舞

音乐频谱可视化

PBR 材质：逼真的金属、塑料、磨砂、喷漆、玻璃效果

PBR 实战：汽车选配

模型搜索和导入 blender 编辑

MatCap 材质：通过光泽球实现伪光照效果

HDR：亮度范围更广的全景图

CubeCamera 实现镜子效果

Reflector 实现镜子效果

实战：练舞房

3d 音乐播放器

Three.js 的各种控制器 Controls

React 和 Three.js 集成

贴花几何体：给物体表面添加装饰

实战：T恤印花设计

实战：3D 电脑

实战：Three.js Editor

向量点积实现锐角判断

Vector3 的 API 和各种应用

实战：酷家乐装修编辑器

实战：实现酷家乐同款拖拽旋转控制器

react-three-fiber：组件化开发 3D 场景

物理引擎 cannon：实现真实世界的物理现象

物理引擎 cannon：凸多面体实现各种形状

粒子效果库 three-quraks

粒子实战：小猪爱心喷射器

各种形状的粒子发射器

粒子生命周期行为控制

粒子实战：火树银花

粒子的帧动画

物理引擎 cannon：小球发射

cannon 实战：打保龄球

cannon 物理引擎：铰链

cannon 物理引擎：旋转、向心力

粒子实战：小鱼吐泡泡

打碎重组粒子效果

几何体粒子和噪声

躲避汽车

实战：佛光普照

geojson 和地图绘制

如何地图标注

实战：全国人口柱状地图

地图飞线

球面地图可视化

实战：交互式地球仪

玩家漫游

实战：小镇旅游

综合实战：开放世界

Euler、Quaternion、Matrix4、MathUtils 等 api

炫酷 3D 滚动官网

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

点云

表面采样器更常见的应用场景

表面采样器实战：漫山遍野的植被

产品展示网站