ThreeUI

ThreeUI 是由 Design+Code 创始人 Meng To 维护，专注于 Three.js / WebGL / Shader 的前端3D组件与模板库，专门用来降低创意开发的门槛。

很多网页3D场景、Shader背景、文字动效，过去都需要创意开发者投入大量时间手写调试。ThreeUI将这类视觉资产封装成交互式组件，支持实时预览、动态调参，可直接复制源码或者配套提示词交给AI Agent，快速修改灯光、色彩、运动节奏、页面布局。

组件分类

• Landing Pages：完整可直接使用的落地页模板
• Hero：首屏大视觉3D区块
• Three.js 独立组件、完整3D场景
• Backgrounds：WebGL程序化动态背景
• Buttons、Text Animation、通用UI元素
• Motion Design、页面Section模块

每一个组件预览页自带交互控制面板，可以实时修改动画速度、色彩、相机角度、灯光、鼠标指针响应，同时提供多套变体方案，支持查看与复制源码，部分组件配套AI提示词，直接给到Agent复用。

免费社区版 & Pro付费版

Community社区免费版

开源、无需登录，包含约50个父组件，111条路由，合计164个含变体的可浏览案例。代码MIT协议，GitHub仓库 MengTo/threeui，npm包 @designcodeio/threeui，支持学习与基础商业项目使用。

Pro版

额外解锁50+高级生产级组件，开放完整源码，内置MCP支持；定价$99/年，或$199终身授权，价格以官网为准。

特点与适用场景

组件偏向框架无关，主打复制粘贴即可部署上线，非常适合想快速给网页增加3D交互视觉效果的前端开发者，也是Vibe Coding搭建网站时重要的灵感素材库。

官网本身就是Demo展示平台，内置大量高质量示例：水下场景、山景交互、科幻UI、日式光影、星座天文场景等大量程序化Shader案例。