An example of two-way control between a React environment and a Spline.design scene
React <> Spline trigger
This project is an example of basic integration between React and Spline – A toggle in Spline changes theme in React / Two buttons in React control a Spline animation. To edit the Spline scene download the .spline file and open it in Spline App, which is free to use.
Getting set up
1 – Install dependencies
run npm install
-or-
npm install @splinetool/react-spline @splinetool/runtime
npm install styled-components
2 – In the project directory, you can run:
npm start
Runs the app in the development mode.\
Open http://localhost:3000 to view it in the browser.
Explore / Edit Spline Scene
1 – Open the .spline file
Open the .spline file from the Spline_scene folder in Spline App.
** TRIGGER<>OBJECT LABELLING IN REACT AND SPLINE MUST CORRELATE **
2 – Export the scene in your Spline App as Code > React
Copy the scene URL from the Spline export window to the “scene” property in the Spline component, in App.tsx
Resources
Spline home / Spline app / Spline docs / Spline-React GitHub