用途:Spline 是浏览器端 3D 设计与动画平台,面向希望不写 Three.js 代码就制作交互式 3D 网页体验的创作者,可用于产品展示、配置器、3D UI/UX 原型和营销页面。
主要能力:可视化 3D 建模(参数化形状、挤出、布尔运算);基于状态的动画系统与时间轴;交互事件系统(鼠标、键盘、碰撞、滚动);内置物理与粒子系统;实时协作与团队库;AI 生成(文本转 3D、纹理、风格迁移);导出为 React 组件、原生 JS、公开 URL 或 iframe 嵌入。
使用方式:在 Spline 编辑器中设计场景并发布,然后在 React 中安装依赖:npm install @splinetool/react-spline @splinetool/runtime,再以 <Spline scene="场景URL" /> 嵌入。可通过 onLoad 获取实例,用 findObjectByName 查找对象,修改 position、rotation、scale、material.color、visible 等属性,或用 emitEvent/emitEventReverse 触发动画。支持 Next.js 的 @splinetool/react-spline/next、React.lazy 懒加载、renderOnDemand 按需渲染,以及 GLTF/GLB 导出后与 Three.js 结合。
适用场景:无代码 3D 网页、交互式产品展示、3D 营销页、与 GSAP ScrollTrigger 或 Framer Motion 配合的滚动动画。
限制:场景 URL 必须来自 Spline 导出对话框且已发布;对象引用需用 React ref 保存;移动端需单独优化场景(减少多边形、纹理和灯光);事件需在编辑器中配置,且事件名须使用 onSplineMouseDown 等专用属性。资料未提供具体收费与价格信息。