open-index/open-npm huggingface dataset:
npm package: @splinetool/loader
Description: Spline is a collaborative design platform for creating production-ready interactive experiences in multiple dimensions. © 2025 Spline, Inc.
Latest version: 1.12.81

# Spline Loader

> Three.js loader for `.splinecode` files.

It returns a three.js compatible representation of the file scene.

You should use this package if you want to access your Spline objects and materials from code and manipulate them yourself in a Three.js environment.

If you want to display your Spline scene with interactions and states matching Spline play mode, we recommend you use [spline-runtime](https://www.npmjs.com/package/@splinetool/runtime) instead.

> :warning: Only **.splinecode** files should be loaded through this API. `.spline` files are meant to be used in the editor.

## Installation

```
npm install @splinetool/loader
```

## Usage

```js
import SplineLoader from '@splinetool/loader';

// Instantiate a loader
const loader = new SplineLoader();

// Load a .splinecode file
loader.load(
	// path to the .splinecode file, either from the Spline servers or local
	'https://prod.spline.design/2qM3cW5Cx15m3cJ7/scene.splinecode',
	// called when the resource is loaded
	(splineScene) => {
		scene.add(splineScene);
	},
	null,
	// called when loading has errors
	(error) => {
		console.log('An error happened');
	}
);
```

## Limitations

This loader allows most Spline objects and materials to be rendered directly into three.js without a Spline runtime. Still it's possible you'll notice some differences between the loaded scene and what it looked like in the Spline editor because we fallback missing Spline capabilities to "the next best thing" in order for it to work.
Think of this Loader as a way to get scenegraph, geometries and materials.

- The **Glass layer** is only partially supported when used outside of the Spline Runtime. In THREE.js, transmission does not handle transparent objects. We advise against combining Glass layers and alpha objects in the same scene.
- All Events and Interactions won't be included in the loaded objects, if you use this package it implies you will use code to handle interactions and animations on your own.
- Spline Postprocessing also won't be included.

© 2025 Spline, Inc.
npm package: @splinetool/r3f-spline
Description: [![](https://raw.githubusercontent.com/splinetool/react-spline/main/.github/screenshots/hero.png)](https://my.spline.design/splinereactlogocopycopy-eaa074bf6b2cc82d870c96e262a625ae/)
Latest version: 1.0.2

[![](https://raw.githubusercontent.com/splinetool/react-spline/main/.github/screenshots/hero.png)](https://my.spline.design/splinereactlogocopycopy-eaa074bf6b2cc82d870c96e262a625ae/)

# r3f-spline

**r3f-spline** is a React hook that lets you use your Spline scene with [react-three-fiber](https://github.com/pmndrs/react-three-fiber).

🌈 [Spline](https://spline.design/) is a friendly 3d collaborative design tool for the web.

[Website](https://spline.design/) &mdash;
[Twitter](https://twitter.com/splinetool) &mdash;
[Community](https://discord.gg/M9hNDMqvnw) &mdash;
[Documentation](https://docs.spline.design/)

## Install

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

or

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

**NOTE**: make sure you also install the `@react-three/fiber` and `three` dependencies.

## Usage

```jsx
import useSpline from '@splinetool/r3f-spline'

export default function Scene({ ...props }) {
  const { nodes, materials } = useSpline('https://prod.spline.design/2fzdsSVagfszNxsd/scene.spline')

  return (
    <group {...props} dispose={null}>
      <mesh
        name="Rectangle"
        geometry={nodes.Rectangle.geometry}
        material={materials['Rectangle Material']}
      />
    </group>
  )
}
```

## Examples

<p align="left">
  <a href="https://codesandbox.io/s/2giomw" target="_blank"><img width="274" src="https://raw.githubusercontent.com/splinetool/r3f-spline/main/.github/screenshots/relax.png" /></a>
  <a href="https://codesandbox.io/s/lol3p7" target="_blank"><img width="274" src="https://raw.githubusercontent.com/splinetool/r3f-spline/main/.github/screenshots/work.png" /></a>
</p>