@splinetool/runtime
Advanced tools
runtime allows you to run Spline scenes in javascript.
yarn add @splinetool/runtime
or
npm install @splinetool/runtime
To use runtime, first you have to go to the Spline editor, click on the Export button, select "Code" and then "Vanilla JS".
You can copy the URL there and pass it to the .load() function:
import { Application } from '@splinetool/runtime';
// make sure you have a canvas in the body
const canvas = document.getElementById('canvas3d');
// start the application and load the scene
const spline = new Application(canvas);
spline.load('https://prod.spline.design/6Wq1Q7YGyM-iab9i/scene.splinecode');
You should be able to see the scene you exported in your canvas.
:warning: Only .splinecode files should be loaded through this API.
.splinefiles are meant to be used in the editor.
You can query any Spline object via findObjectByName or findObjectById.
(You can get the ID of the object in the Develop pane of the right sidebar).
import { Application } from '@splinetool/runtime';
const canvas = document.getElementById('canvas3d');
const spline = new Application(canvas);
spline
.load('https://prod.spline.design/6Wq1Q7YGyM-iab9i/scene.splinecode')
.then(() => {
const obj = spline.findObjectByName('Cube');
// or
// const obj = spline.findObjectById('7AF5EBC0-09BB-4720-B045-F478F8053AA4');
console.log(obj); // Spline Object => { name: 'Cube', id: '7AF5EBC0-09BB-4720-B045-F478F8053AA4', position: {}, ... }
// move the object in 3D space
obj.position.x += 10;
});
You can listen to any Spline Event you set in the Events panel of the editor by attaching a listener to the Spline instance.
import { Application } from '@splinetool/runtime';
const canvas = document.getElementById('canvas3d');
const spline = new Application(canvas);
spline
.load('https://prod.spline.design/6Wq1Q7YGyM-iab9i/scene.splinecode')
.then(() => {
spline.addEventListener('mousedown', (e) => {
if (e.target.name === 'Cube') {
console.log('I have been clicked!');
}
});
});
You can find a list of all of the Spline Event listeners in the API section.
You can trigger any animation Event you set in the Events panel in the Spline Editor.
You can use the emitEvent function, passing the event type and the name or ID of your object.
(You can get the ID of the object in the Develop pane of the right sidebar).
import { Application } from '@splinetool/runtime';
const canvas = document.getElementById('canvas3d');
const spline = new Application(canvas);
spline
.load('https://prod.spline.design/6Wq1Q7YGyM-iab9i/scene.splinecode')
.then(() => {
spline.emitEvent('mouseHover', 'Cube');
});
Or you can query the spline object first, and then trigger the event:
import { Application } from '@splinetool/runtime';
const canvas = document.getElementById('canvas3d');
const spline = new Application(canvas);
spline
.load('https://prod.spline.design/6Wq1Q7YGyM-iab9i/scene.splinecode')
.then(() => {
const obj = spline.findObjectByName('Cube');
objectToAnimate.emitEvent('mouseHover');
});
You can find a list of all of the Spline Events you can pass to the emitEvent function in the Spline Events section.
You might want to start the loading of .splinecode file before your code is loaded. It's possible using a HTML preload Link tag. Doing so will only save a little time by ensuring the spline file loading starts before your scripts are done loading. Since internally the .splinecode file will be loaded through a fetch call, you can do it like this :
<html>
<head>
<!--
add a preload link tag
with the scene your want to preload
at the end of your <head>
It needs to use the fetch preload type
-->
<link rel="preload" href="https://prod.spline.design/6Wq1Q7YGyM-iab9i/scene.splinecode" as="fetch"
</head>
/*
When loading the Application, use the second
param of the load function to make sure the browser
will use the preloaded file and not make another request
*/
spline.load('https://prod.spline.design/6Wq1Q7YGyM-iab9i/scene.splinecode', {
credentials: 'include',
mode: 'no-cors',
});
You can call all these different methods on the Spline Application instance.
| Name | Type | Description |
|---|---|---|
emitEvent | (eventName: SplineEventName, nameOrUuid: string) => void | Triggers a Spline event associated to an object with provided name or uuid in reverse order. Starts from first state to last state. |
emitEventReverse | (eventName: SplineEventName, nameOrUuid: string) => void | Triggers a Spline event associated to an object with provided name or uuid in reverse order. Starts from last state to first state. |
findObjectById | (uuid: string) => SPEObject | Searches through scene's children and returns the object with that uuid. |
findObjectByName | (name: string) => SPEObject | Searches through scene's children and returns the first object with that name. |
setZoom | (zoom: number) => void | Sets the initial zoom of the scene. |
setSize | (width: number, height:number) => void | Sets the size of the application and canvas. When called, Spline will stop automatic size updates. |
These are all the Spline event types that you can pass to the emitEvent or emitEventReverse function.
| Name | Description |
|---|---|
mouseDown | Refers to the Spline Mouse Down event type |
mouseHover | Refers to the Spline Mouse Hover event type |
mouseUp | Refers to the Spline Mouse Up event type |
keyDown | Refers to the Spline Key Down event type |
keyUp | Refers to the Spline Key Up event type |
start | Refers to the Spline Start event type |
lookAt | Refers to the Spline Look At event type |
follow | Refers to the Spline Mouse Up event type |
FAQs
Spline is a collaborative design platform for creating production-ready interactive experiences in multiple dimensions. © 2024 Spline, Inc.
The npm package @splinetool/runtime receives a total of 63,768 weekly downloads. As such, @splinetool/runtime popularity was classified as popular.
We found that @splinetool/runtime demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 3 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
The Socket Research Team investigates a malicious Python package that enables automated credit card fraud on WooCommerce stores by abusing real checkout and payment flows.
Security News
Python has adopted a standardized lock file format to improve reproducibility, security, and tool interoperability across the packaging ecosystem.
Security News
OpenGrep has restored fingerprint and metavariable support in JSON and SARIF outputs, making static analysis more effective for CI/CD security automation.