I want to view Speckle in my react application, how do I do it? What are the options and what are the features?
Hey @Ivi,
Welcome to Speckle!
You can have a look at this example as a starting point: Speckle React Starter. It handles authentication smoothly and demonstrates how to use GraphQL queries in a basic manner.
If you are only interested in visualizing Speckle 3D models, you can check out the 3D Viewer documentation and also this basic example: Basic Setup - StackBlitz.
If you can share more about your use case and be more specific, we can help you further.
Are you interested on:
- Authentication?
- 3D model visualization?
- GraphQL query?
- View object parameters?
- or something else?
5 Likes
Hey @Nikos.
I have a project in speckle. I give the user access to the project in speckle. In my application I want to make a button when pressed → if the user is registered in speckle he sees a 3D model. Otherwise, he passes Authentication/registration and sees a 3D model → the user wanted to get the geometry of the model in his application → make some improvements and upload the geometry back to speckle.
Please tell me how to implement this case?
Are you looking for complete instructions on how to build a react application with OAuth flow? We plan to build some react example tutorials but don’t have anything we can quickly share.
What you describe sounds straightforward enough, but there’s a lot to un pick - it would undoubtedly be easier for us to help you when there is some code to look at.
2 Likes
@jonathon, @Nikos
Please help me with these questions first, for further progress.
Can I get the model geometry (in what formats?) from speckle to my application (written in React)?
I want to modify the model (let’s say add additional holes) and upload the model back to speckle?
I need to know what formats I can get from speckle. To convert the model in my application and back to speckle?
You retrieve Speckle data as deserialized JSON in the Speckle format. We provide a viewer that can visualize this.
We don’t have specific libraries for model manipulation. You’ll need to use another library for this or write your own manipulation code. Refer to the Speckle Objects library for guidance.
There seems to be a misunderstanding about Speckle’s functionality. Please review our User Guide and Developer Docs for comprehensive information. Speckle is a data hub for objects formatted to the Speckle object schema, supported by connectors for nearly 30 different software applications.
You can use our SDKs and APIs to read and write data in the Speckle schema format. Speckle data is not available in other formats.
1 Like
Let me try to approach the question from another angle.
I have a project in speckle: Can I get an object of this building with parameters or something similar to this structure
{
id: "1111Building111",
type: Building,
matrix: Matrix4 {elements: Array(16)},
position: Vector3 {x: 0, y: 0, z: 0},
scale: Vector3 {x: 1, y: 1, z: 1},
...
children: [
{
id: "1111Block111",
type: Block,
matrix: Matrix4 {elements: Array(16)},
position: Vector3 {x: 0, y: 0, z: 0},
scale: Vector3 {x: 1, y: 1, z: 1},
...
children: [
{
id: "1111Floor111",
type: Floor,
matrix: Matrix4 {elements: Array(16)},
position: Vector3 {x: 0, y: 0, z: 0},
scale: Vector3 {x: 1, y: 1, z: 1},
...
children: [{
...
}]
},
{
id: "222Floor222",
type: Floor,
...
children: [{
...
}]
},
{
id: "333Floor333",
type: Floor,
...
children: [{
...
}]
},
...
]
}
...
]
}
Hey @Ivi,
There are a few ways do to this:
-
Use Speckle utility package objectloader
-
You can use or the GraphQL API and request a specific Object(s) or use the REST API and fetch everything. We usually recommend the GraphQL API because 3D models come in large JSON formats, containing all kinds of 3D information along with metadata and parameters.
Here is a small React example that i put together: Speckle React GraphQL Sample Project - StackBlitz
This example is using the Apollo GraphQL Client, you can always change that and use what you prefer.
You can share with us the specific Project URL that you are trying to fetch and we can help you further.
Hey @Nikos,
Thank you for your answer.
Here is my test project
https://speckle.xyz/streams/ff1030bda4/commits/99b2c8bb0d
Hey @Ivi,
Is there a reason you are still using the old Speckle web app?
I recommend that you switch to the new web app at → app.speckle.systems (main - Test | Speckle)
The old web app (speckle.xyz) will be deprecated soon.
Here is an example using the GraphQL API and React : Speckle React GraphQL Sample Project - StackBlitz
you just need to replace the Project ID and the Object ID.
1 Like
If you migrate your account from speckle.xyz to app.speckle.systems then a default onboarding model will be added that you can explore. it is not data rich, but is perfectly valid.
Can I get this object in three.js?
Additionally, here’s an overview about how you can work with objects and nodes inside the speckle-viewer
