threlte-spline

threlte-spline is a simple utility that lets you use your Spline scene with Threlte, via the Spline react-three-fiber code export.

This library is heavily inspired by r3f-spline


While this library is written to be used in Threlte, it can be used in applications that aren't powered by Threlte. That's because this library simply loads, and returns the Spline scene as Three.js objects.

Install

``bash
yarn add threlte-spline @splinetool/loader
`

or

`bash
npm install threlte-spline @splinetool/loader
`

or

`bash
pnpm add threlte-spline @splinetool/loader
`

@types/three is required for Typescript support

Please be aware that this library is simply an extension of @splinetool/loader, and is intended to be used with @threlte/core. Both of these libraries were built with a specific version of three in mind. So please be mindful that your installed version of three may need to be very specific in order for these libraries to work harmoniously together.

A common error that you may encounter if your version of three is not compatible with your version of @splinetool/loader is: Uncaught TypeError: Cannot read property 'x' of undefined

Typically, you can use the latest version of @splinetool/loader that is available at the time of exporting the Spline scene, you can then find roughly the version of three required here. These are scraped from @splinetool/loader package.json files.

Usage

`svelte


{#if scene}

makeDefault
position={scene.nodes['Camera 1'].position}
fov={scene.nodes['Camera 1'].fov}
zoom={scene.nodes['Camera 1'].zoom}
>




name="Rectangle"
geometry={scene.nodes.Rectangle.geometry}
material={scene.materials['Rectangle Material']}
/>


{/if}
`

Typescript

Type information should be fairly complete as this package extends @types/three, however there may be certain properties which are missing. Feel free to contribute any missing types if you find any.

In the interim, you can extend the types by doing the following

`svelte


{#if scene}

...

{/if}
`

This will add the missing props to SceneNode

$3

Register this Vite plugin to fetch more accurate types for your Spline scene

e.g.

`javascript
import { threlteSplineTypesPlugin } from 'threlte-spline/dist/types-plugin';

const viteConfig = {
...,
plugins: [..., threlteSplineTypesPlugin()],
};
`

Without plugin
`javascript
scene.nodes
// ^= { [x: string]: SceneNode }
`

With plugin
`javascript
scene.nodes
// ^= { rectangle: SceneNode, camera: SceneNode }
``

Examples