Exporting as Code
Code Export Options
Spline allows you to export the code of your scene as:
Vanilla JS
π Runtime Docs: https://www.npmjs.com/package/@splinetool/runtime
Three.js
π Loader Docs: https://www.npmjs.com/package/@splinetool/loader
React
π React Docs: https://github.com/splinetool/react-spline
Next.js
π Next.js Docs: https://github.com/splinetool/react-spline#nextjs
react-three-fiber
π r3f Docs: https://github.com/splinetool/r3f-spline
Animations and events are only enabled when exporting to Vanilla js and React.
How to Export
Once youβre happy with your scene, press the
Export
button on the toolbar.Select βCodeβ on the left sidebar and choose from any of the code types available on the top dropdown, then wait for the URL to be generated.
A toast notification will appear to let you know when your URL is ready.
You can copy the code, open it as a CodeSandbox project, or download the local files to host it yourself.
Multiple properties can be adjusted under
.
You can download the code exports and host them on your own server.
About the Web Content Export (Vanilla JS)
Following the steps above you can export as Web Content by choosing Vanilla JS as the code type under the dropdown.
You will find a button at the bottom of the panel to download the content as a
.zip
file.If you want to play the experience, you need to run a localserver. Open your OS terminal or console from the uncompressed folder path and run:
python -m SimpleHTTPServer
The files saved from the "Web Content" option are the same used for the "Public URL". This is the way to add the files directly to your web project.
The file structure might look something like the following:
Note: Inside the index.html there is a Canvas element, which runs the WebGL 3D graphics.
Drafts
You can use drafts to version your exports. Each Draft is a snapshot of your scene.
The Draft labeled Production
is the one to which the main URL is pointing to. If there are additional changes on the scene or export settings, click Generate Draft
or Promote to Production
for the code to reflect the latest changes.
There is one production code, and many drafts can be created as needed under the Drafts tab. Any of the Drafts can be promoted to Production.
Handling events outside of Spline
Learn more about Code API for Web: Code API for Web
You can handle events outside of Spline and use them to manipulate your spline objects.
Here are 2 examples:
Example 1
Example 2