ShapeDiver viewer settings

unhandled

(DDC) #1

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


(Mathieu Huard) #2

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.


(DDC) #3

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