Three.js 组件、模板以及交互式着色器

ThreeUI 是一个由 Meng To（Design+Code 创始人）创建的 Three.js 组件库与模板市场，主打"复制即用"的 3D Web 组件。

核心定位​

它提供大量基于 Three.js / WebGL的可复用组件和完整模板，包括：

• 3D Hero 区块 — 带交互的网页首屏视觉
• 完整落地页模板 — 从页面结构到 Three.js 场景一站式方案
• WebGL 背景与着色器 — 程序化生成的动态背景
• UI 元素 — 按钮、文字动画、图标、Motion Design 等
• 可编辑变体 — 每个组件都带多种样式变体，可调整主题、光照、动效

开源与付费模式​

• Community 免费版：160+ 组件完全免费，已开源在 GitHub（MIT 协议），可直接通过 npm 安装 @designcodeio/threeui
• Pro 付费版：额外 50+ 高级组件，支持 MCP（Model Context Protocol）和 Agent Skills，方便让 AI Agent 直接调用和定制组件

使用方式​

ThreeUI 的组件有两个特色用法：

1. 直接复制源码 — 每个组件都提供完整实现源码，体积通常在 100–200 KB，纯程序化 JS 编写，不依赖外部图片资源
2. 复制 Prompt— 组件附带 AI 可用的 Prompt，你可以直接把 Prompt 丢给编程 Agent，让它帮你改主题、颜色、布局、动效，而不用自己碰底层 Three.js 代码

技术特点​

• 框架无关 — 核心是原生 Three.js，但提供了 React 包方便集成到 React/Next.js 项目
• 实时预览 — 网站上有交互式预览，可以在线调整参数看效果
• 响应式 — 组件设计考虑了不同设备的适配

简单说，如果你做网站想要一个酷炫的 3D 首屏、动态背景或者交互式产品展示，又不想从零写 WebGL，ThreeUI 就是一个"拿来即用"的素材库，甚至可以让 AI 帮你二次改造。