spline-3d-integration - VANILLA_INTEGRATION

Vanilla JS / HTML 集成根据你需要的控制程度有两种方法。方法 A — Web 组件大多数情况下推荐无需 npm。只需添加到 HTML 即可。支持懒加载、透明背景和鼠标交互。!-- In head — loads the web component --scripttypemodulesrchttps://unpkg.com/splinetool/viewer/build/spline-viewer.js/script!-- Basic embed --spline-viewerurlhttps://prod.spline.design/REPLACE_ME/scene.splinecode/spline-viewer!-- With mouse-following interactivity (e.g. cursor-tracking robots) --spline-viewerurlhttps://prod.spline.design/REPLACE_ME/scene.splinecodeevents-targetglobal/spline-viewer!-- Transparent background --spline-viewerurlhttps://prod.spline.design/REPLACE_ME/scene.splinecodebackgroundtransparent/spline-viewer方法 B — 运行时 API当需要编程控制时当你需要从自己的 JS 中操作对象、触发动画或响应事件时使用。安装npminstallsplinetool/runtime或通过 CDN无需安装scripttypemoduleimport{Application}fromhttps://unpkg.com/splinetool/runtimelatest/build/runtime.module.js;// ... rest of your code/script基本用法import{Application}fromsplinetool/runtime;constcanvasdocument.getElementById(canvas3d);constsplinenewApplication(canvas);spline.load(https://prod.spline.design/REPLACE_ME/scene.splinecode).then((){console.log(Scene loaded);});带对象交互spline.load(sceneUrl).then((){constobjspline.findObjectByName(Cube);// or by ID: spline.findObjectById(uuid-here)obj.position.x50;obj.rotation.yMath.PI/4;// NOTE: radians, NOT degreesobj.scale.x2;});带事件监听器spline.load(sceneUrl).then((){spline.addEventListener(mouseDown,(e){console.log(Clicked:,e.target.name);});});以编程方式触发动画spline.load(sceneUrl).then((){constobjspline.findObjectByName(MyObject);obj.emitEvent(mouseHover);// forwardobj.emitEventReverse(mouseHover);// reverse});全页背景设置最常见的用例——Spline 场景位于所有内容之后。!DOCTYPEhtmlhtmlheadscripttypemodulesrchttps://unpkg.com/splinetool/viewer/build/spline-viewer.js/scriptstyle*{margin:0;padding:0;box-sizing:border-box;}body{/* DO NOT add overflow: hidden here — it will break page scroll */position:relative;}.spline-bg{position:fixed;top:0;left:0;width:100%;height:100%;z-index:0;/* pointer-events: none — use this if scene is decorative only *//* pointer-events: all — use this if you want mouse interaction */pointer-events:all;}.content{position:relative;z-index:1;/* Make sure content elements dont get blocked by the 3D scene */}/* Fallback shown while Spline loads or if it fails */.spline-fallback{position:fixed;top:0;left:0;width:100%;height:100%;z-index:0;background:#0a0a0a;/* match your sites base color */display:none;/* hidden by default, shown via JS if needed */}/style/headbody!-- Fallback (shown if Spline fails to load) --divclassspline-fallbackidspline-fallback/div!-- Spline background --divclassspline-bgspline-viewerurlhttps://prod.spline.design/REPLACE_ME/scene.splinecodeevents-targetglobalstylewidth:100%;height:100%;/spline-viewer/div!-- Your website content --divclasscontenth1Your Content Here/h1/divscript// Show fallback if Spline hasnt loaded after 8 secondssetTimeout((){constviewerdocument.querySelector(spline-viewer);if(!viewer||!viewer.shadowRoot){document.getElementById(spline-fallback).style.displayblock;}},8000);// Skip Spline entirely on low-end mobile to save battery performanceif(window.innerWidth768||navigator.hardwareConcurrency2){document.querySelector(.spline-bg).style.displaynone;document.getElementById(spline-fallback).style.displayblock;}/script/body/html可用事件类型事件用例mouseDown点击/点按对象mouseUp点击后释放mouseHover光标进入对象区域mousePress按住点击keyDown按键按下keyUp按键释放start场景已加载并开始scroll页面滚动预加载减少感知加载时间添加到head中以便在脚本运行前开始获取场景文件linkrelpreloadhrefhttps://prod.spline.design/REPLACE_ME/scene.splinecodeasfetchcrossorigin完整优化策略请参阅 PERFORMANCE.md。调试请参阅 COMMON_PROBLEMS.md。