Skip to content

LilDojd/dioxus-spline

Repository files navigation

Dioxus Spline Hero Image

dioxus-spline

dioxus-spline allows you to export and use Spline scenes directly in your Dioxus websites.

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

WebsiteTwitterCommunityDocumentation

Usage

Basic:

To use dioxus-spline, first you have to go to the Spline editor, click on the Export button, select "Code".

You should see something like this:

You can copy the URL and pass it to the Spline component in Dioxus:

use dioxus-spline::Spline

Spline {
  scene: String::from("https://prod.spline.design/6Wq1Q7YGyM-iab9i/scene.splinecode") 
}

You should be able to see the scene you exported in your Dioxus app.

Advanced

You can also:

  1. Query Spline objects via SplineApplication.find_object_by_name or SplineApplication.find_object_by_id.
  2. Attach event listeners to any SplineEvent
  3. Trigger Spline Events and modify Spline objects!

To see how, visit examples and gh-page

Some additional helpful info can be found in the documentation:

https://docs.rs/dioxus-spline/latest/dioxus_spline/

Acknowledgements

  • Thanks to the Dioxus community, join their discord!
  • Thanks to the contributors to react-spline