Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/hongkiulam/threlte-spline
Helper function to load Spline scene objects into threlte
https://github.com/hongkiulam/threlte-spline
spline splinetool svelte threejs threlte
Last synced: 3 days ago
JSON representation
Helper function to load Spline scene objects into threlte
- Host: GitHub
- URL: https://github.com/hongkiulam/threlte-spline
- Owner: hongkiulam
- License: mit
- Created: 2023-02-25T12:46:41.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-04-14T09:41:09.000Z (10 months ago)
- Last Synced: 2024-11-04T09:35:07.740Z (3 months ago)
- Topics: spline, splinetool, svelte, threejs, threlte
- Language: TypeScript
- Homepage:
- Size: 3.21 MB
- Stars: 13
- Watchers: 2
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: readme.md
- Changelog: CHANGELOG.md
- License: license.md
Awesome Lists containing this project
README
# threlte-spline
**threlte-spline** is a simple utility that lets you use your [Spline](https://spline.design/) scene with [Threlte](https://threlte.xyz/), via the Spline react-three-fiber code export.
This library is heavily inspired by [r3f-spline](https://github.com/splinetool/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](./splineloader-three-mapping/splineloader-three-mapping.json). These are scraped from `@splinetool/loader` package.json files.
## Usage
```svelte
import { Canvas, T, OrbitControls } from '@threlte/core';
import { loadSpline } from 'threlte-spline';
let scene;
loadSpline('https://prod.spline.design/HwAUoybfBaBCLzwO/scene.spline').then((_scene) => {
scene = _scene;
});
{#if scene}
{/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
import { Canvas, T, OrbitControls } from '@threlte/core';
import { loadSpline } from 'threlte-spline';
type MissingProperties = {
prop1: number;
}
let scene: ObjectMap<MissingProperties>;
loadSpline<MissingProperties>('https://prod.spline.design/HwAUoybfBaBCLzwO/scene.spline').then((_scene) => {
scene = _scene;
});
{#if scene}
...
{/if}
```
This will add the missing props to `SceneNode`
### types-plugin
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
