splinetool/r3f-spline

Hook to load Spline scenes into react-three-fiber

r3f-spline

r3f-spline is a React hook that lets you use your Spline scene with react-three-fiber.

🌈 Spline is a friendly 3d collaborative design tool for the web.

Website — Twitter — Community — Documentation

Install

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

or

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

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

Usage

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

r3f-spline's Issues

Access and modify physics properties

Need feature to Access and modify physics properties from spline
Need support for spline physics to render and API

SplineLoader using deprecated three.js classes

I'm getting warnings from THREE for using deprecated geometry classes. It looks like the issue is coming from the SplineLoader class.

exporting 2D Shapes doesnt work..

Callback after loading the model

Hi everyone, My very first issue on GitHub, so I apologize if I'm doing anything wrong

How to know if the model is loaded from the URL and executes some functions afterward?
Is there any feature similar to onLoad?

nextjs-useSpline error

is there any other way to fetch

const { nodes, materials } = useSpline(
"https://prod.spline.design/2fzdsSVagfszNxsd/scene.spline",
);

the error that terminal shows

Warning: data for page "/_error" is 195 kB, this amount of data can reduce performance.
See more info here: https://nextjs.org/docs/messages/large-page-data
error - SyntaxError: Cannot use import statement outside a module
Warning: data for page "/_error" is 195 kB, this amount of data can reduce performance.
See more info here: https://nextjs.org/docs/messages/large-page-data

@splinetool/loader v0.9.139 is crashing react apps in production mode

Hi, since upgrading to v0.9.139 my next app crashes when exported, with the error

Hydration failed because the initial UI does not match what was rendered on the server.

v0.9.138 works fine. I can't provide a reproduction right now but maybe this enough for you to go on anyway.

Exported to R3F Gives Error: Cannot set properties of undefined (setting 'value')

https://codesandbox.io/s/vkx82s?file=/src/Scene.js

This scene works fine when exported in React, but in the case of R3F, it gave me this error:

unable to parse splinecode

Uncaught Could not load /static/scroll.300ac701.splinecode: Cannot convert undefined or null to object

Actually, i have loaded the splinecode file successfully, but the hook useSpline throw the up exception.
the splinecode file downloaded from the example

Add support for animations

It would be nice to support animations when exporting a spline scene, like so:

const { nodes, materials ,animations} = useSpline("https://your-url.spline.com");

useEffect(()=>{
animations.animationName.play();
},[})

Or at least some sort of documentation to handle the animations on your own!

References of similar results: https://github.com/pmndrs/drei#useanimations

Spline "Physical" material shader not compiled in [email protected]

When I create a new Spline scene, add a cube, and change its material lighting from Phong to Physical, the exported r3f Scene will not render. The error message in the console says:

THREE.WebGLProgram: Shader Error 0 - VALIDATE_STATUS false

ERROR: 0:1255: 'geometryNormal' : undeclared identifier
ERROR: 0:1255: 'geometryNormal' : undeclared identifier
ERROR: 0:1255: '=' : dimension mismatch
ERROR: 0:1255: '=' : cannot convert from 'highp float' to 'highp 3-component vector of float'

Spline scene with cube: https://my.spline.design/bugpbr-697c24bb953fb9261036866a8faaeb80/

Codesandbox with the error: https://codesandbox.io/s/r3f-spline-pbr-bug-7d2mgc

In the sandbox I also added a Scene1 component, which is the scene from the Spline demo referenced in the Readme. If you render Scene1 instead of Scene2, you'll also see that the demo suffers from shader issues with [email protected].

Cannot set properties of undefined (setting 'value')

New to next js and spline, could someone help with this error:

TypeError
Cannot set properties of undefined (setting 'value')

https://codesandbox.io/s/ftyxeq?file=/src/Scene.js

Error when using with three 0.149.0

The error seems to be coming from SplineLoader, but since that is not an open source library I decided to raise the issue here.

Error:

Uncaught Error: Could not load https://prod.spline.design/IcnOpHOp4rFkJJie/scene.splinecode: Cannot read properties of undefined (reading 'x'))
    at index-7dbf758c.esm.js:1586:36
    at Object.onLoad (SplineLoader.js:1338:75098)

Codesandbox:
https://codesandbox.io/p/sandbox/untitled-copy-forked-4qc4wv?selection=%5B%7B%22endColumn%22%3A1%2C%22endLineNumber%22%3A14%2C%22startColumn%22%3A1%2C%22startLineNumber%22%3A14%7D%5D&file=%2Findex.html

Auto update r3f scene on edit

Hi, I'm looking for a tool that will help with my r3f workflow and came across Spline as a potential solution. I'd like to be able to edit a scene in visual editor, save it and at most do a page refresh to see the updates. r3f-spline seems somewhat promising but it looks like I have to export the code, copy and paste it each time I update the scene, which is a bit clunky. It would be nice if I could just have the scene automatically generated by from the .splinecode file. Is this something that I can do today by iterating through the nodes? Or is this something that is in the works?

Unable to use particleSystem element in r3f project

When exporting a scene using a particle system project locally, the particleSystem element is used. r3f does not recognize this element, and suggests using the extend feature. However, there's no ParticleSystem component exported from Three.js to use with the extend function.

I wanted a reproducible case, but I've been unable to get it to run in the provided CodeSandbox examples. When I try, the error is a little more obtuse Could not load https://prod.spline.design/CpCwU2vP2DhzynSX/scene.splinecode: Cannot read properties of undefined (reading 'create'). Unsure if its related to the above particleSystem issue or not, it would appear not since removing the particle system doesn't fix the error.

/*
  Auto-generated by Spline
*/

import useSpline from '@splinetool/r3f-spline'
import { OrthographicCamera } from '@react-three/drei'

export default function Scene({ ...props }) {
  const { nodes, materials } = useSpline('https://prod.spline.design/CpCwU2vP2DhzynSX/scene.splinecode')
  return (
    <>
      <color attach="background" args={['#4a4a4a']} />
      <group {...props} dispose={null}>
        <scene name="Scene 1">
          <mesh
            name="Text"
            geometry={nodes.Text.geometry}
            material={materials['Text Material']}
            castShadow
            receiveShadow
            position={[1.68, -199.27, 183.69]}
            rotation={[0, Math.PI / 2, 0]}
          />
          <mesh
            name="Sphere"
            geometry={nodes.Sphere.geometry}
            material={materials['Sphere Material']}
            visible={false}
            castShadow
            receiveShadow
            position={[0, 0, -600]}
          />
          <group name="Particles" position={[1.68, -100.47, -698.67]}>
            <particleSystem
              name="Particle Emitter 2"
              geometry={nodes['Particle Emitter 2'].geometry}
              material={materials['']}
            />
          </group>
          <OrthographicCamera name="1" makeDefault={true} far={10000} near={-50000} />
          <hemisphereLight name="Default Ambient Light" intensity={0.75} color="#eaeaea" />
        </scene>
      </group>
    </>
  )
}

Failed to compile - mergeBufferGeometries

Failed to compile ./node_modules/@splinetool/loader/build/SplineLoader.js Attempted import error: 'mergeBufferGeometries' is not exported from 'three/examples/jsm/utils/BufferGeometryUtils.js' (imported as 'pI'). This error occurred during the build process and can only be dismissed by fixing the error.

i think maybe its just mergeGeometries ?

https://threejs.org/docs/#examples/en/utils/BufferGeometryUtils.mergeBufferGeometries

r3f-spline export .splinecode not working

The code sandbox environment and downloadable package work off of a .spline file in the examples provided, but export from the spline application as .splinecode. The .splinecode file is not able to be interpreted by the "useSpline" function. This is the code in question.
const { nodes, materials } = useSpline( "https://prod.spline.design/gvgFxposolpeYZr8/scene.splinecode" );

And this is a link to my codesandbox project that was generated from a r3f export in the Spline App.
https://codesandbox.io/s/3-d-text-blue-copy-forked-g0hijd?file=/src/Scene.js:184-297

PS: Fantastic work, I am excited this year to learn more 3d design and development with 3js and r3f, spline is the perfect tool to use, and work with. Thank you!