Three.js示例集合 | ThreeLab

ThreeLab提供的Three.js示例集合,包含各种3D图形效果和交互式场景

Three.js示例分类

官方资源

Three.js官方示例

Three.js官方示例

mrdoob

Three.js官方提供的完整WebGL三维图形库示例集合,包含各种3D渲染、动画和交互效果的实战案例...

详情查看
Cesium官方示例

Cesium官方示例

CesiumGS

Cesium官方提供的三维地球和地理信息系统开发示例,包含地形、影像、矢量数据等完整的三维地图应用案例...

详情查看
threejs官网实例 - 优化版

threejs官网实例 - 优化版

AivoGenX

Three.js官网实例的中文优化版本,提供详细的中文文档和实战案例,适合三维可视化开发学习...

详情查看
查看全部官方资源示例

着色器

着色器行星

着色器行星

nico

使用Three.js和自定义GLSL着色器实现的3D行星效果,包含大气层、云层和动态光照的三维渲染技术...

详情查看
马赛克

马赛克

AivoGenX

基于Three.js实现的马赛克着色器效果,通过像素化处理和动态颜色变换实现独特的视觉风格...

详情查看
蘑菇

蘑菇

bubinyang

使用Three.js实现的蘑菇形态着色器效果,模拟有机生物的三维渲染和材质表现...

详情查看
查看全部着色器示例

高级着色器效果

算法噪声着色器

算法噪声着色器

AivoGenX

使用three.js实现多种噪声算法的着色器效果,包括白噪声、值噪声、柏林噪声和分形噪声...

详情查看
数学函数着色器

数学函数着色器

AivoGenX

使用three.js实现多种数学函数的可视化着色器效果,包括三角函数、指数函数和对数函数...

详情查看
物理模拟着色器

物理模拟着色器

AivoGenX

使用three.js实现多种物理现象的着色器模拟,包括波动、热传导、流体和电磁场...

详情查看
查看全部高级着色器效果示例

数学运算

初中数学函数可视化

初中数学函数可视化

AivoGenX

使用three.js实现初中数学函数可视化三维场景,包括一次函数、二次函数、三角函数、反比例函数和绝对值函数的立体图像展示...

详情查看
几何图形变换

几何图形变换

AivoGenX

使用three.js实现几何图形变换三维场景,包括平移、旋转、缩放、对称和组合变换的立体展示...

详情查看
坐标系和函数图像

坐标系和函数图像

AivoGenX

使用three.js实现坐标系和函数图像三维场景,展示直角坐标系、极坐标系、柱坐标系和球坐标系下的立体函数图像特征...

详情查看
查看全部数学运算示例

三维地球

3D地球

3D地球

RainManGO

Three.js 3D地球示例,展示3D地球的三维渲染效果...

详情查看
虚幻地球

虚幻地球

GhostCatcg

Three.js 虚幻地球示例,展示虚幻地球的三维渲染效果...

详情查看
粒子地球

粒子地球

giser2017

使用three.粒子地球...

详情查看
查看全部三维地球示例

智慧城市

智慧城市特效

智慧城市特效

193Eric

Three.js 智慧城市特效示例,展示智慧城市特效的三维渲染效果...

详情查看
城市线条

城市线条

superzay

使用three.js城市线条...

详情查看
代码云

代码云

yiiiiiiqianyao

使用three.js代码云...

详情查看
查看全部智慧城市示例

行业应用

风机

风机

fengtianxi001

Three.js 风机示例,展示风机的三维渲染效果...

详情查看
查看全部行业应用示例

高级案例

漫游模拟器

漫游模拟器

junhong-chen

Three.js 漫游模拟器示例,展示漫游模拟器的三维渲染效果...

详情查看
桃花亭

桃花亭

huan_meng_hai_yan

Three.js 桃花亭示例,展示桃花亭的三维渲染效果...

详情查看
紫藤花

紫藤花

huan_meng_hai_yan

Three.js 紫藤花示例,展示紫藤花的三维渲染效果...

详情查看
查看全部高级案例示例

水效果

波浪效果

波浪效果

giser2017

使用three水效果...

详情查看
水天一色

水天一色

z2586300277

使用three.js水天一色...

详情查看
查看全部水效果示例

闪耀发光

火球效果

火球效果

giser2017

Three.js 火球效果示例,展示火球效果的三维渲染效果...

详情查看
查看全部闪耀发光示例

体图元

动态光影立方体

动态光影立方体

giser2017

Three.js 动态光影立方体示例,展示动态光影立方体的三维渲染效果...

详情查看
3D饼图

3D饼图

superzay

使用three.js制作3D饼图...

详情查看
扩散半球

扩散半球

giser2017

Three.js 扩散半球示例,展示扩散半球的三维渲染效果...

详情查看
查看全部体图元示例

线图元

流光

流光

yjsdszz

使用three.js流光...

详情查看
发散飞线

发散飞线

stonerao

使用three.js发散飞线...

详情查看
查看全部线图元示例

应用场景

矩阵操作

矩阵操作

alwxkxk

矩阵操作...

详情查看
简单3d拓扑图

简单3d拓扑图

z2586300277

使用three.js制作3d拓扑图...

详情查看
模型导航

模型导航

nico

模型导航...

详情查看
查看全部应用场景示例

粒子

大象

大象

z2586300277

Three.js 大象示例,展示大象的三维渲染效果...

详情查看
星系

星系

kavalcio

使用three.js星系...

详情查看
颗粒图像

颗粒图像

superzay

使用three.js颗粒图像...

详情查看
查看全部粒子示例

扩展功能

加载3dtiles

加载3dtiles

z2586300277

使用three加载3dtiles...

详情查看
测量

测量

yjsdszz

Three.js 测量示例,展示测量的三维渲染效果...

详情查看
查看全部扩展功能示例

后期处理

高斯模糊

高斯模糊

hafly

使用three.js高斯模糊...

详情查看
辉光-postprocessing

辉光-postprocessing

z2586300277

使用three.js辉光通道...

详情查看
自定义遮罩通道

自定义遮罩通道

z2586300277

使用three.js自定义遮罩通道...

详情查看
查看全部后期处理示例

物理应用

力导向图

力导向图

vasturiano

Three.js 力导向图示例,展示力导向图的三维渲染效果...

详情查看
物理cannon使用

物理cannon使用

z2586300277

Three.js 物理cannon使用示例,展示物理cannon使用的三维渲染效果...

详情查看
查看全部物理应用示例

基础案例

gltf/fbx/obj模型加载

gltf/fbx/obj模型加载

z2586300277

使用three.html模型加载...

详情查看
轮廓光

轮廓光

z2586300277

使用three轮廓光...

详情查看
渐变三角形

渐变三角形

giser2017

使用three.html渐变三角形...

详情查看
查看全部基础案例示例

入门实例

入门

入门

giser2017

使用three.html入门...

详情查看
辅助线

辅助线

giser2017

使用three.html辅助线...

详情查看
光线

光线

giser2017

使用three.html光线...

详情查看
查看全部入门实例示例

相关工具

sketchfab免费模型

sketchfab免费模型

giser2017

Three.js sketchfab免费模型示例,展示sketchfab免费模型的三维渲染效果...

详情查看
开源shader社区

开源shader社区

giser2017

Three.js 开源shader社区示例,展示开源shader社区的三维渲染效果...

详情查看
免费hdr全景图资源

免费hdr全景图资源

giser2017

Three.js 免费hdr全景图资源示例,展示免费hdr全景图资源的三维渲染效果...

详情查看
查看全部相关工具示例

相关工具

gltf在线draco压缩工具

gltf在线draco压缩工具

donmccurdy

Three.js gltf在线draco压缩工具示例,展示gltf在线draco压缩工具的三维渲染效果...

详情查看
hdr制作天空盒

hdr制作天空盒

matheowis

Three.js hdr制作天空盒示例,展示hdr制作天空盒的三维渲染效果...

详情查看
字体转Three使用json字体

字体转Three使用json字体

gero3

Three.js 字体转Three使用json字体示例,展示字体转Three使用json字体的三维渲染效果...

详情查看
查看全部相关工具示例