Show complex controls like in V2

Hello,

I saw a v2 demo https://codepen.io/ShapeDiver/embed/xxxrBxz?default-tab=&theme-id= and I would like to make it work in v3. Is there any way to enable those controls (Viewer Settings - Camera) ?

In the given demo I saw the div holder for them “sdv-container-controls” but I can’t see any reference to it in the JS code.

Thank you!

You have access to the viewer settings in the Edit page of your model on the ShapeDiver platform. There you can update lights, cameras, environment, etc…
Do you need to have these controls when you embed the model? Which ones precisely?

In any case, it is possible to connect the viewer settings to html controls using the API. Here is an example that connects the model parameters with a custom UI: UI example - CodeSandbox

Hi @mathieu1

Yes, I need it to work on the embedded model (I don’t have access to the model on the ShapeDiver platform, I just got the token and the URL to embed it).

What I need is to control the “Zoom factor” of the model. The v2 example was great, if something like that can be easily done it would be perfect, if not … even the zoom factor is enough for now.

Thank you!

PS: This is my code until now : SolarPorts

Does anyone have an example? I find the docs … quite confusing.

Thanks!

I still do not quite understand what it is you need to be doing. I don’t think you want to expose the viewer settings to the end users of your application, what would be the reason to do that? Are you just trying to control viewer settings in general using the API? There is a specific documentation page about this, with several code examples: Viewers

In the case of the zoom factor, you can just call
viewer.camera.zoomExtentsFactor = NEW_VALUE;

However, you seem to be out of luck because I just tested this setting using the API and it seems to have no effect in the latest version of the viewer. I communicated this to our team and it will be fixed soon.
Besides this issue that will be fixed shortly, is there something else that is confusing you at the moment? Does my explanation work for updating other viewer settings? For example, does it work for you if you tried to update the field of view by calling
viewer.camera.fov= NEW_VALUE;

Here is a complete example on how to update the zoom factor. I had overlooked that after updating the value, one needs to call the zoomTo() function to update the camera position. Let me know if you have further questions.

Hi @mathieu1

Perfect example. I now fully understood how to interact with the viewer.

Thank you for all the help :smiley:

Also, out of curiosity … I tried searching for “zoomTo” in the docs ShapeDiver Documentation and it didn’t find any results.

Is there any other official source of documentation with a complete list of functionalities?

Thank you!

Have a great weekend!

Sorin

The viewer section of the help center is a high level introduction with code examples to the viewer API. The full reference of the API is linked on the landing page of the viewer help center and can be found here: api/api/src | Viewer

Thank you!

Got it with the docs, I, personally, find it super hard to navigate unless you already know the code structure of the viewer. At least a search/filter functionality will truly help there. If the code generator doesn’t allow such a feature, there are solutions like sphinxsearch and others that can index HTML files.

Regards

Sorin

Example … for our own “zoomExtentsFactor” … from your code, I saw that the right values are between 0 and 10, but, from the docs …

It is impossible to guess those values and that I need to call zoomTo after that.

Thank you for your feedback. We are continuously working on improving the new documentation and will integrate your comments in the process.