Inability to Add 3D Objects to a Page Using JS Libraries

[RustGrow]

Summary:

We need to add a feature or provide a detailed description on how to embed 3D objects into a webpage. Currently, attempts to use JavaScript libraries for this purpose result in errors related to export token within these libraries. Additionally, exporting these JS libraries as modules is not supported.

Steps to Reproduce:

Attempt to add a 3D object to a webpage using a JavaScript library.
Observe the error related to export token.
Try exporting the JS libraries as modules and note the lack of support.
Expected Behavior: 3D objects should be successfully embedded into the webpage without errors.

Actual Behavior: Errors related to export token occur, and exporting JS libraries as modules is not supported.

Additional Information:

An example of a successful attempt to add a 3D object can be found in the html-model folder, which contains a fully working example of embedding a 3D object into HTML code.
repo
https://github.com/DioxusGrow/crabflow

bandicam.2024-10-03.19-38-49-678.mp4

Environment:
Dioxus version: dioxus 0.6.0-alpha.2 (d0c9b67) from github 03/10/24
Rust version: rustc 1.81.0 (eeb90cda1 2024-09-04)
OS info: Win11
App platform: web

Possible Solution:

Investigate and resolve the export token errors within the JS libraries.
Ensure support for exporting JS libraries as modules.

[ealmloff]

This doesn't sound like an issue with Dioxus. There is nothing specific to Dioxus about a external 3d rendering library not working. It is a request for help debugging an issue integrating an external library with a Dioxus project. Github discussions or the discord are a better place for help discussions

This would be a great topic for an external blog post, but integrating 3d objects into Dioxus is probably not something that will be included in the official docs soon. #265 tracks general 3d renderer integration

[ealmloff]

You probably need to change the type of the script to module for the library you are importing Script { type: "module", ... }

[RustGrow]

Thank's. But I have more of a need to work with google model-viewer

[RustGrow]

Spline works fine, but when I change script to google model-viewer
Script { type: "module", src: "https://unpkg.com/@google/[email protected]/dist/model-viewer.js" }
It has an error

https://github.com/DioxusGrow/crabflow/blob/d631a6e270d90df5cbaabf5ecb87018daf3ed8f4/src/main.rs#L35
https://github.com/DioxusGrow/crabflow/blob/d631a6e270d90df5cbaabf5ecb87018daf3ed8f4/src/main.rs#L60-L69
It has working example inside html
https://github.com/DioxusGrow/crabflow/blob/d631a6e270d90df5cbaabf5ecb87018daf3ed8f4/html-model/index.html#L1-L27