ShapeDiver viewer settings

I have questions regarding the shapediver viewer.

  1. I create 3d scene and embed into site with embed code. During the loading scene shapediver logo appears. Can I remove/replace it somehow? I found here there is a comment regarding the loading icon that at the 37 line of the code, but don’t know how to use it for replacement.

  2. In the embed viewer on my website I also got viewer parameters, but I don’t need it. How to remove it ?

  3. Do you have any tutorial to recommend about regarding the inserting new parameter sliders instead of ShapeDiver slider?

  4. I want to disable 3d orbit scene for the region that is under the object. I don’t want to see bottom of the object. How to do it?

  5. And one more question regarding lighitin settings. I want to use HDR maps for lighting scene. And I want to have HDR map invisible at the same time. I realized that I can use some HDR maps from dropdown many. How to increase intensity of HDR map? Is it possible to add new HDR map in the list?

Thanks in advance

1 Like

Here some answers and links to the documentation:

  1. When embedding ShapeDiver models using the iframe Embed code, you can specify some parameters directly in the URL inside the iframe. This is described in this documentation page. In particular, the page mentions the option you need: the brandedMode option that should be set to false.

  2. By default, the Viewer Settings should be hidden in the iframe. However, I guess you are referring to the little pen button that can open the Viewer Settings, which is visible by default. You can hide it in the same way you removed the logo, by setting the showSettingsButton option to false. In addition to the previous documentation page, which describes how to do so, this API reference page contains all the available settings you can set in the iframe.

  3. Why yes, I sure do have recommendations and beautiful tutorials! What you are looking for is the API section of our documentation, and in particular the first two articles:
    How to embed a ShapeDiver model for API usage
    First steps with the API
    Note that most of this documentation is written for users who embed models directly in their website, without using the iframe. You also have the option to embed with iframe code and access the API, but it’s not as well documented at the moment, and will not give access to all of the options (although creating external sliders will be possible without any issues). The best I have at the moment is this short page, please let me know if you are trying to go this route and have trouble.

  4. This can be done through the API, using the viewer settings. We have this documentation page and here the full list of viewer settings you have access to. In particular, preventing the camera to go below the ground floor level can be done by restricting the polar angle of the camera to 90 degrees:
    api.updateSettingAsync('scene.camera.restrictions.rotation.maxPolarAngle', 90);

5.I don’t think it’s possible to directly increase the intensity of the environment map, however you can increase the metalness of your objects, which controls how much the environment is reflected on them.
As for using your own environment maps, I was going to send you to the documentation again, but I’m realizing that the article is empty at the moment… I will make sure it gets done soon. In the meantime, here are some pointers:

  • The viewer does not support .hdri files. You need to convert them to cube maps. This website for example does the job well.
  • The converter will give you a series of six images (px, py, pz, nx, ny, nz: keep the names, they are important). You need to store those images in an online public location. Store them all in the same folder which can be accessed by a single url. Let’s say at www.mywebsite.com/px.jpg, etc…
  • In the viewer settings, fill the “Custom Environment” text box with the root url where all the files are stored (www.mywebsite.com/)
    That should do, unless your storage location has some odd restrictions.

As a last note, I realize that some of these points can be made more user-friendly in the future, and most of them will. In particular, setting viewer parameters in the iframe url will be possible through checkboxes (like in the old site), and we might automate the environment map support so that you can directly upload hdri files in the viewer. We’ll make sure to announce those improvements as they come.

Thank you very much on detailed explanation. I have one more question: Is it possible to enable camera constraints (api.updateSettingAsync(‘scene.camera.restrictions.rotation.maxPolarAngle’, 90); and/or sliders to add via < iframe instead of API?
If yes, how it could be done?

Thanks in advance

Hi Guys,

I found how to turn off the SD logo on loading on this thread - thanks.

I have a related question - is there a way to have my own logo come up in the same way as the SD logo during load time?

Cheers

DK

You need to use the busyGraphic setting when you instantiate the viewer. You can specify the URL of an image to use. Check the list of settings here: https://app.shapediver.com/api/SDVApp.ParametricViewer.html

2 Likes

Thanks Mathieu - fast reply as always! Cheers.

1 Like

Hey @mathieu1 would you be able to provide an example code of how you modify the busyGraphic argument when instantiate the viewer? and does this also work in parametricViewer instead of an iframe?
My goal is to have a loading ring of some sort before shapeDiver is completely loaded and during the process of parameter changes. Would this achieve such goal?
Thanks in advance.

is there any update on this? thanks

The busy graphic is not really the best way to achieve what you want, for two reasons:

  • It only applies for the initial viewer loading, and not for the subsequent parameter changes
  • You can only link it to an image, not a spinner. You could use a gif, but not sure that’s the most elegant solution.

Instead, I recommend using the state interface of the API, which has event listeners that let you know if the viewer is currently working on an update or if it is idle. You can use that to hide and show any spinner or loading animation that you create yourself. Here is a code sample:

Let me know if something is unclear.

This makes sense… I’ll give it a try!
Thanks!

Hi all,

I am trying to get my logo to show in the iFrame at the beginning, before any input is loaded, but I am probably missing something basic.

I have loaded a image on google drive, set it public (share with anyone with the link), and pasted the link in my iFrame code, so that the end of my src code looks like this example:

'ticketNumber'&showControlsInitial=true&brandedMode=false&busyGraphic=https://drive.google.com/file/d/abcdefhilmnopqrstuvz/view

However, it is not working.

  1. Is google drive ok to generate an url for the image?
  2. Are there any requirements for such image that I may be missing (size, format, etc.)?
  3. Or, am I just writing the ‘code’ wrong?

Cheers
Matteo

Ok,

I made some progress, but I am not yet there.

If I host the image NOT on Google, AND in .jpg format the following code works correctly:

"ticketString"&brandedMode=false&showControlsInitial=true&busyGraphic="relevantURL"

However, it does not accomplish what I want.
In fact, I do see the linked image every time I update a model parameter, while I still see a regular busy spinner on white background at the very beginning.

My objective is to see my logo at the very beginning, before an input is loaded in the model.

I was able to get rid of the initial spinner by adding: &showInitialSpinner=false
I now get a white screen at the very beginning, before an input is loaded in the model.

If I add &showBusySpinner=false to prevent the image from popping up at every parameter interation, the model fails to load entirely. I am left with a white screen, and even the controls do not load.

Hence my questions:

  1. Is it even possible to see my logo in the model in place of the initial spinner ONLY?
  2. Why does &showBusySpinner=false prevent the model to load?

Cheers
Matteo

The busyGraphic option is meant to display a custom visual during parameter updates (i.e when the viewer is in fact busy). As you noticed, it cannot be used to display a logo during the initial loading.

The only way to do what you want will not be through iframe embedding but direct embedding, and involve a little bit a web development (overlay the logo on top of the viewer canvas and wait for a specific viewer event to be triggered to hide it).

We added a task in our backlog related to what you are trying to do and will think of the best way to provide this feature to our iframe users.

Regarding the showBusySpinner issue, it should not prevent the model to load and therefore sounds like a bug. We will investigate this one.

Thank you,

I’ll save this for later times, as I am trying to keep web-development out of my way for the time being.

Regarding the showBusySpinner issue, it only happens if both &busyGraphic="URL"&showBusySpinner=false are used together, so not a big deal.

&showBusySpinner=false on its own works just fine.

Cheers

1 Like