Spline Loader

Three.js loader for .spline 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 instead.

Installation

npm install @splinetool/loader

Usage

import SplineLoader from '@splinetool/loader';

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

// Load a .spline file
loader.load(
    // path to the .spline file, either from the Spline servers or local
    'https://prod.spline.design/TRfTj83xgjIdHPmT/scene.spline',
    // 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.

• 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.