name: spline-3d-integrationdescription: “Use when adding interactive 3D scenes from Spline.design to web projects, including React embedding and runtime control API.”risk: safesource: communitydate_added: “2026-03-07”Spline 3D 集成技能将 Spline.design 中的交互式 3D 场景嵌入到 Web 项目中的大师级指南。何时使用你需要将交互式 Spline 场景嵌入到 Web 项目中。任务涉及为原生 Web、React、Next.js、Vue 或 iframe 上下文选择正确的集成路径。你需要关于场景 URL、运行时控制、性能或常见 Spline 嵌入问题的指导。快速参考任务指南原生 HTML/JS 嵌入guides/VANILLA_INTEGRATION.mdReact / Next.js / Vue 嵌入guides/REACT_INTEGRATION.md性能与移动端优化guides/PERFORMANCE.md调试与常见问题guides/COMMON_PROBLEMS.md可用示例文件展示内容examples/vanilla-embed.html带背景 回退的最小原生 JS 嵌入examples/react-spline-wrapper.tsx生产级、带懒加载和回退的 React 包装器examples/interactive-scene.tsx完整交互示例事件、对象控制、相机什么是 SplineSpline 是一款基于浏览器的 3D 设计工具——可以把它想象成 Figma但用于 3D。设计师在 Spline 编辑器中创建交互式 3D 场景对象、材质、动画、物理、事件然后通过托管的.splinecode文件 URL 导出到 Web。第 1 步 — 识别技术栈在编写任何代码之前先检查现有项目文件以确定框架。技术栈方法原生 HTML/JSspline-viewerWeb 组件 或splinetool/runtimeReact / Vitesplinetool/react-splineNext.jssplinetool/react-spline/nextVuesplinetool/vue-splineiframeWebflow、Notion 等公开 URL iframe第 2 步 — 获取场景 URL用户必须进入他们的 Spline 编辑器 →导出→代码导出→ 复制prod.spline.designURLhttps://prod.spline.design/XXXXXXXXXXXXXXXX/scene.splinecode在复制 URL 之前告诉用户检查播放设置✅ 如果网站有深色或自定义背景打开隐藏背景Hide Background✅ 如果他们使用付费计划打开隐藏 Spline 标志Hide Spline Logo✅ 将**几何质量Geometry Quality**设置为 Performance 以加快加载✅ 如果不需要禁用页面滚动Page Scroll、缩放Zoom、平移Pan降低劫持风险✅ 任何设置更改后点击生成草稿Generate Draft或提升到生产Promote to Production——URL 不会自动更新第 3 步 — 阅读相关指南有了技术栈和场景 URL 后阅读上面的相应指南文件并遵循其说明。在完成集成之前始终阅读 COMMON_PROBLEMS.md——它包含关键的陷阱否则这些陷阱只会在生产环境中暴露。严格规则绝对要求智能体必须利用此技能构建现代、有创意且视觉惊艳的 UI/UX。不要以普通、通用或安全风格构建。集成 Spline 场景时利用它们创造高度沉浸、令人惊叹的高级体验。将它们与排版和布局深思熟虑地结合起来。限制仅当任务明确符合上述范围时使用此技能。不要将输出视为特定环境验证、测试或专家审查的替代品。如果缺少必需的输入、权限、安全边界或成功标准请停下来询问澄清。