ThreeUI Community：开源可交互 3D 组件库，支持实时预览

大多数 3D 组件库只给你 Demo 视频。ThreeUI Community 给你完整的源代码、实时渲染器和一个可以自己跑起来的组件目录。

ThreeUI Community（MengTo/threeui，⭐ 3,235，MIT）是设计师兼开发者 MengTo（Designer.cool / React Native 经典教程作者）出品的开源 3D 组件库社区版，定位是把 Three.js / React-Three-Fiber 的复杂 3D 交互做成开箱即用的组件，并且提供完整的源码和在线预览。

核心数据

它解决什么问题

Three.js 很强大，但每次想做个 3D 卡片、交互动画、可视化图表，都要从零配置场景、相机、渲染器。ThreeUI 把这些封装成可组合的 React 组件，开箱即用，支持实时参数调节和源码查看。

技术亮点

1. 50+ 开源 Community 组件，全部带交互预览

AtTheHorizon      → 地平线动画效果
CrossBeam         → 3D 交叉光束
FloatingOrbs      → 浮空光球粒子
GlassPortal       → 玻璃门效果
...
（50 个 Community 组件，持续增加）

每个组件在 threeui.com 上都有实时渲染演示，可调节参数，可查看源码。

2. React 一行引入

import { AtTheHorizon } from "@designcodeio/threeui";
import "@designcodeio/threeui/style.css";

export function Hero() {
  return <AtTheHorizon />;
}

3. 完整源码可追溯

每个组件的源码都随 npm 包发布，不是黑箱。Pro 版本另有闭源实现，Community 版完全开源透明。

4. 实时参数调节

ThreeUI Studio（在线版本）支持在浏览器里直接调节每个组件的参数，实时看效果，满意后再 copy 代码。

安装使用

npm install @designcodeio/threeui

# 本地运行完整目录
git clone https://github.com/MengTo/threeui.git
cd threeui
npm install
npm run dev

和普通 3D 组件库的区别

普通 Three.js 示例：代码分散、参数不透明、需要自己搭场景。
ThreeUI Community：组件化 + 在线预览 + 参数调节 + 完整源码，适合需要快速落地 3D 交互的前端团队。

项目地址：github.com/MengTo/threeui
官网预览：threeui.com
npm 包：npm @designcodeio/threeui