智趣元里Web3D
搜寻最省钱、最前沿、最有趣的3D内容
资源

优质 Web3D 开源与工具推荐

返回首页

Three.js 官方示例库

示例 / 学习

Three.js 官方仓库中的精选案例,适合从场景构建、相机、材质、光照和动画开始建立工程感。

查看链接 →

Three.js Journey

课程 / 进阶

高质量三维入门课程,覆盖 WebGL 基础、场景搭建、灯光、交互和真实项目实践。

查看链接 →

ShaderToy

着色器 / 视觉实验

大量 GLSL 视觉实验,适合学习 fragment shader、噪声、后处理和动画效果。

查看链接 →

Kenney 3D Asset Pack

免费模型 / 资产

提供免费且适合快速原型的低模 3D 资源,适合搭建场景、游戏和演示页面。

查看链接 →

Poly Haven

免费纹理 / HDR / 环境

高质量免费 HDR、纹理和环境资源,非常适合 Web3D 场景和光照测试。

查看链接 →

Blender 官方教程

工具 / 制作流程

如果你在做内容/产品展示、场景道具或低模资产,Blender 是最实用的建模入口。

查看链接 →

Babylon.js

引擎 / WebGPU

成熟的 Web 3D 引擎,提供场景、材质、物理、动画和 WebXR 能力,适合构建完整应用。

查看链接 →

PlayCanvas

引擎 / 在线编辑器

基于浏览器的实时 3D 引擎与协作编辑器,适合制作互动体验、游戏和产品展示。

查看链接 →

React Three Fiber

React / 3D 开发

将 Three.js 场景融入 React 组件模型,适合使用现代前端工程方式开发 Web3D 界面。

查看链接 →

Drei

React / 工具组件

React Three Fiber 的常用辅助组件集合,包含相机、控制器、加载器、文本和环境光等。

查看链接 →

A-Frame

WebXR / 开源框架

使用 HTML 声明式构建 VR、AR 和 3D 场景,适合快速制作 WebXR 原型与互动页面。

查看链接 →

WebGL Fundamentals

WebGL / 系统学习

从着色器、缓冲区、矩阵到纹理,循序渐进解释 WebGL 底层渲染原理。

查看链接 →

MDN WebGL API

文档 / API 参考

Mozilla 维护的 WebGL API 文档与示例,适合查阅浏览器图形接口和兼容性信息。

查看链接 →

glTF Sample Assets

glTF / 模型测试

Khronos 官方维护的 glTF 示例模型集合,可用于验证材质、动画、灯光和加载器表现。

查看链接 →

glTF Transform

模型 / 优化工具

用于压缩、转换和优化 glTF 资产的开源工具,适合降低 Web 端模型体积与加载成本。

查看链接 →

Rapier.js

物理引擎 / WASM

高性能 2D 与 3D 物理引擎,提供刚体、碰撞检测和关节系统,支持 WebAssembly。

查看链接 →

OGL

WebGL / 轻量库

小巧的 WebGL 类库,保留底层控制力,适合制作高性能互动视觉和创意编码实验。

查看链接 →

postprocessing

后处理 / Three.js

面向 Three.js 的后处理效果库,提供 Bloom、景深、色彩调整和抗锯齿等常用效果。

查看链接 →

Troika Three Text

文本 / SDF 渲染

基于 SDF 的高质量 3D 文本解决方案,适合在场景中渲染清晰、可缩放的文字。

查看链接 →

Khronos WebGL Samples

WebGL / 官方示例

Khronos Group 提供的 WebGL 示例与规范相关资源,适合验证渲染特性和学习标准用法。

查看链接 →