Skip to content

QuarkGluonPlasma/threejs-course-code

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

119 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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 科普网站

点云

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

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

产品展示网站

About

《Three.js 通关秘籍》案例代码

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors