https://github.com/splinetool/r3f-spline
Hook to load Spline scenes into react-three-fiber
https://github.com/splinetool/r3f-spline
react react-three-fiber
Last synced: 5 days ago
JSON representation
Hook to load Spline scenes into react-three-fiber
- Host: GitHub
- URL: https://github.com/splinetool/r3f-spline
- Owner: splinetool
- License: mit
- Created: 2022-03-22T16:35:36.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2022-09-02T17:14:02.000Z (over 2 years ago)
- Last Synced: 2023-03-07T19:13:44.608Z (about 2 years ago)
- Topics: react, react-three-fiber
- Language: TypeScript
- Homepage:
- Size: 1.6 MB
- Stars: 75
- Watchers: 3
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
[](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/) —
[Twitter](https://twitter.com/splinetool) —
[Community](https://discord.gg/M9hNDMqvnw) —
[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 (
)
}
```
## Examples
