Speckle viewer in react dashboard - publishing data via speckle API & creating react wrapper

We have a powerBi dashboard that we would like to move to react in order to allow users to log-in, see user specific data, and also edit that data inline. Dashboard updates should be in real time. PowerBi is meant to view data, not really create apps so it seeems to be pretty limited.

Right now we are just creating seperate powerBi instances for different clients and using our speckle account. Is there a way to use the web based speckle viewer at an enterprise level, where our system would publish data to the viewer through an API? I don’t want users to create a spereate speckle account.

We are looking at different viewers like Forge or rhino3DM.js but what I like about speckle is that it is can handle all the data conversions for us so we can work with rhino, revit and other types of files.

Does anyone have any experience using the viewer to manage uploads from users, or a backend to show to users through an API? Any expereience setting up the viewer in React? I saw a couple of threads but no definitive solution since it seems speckle is using Vue.

To give some context, the use case for our app is:

A) Property owner who would like to see their project dashboard and be able to make simple design changes like selecting a design option or changing a material price to identify cost centers and value engineer the project

B)A contractor would like to submit a bid on our bid sheet line by line, confirming our take-offs and identify the corresponding scope of work through the 3D viewer and a written summary of scope.

I am trying to do something similar, I am trying load a BIM model Look at this code Sandbox if it might be helpful, But the problem is I cannot load any model and it says it can load obj models but the only way to load a obj model is to wrap it with a name in a .ts file that too it looses alot of information from the model. Hope it might be helpful. Please Do let me know if you find anything.

Hi @Gnan_Eswar

Here is an updated version of the same sandbox which loads the .obj file directly. The OBJLoader is able to load objects in two ways:

  • By obj path/url:
    new ObjLoader(viewer.getWorldTree(), url)

  • By obj contents:
    new ObjLoader(viewer.getWorldTree(), "id", obj_contents)

Because of how the live sandboxes work, I chose to load the .obj by file contents rather than URL to avoid external fetches which might not work anyway because of CORS. Keep in mind that the ability to import .obj files like in the sandbox import d20_obj_contents from "../assets/d20.obj"; might depend on you project setup and it’s independent of the viewer library

One thing to keep in mind, is that the current OBJLoader only loads in geometry. So you won’t be able to load any materials you might have exported with the .obj


1 Like

There is a great guide here on creating a Vue based app. Creating Your Own App | Speckle Docs Is there a similar guide for React?

I’m just getting started and am leaning towards React since it seems to have better support for 3D with React 3 Fiber. It’s also more widely used than Vue as a framework.

Any reason that Vue was chosen as the framework of choice for Speckle? . . . Maybe that’s another forum post altogether, but I would like to know where I should invest my time before we are locked into using one framework over another.

Since Speckle adopted Vue, there have been several iterations of what React even is or where its focus has shifted in the This-is-the-definitive-best-way-to-build-a-react-app, whereas Vue has gone from Vue2 to Vue3. There were no doubt reasons, and ease of use was a key one. Ultimately, with the passage of time, this decision is somewhat moot.

We can look at a React tutorial or hold out hope that any of the active Speckle Community app developers outside our team share a tutorial or simply open-source their code. It would indeed be a valuable contribution.

I made a call out here: Help Us Build the Ultimate Speckle Viewer Tutorial

Hey @bfortunato,

This repository is a good starting point for creating a React Speckle App. It handles authentication smoothly and demonstrates how to use GraphQL queries in a basic manner.

1 Like

Thanks, just stared it and will take a look!