Customizing the Speckle 3D Viewer in HTML: Display Modes, Camera Controls, and Dynamic Updates

[BelenReyes (Belén Reyes)]

Hello good evening,
my first post ,

I wanted to know if there is a way to insert a 3D viewer in a container in an html with javascript,
in addition to using div class/frame/src
"

", which is incredibly useful :heart: , but I would like to be able to customize the product I see a little more, for example, I would like to be able to use a "view mode" or "pipeline" ("Solid" or "Shaded"), without having the sidebar, since it is something that I would not want users to manipulate, I would also like to explore camera controls, if possible to animate, currently I have tried with "https://unpkg.com/@speckle/viewer" and but I have not achieved anything. My project is, "https://app.speckle.systems/projects/4fe6b2ee63/models/6151567ec8", and with the "https://viewer.speckle.systems/" I have been able to view the model and modify some things, but I do not know how to take it to my html page or if it is possible, also about the best way to update the frame, when I make a request, (I am a newbie, but my project is a bit like this: Speckle from the page, is using graphgl to send data to specific branches of my project, which I read and process in grasshopper to produce geometries, the idea is that the iframe receives and shows the latest version that grasshopper returns to "6151567ec8", but I guess updating it by time or a button, could seem inefficient)

I appreciate your attention and any ideas, greetings

[vwb (Victor)]

Hi @BelenReyes, welcome to the community! I am going through the same. You can an example of what I have achieved so far on my website https://victorwb.com, most of the code is here: website/src/components/SpeckleViewer.vue at af23c0b3aaf29c801148a42c0309e162894b06f1 · vwnd/website · GitHub (it’s using Vue, but you can check the script part of this file. It has selection, changing materials, and more recently just added tooltips with help from @alex.

[jonathon]

So far you e mentioned the two means of embedding speckle data to a web page

1. Embedded viewer as iframe, minimal effort, interactive.
2. Programmatic component. Requires some JS knowledge but allows total customisation.

With the 1. iframe version, you can have a single button on the outer page that modifies the url of the iframe which would cause a reload to latest version or even different project and model. You cannot control the iframe model viewpoints or appearance