5 releases

1.0.0 May 4, 2024
0.2.3 Jul 24, 2024
0.2.2 May 27, 2024
0.1.0 May 3, 2024

#205 in WebAssembly

MIT/Apache

4.5MB
7K SLoC

JavaScript 6.5K SLoC // 0.0% comments Rust 388 SLoC // 0.0% comments TSX 2 SLoC

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

Dependencies

~11–18MB
~253K SLoC