spline-3d-integration - REACT_INTEGRATION

React / Next.js / Vue 集成React / Vite安装npminstallsplinetool/react-spline基本用法import Spline from splinetool/react-spline; export default function App() { return ( div style{{ width: 100%, height: 100vh }} Spline scenehttps://prod.spline.design/REPLACE_ME/scene.splinecode / /div ); }带对象交互 事件监听器import { useRef } from react; import Spline from splinetool/react-spline; export default function App() { const splineRef useRef(); function onLoad(splineApp) { splineRef.current splineApp; } function triggerAnimation() { splineRef.current.emitEvent(mouseHover, Cube); } function onSplineEvent(e) { console.log(Object interacted:, e.target.name); } return ( div Spline scenehttps://prod.spline.design/REPLACE_ME/scene.splinecode onLoad{onLoad} onMouseDown{onSplineEvent} / button onClick{triggerAnimation}Trigger/button /div ); }懒加载推荐用于性能优化import { lazy, Suspense } from react; const Spline lazy(() import(splinetool/react-spline)); export default function Hero() { return ( Suspense fallback{div style{{ background: #0a0a0a, width: 100%, height: 100vh }} /} Spline scenehttps://prod.spline.design/REPLACE_ME/scene.splinecode / /Suspense ); }Next.js安装npminstallsplinetool/react-spline使用/next导入以获得 SSR 支持 自动模糊占位import Spline from splinetool/react-spline/next; export default function Page() { return ( Spline scenehttps://prod.spline.design/REPLACE_ME/scene.splinecode / ); }使用动态导入如果遇到水合错误import dynamic from next/dynamic; const Spline dynamic(() import(splinetool/react-spline/next), { ssr: false, loading: () div style{{ background: #0a0a0a, width: 100%, height: 100vh }} / }); export default function Page() { return Spline scenehttps://prod.spline.design/REPLACE_ME/scene.splinecode /; }Vue安装npminstallsplinetool/vue-splinetemplate Spline scenehttps://prod.spline.design/REPLACE_ME/scene.splinecode spline-loadedonLoaded mouseDownonClick / /template script import Spline from splinetool/vue-spline; export default { components: { Spline }, methods: { onLoaded(spline) { const obj spline.findObjectByName(Cube); obj.position.x 10; // NOTE: radians for rotation, not degrees }, onClick(e) { console.log(Clicked:, e.target.name); } } } /script全页背景Reactimport Spline from splinetool/react-spline; import { useState } from react; export default function HeroSection() { const [loaded, setLoaded] useState(false); // Skip Spline on mobile / low-end devices const isMobile typeof window ! undefined window.innerWidth 768; const isLowEnd typeof navigator ! undefined navigator.hardwareConcurrency 2; return ( div style{{ position: relative, width: 100vw, height: 100vh }} {/* Fallback background — always rendered, hidden once Spline loads */} div style{{ position: absolute, inset: 0, background: #0a0a0a, zIndex: 0, opacity: loaded ? 0 : 1, transition: opacity 0.5s ease }} / {/* Spline scene — only load on capable devices */} {!isMobile !isLowEnd ( Spline scenehttps://prod.spline.design/REPLACE_ME/scene.splinecode onLoad{() setLoaded(true)} style{{ position: absolute, top: 0, left: 0, width: 100%, height: 100%, zIndex: 0 }} / )} {/* Content sits on top */} div style{{ position: relative, zIndex: 1 }} h1Your Content Here/h1 /div /div ); }React 属性参考Prop类型说明scenestring场景 URL必填onLoadfunction加载完成时调用参数为 splineApponMouseDownfunction在对象上按下鼠标/触摸onMouseUpfunction鼠标/触摸释放onMouseHoverfunction悬停在对象上onKeyDownfunction按键按下onKeyUpfunction按键释放onStartfunction场景开始onScrollfunction滚动事件styleobject画布的 CSS 样式classNamestringCSS 类名完成前请参阅 PERFORMANCE.md 和 COMMON_PROBLEMS.md。