优质 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 示例与规范相关资源,适合验证渲染特性和学习标准用法。
查看链接 →