Direct Embedding private models

Grasshopper ShapeDiver
1

Hi,
We just signed on as a PRO user blueprint.
Here is one of our private models to be embedded to our web page.

https://app.shapediver.com/m/mid-XXXXX

Can I just use localhost:8080 as a domain to embed our viewer ?
For now, localhost:8080 is http, not https.

I used localhost:8080 as Global Domains in the Domains tab.
Also used localhost:8080 in “Allowed domains for embedding” in Edit Model page.

But I got this error:
POST https://mid-XXXXX/ticket/5fb9cf…
net::ERR_NAME_NOT_RESOLVED

Thanks

2

Can you send a minimal code example that produces this error? How are you instantiating the viewer and loading the model ticket?

5

index-shapeDiver.html (536 Bytes)

AppJSX.txt (3.6 KB) indexJS.txt (1.7 KB)

Hi Mathieu,

I uploaded 3 files. AppJSX.txt is actually App.jsx. And indexJS.txt is index.js.
I no longer have earlier problem on localhost as long as I used the ‘eu-central-1’ as modelViewUrl.

Are we always using ‘eu-central-1’ as modelViewUrl ?

Our web app will display private model, but each time the screen mixed with the previous canvas.
screen1.png shows the Couch model
When I clicked the button to show Shelf model, noticed there are two canvas created.
The Couch and Shelf both show but Shelf is on the small right side area.

How to clean up the first canvas before the second canvas display ?

8

@mathieu1

I created a sandbox.

Steps to reproduce the issue:

  1. launch sandbox - The Couch model is display
  2. click button ‘Click to show Shelf’ - The Shelf model is displayed on the side. It mixed with the Couch model. The browser inspect shows two canvas instead of one. I expect to see Shelf model alone.
9

Yes, unless you have an Enterprise account with dedicated servers.

For the rest, I am not very familiar with React, but it looks to me like you create another dom container every time the buttons are clicked. In general, this version of the viewer does not have a very straightforward way to switch between different tickets. What you can do is load several tickets in the same container and just hide or show the contents of each comm plugin that is registered in the scene. Make sure to give different runtimeIds to each plugin! There is a full code example to do just that:

Let me know if this approach would work for you.

10

@mathieu1

Your codePen example solved my problem. Thanks a lot.
One issue is the ShapeDiver logo shows when the viewer is loading.
Is there any way to hide that in direct embedding?
I heard that iframe embedding can avoid that. Do you have an example ?

11

I see the ShapeDiver logo neither in my code example above nor in yours. But maybe that’s just me because indeed the branded mode (showing the logo) should be activated by default. You can get rid of it by adding this setting when you register the comm plugins:

brandedMode: 'false'

I updated my code pen above to include this option for both comm plugins. Let me know if that solves your issue.

12

@mathieu1

When I load my app in my project(not the one in codesandbox) to browser, I don’t see the logo.
FYI. My app also loads a default contents/plugin in the viewer when launches.
I only see the ShapeDiver logo show when I resize the window.

Adding the brandedMode setting (brandedMode: ‘false’) seems not affecting the result.

  // initialize a session for the model, don't load geometry yet
  await api.plugins.registerCommPluginAsync(graphicsData[0])
  geometryLoaded[graphicsData[0].runtimeId] = false;

  await api.plugins.registerCommPluginAsync(graphicsData[1])
  geometryLoaded[graphicsData[1].runtimeId] = false;

  await api.plugins.refreshPluginAsync(defaultPluginId)
  geometryLoaded[defaultPluginId] = true

Thanks!

13

Why is the viewer reloaded when you resize the window? Could you share a minimal code example and steps I can use to reproduce the issue?

14

@mathieu1
Thanks. I’ll see if I can come out a code example for the resize question.

I got another question on the codePen example you sent.

  1. When we switch to a different runtimeid/pluginid, can we also ‘attach’ some parameters name/value with it so the desired parameters’s value are displayed.

If we can’t do 1),
2. Every time after we switch to a different runtimeId/pluginid, can we send an update parameter request to the new runtime plugin (i.e. await api.parameters.updateAsync{[…]}) ? When do we send the update parameter request?

15

The switch in my example just shows and hide the contents of each plugin. They are both always loaded in the viewer, and there is no problem sending new parameter update requests to each of them at any time (even when they are hidden).

16

@mathieu1

I have listed 6 names in Global Domains and these names showed in each
private model’s domain setting.
Only one domain got CORS error. What could be wrong ?

Access to XMLHttpRequest at ‘https://sdeuc1.eu-central-1.shapediver.com/ticket/2d58aad8a896da38e553de....ea212c91fd39a’ from origin ‘http://dxxxxqas01’ has been blocked by CORS policy: Response to preflight request doesn’t pass access control check: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

17

We are aware of a CORS issue that sometimes happens and we are investigating it. Emptying your browser cache might temporarily fix the solution but it might happen again. I will let you know when we are able to identify the problem.

18

If it is caching issue, we should see the issue happened in the other domain names.
But it showed for only one domain name.

Also this url ‘http://dxxxxqas01.yyyy.com’ works, and this one ‘http://dxxxxqas01’ doesn’t.
But the other server i.e both http://zzzz.yyyy.com’ and ‘http://zzzz’ work.

19

@mathieu1

When we run our model in a narrower screen, we got these browser console messages a lot:

[.WebGL-0x7f9d470b1400]GL ERROR :GL_INVALID_FRAMEBUFFER_OPERATION : glDrawElements: framebuffer incomplete

We need to support the app in a responsive way, also expect to run in tablet browser and mobile browser.
Is this causing degradation or problem ? Can this be prevented ?

Thanks!

20

@mathieu1

Here is a sample code in codepen.io for the mobile issue (pure JS, no react).

In Desktop

  • Click CommPlugin_1 (when checked, the model loaded, when unchecked, the model unloaded)
  • Click Show 3D Model button
  • Expect 3D model show up (if not, resize the window a little bit)

Try above steps in Chrome(with Toggle Device Toolbar for tablet and phone)

  • Sometimes the model show, sometimes don’t
  • There is no way to resize the window

When the div is invisible(display: none), can the model be rendered correctly ?

21

Unfortunately I cannot reproduce the issue on my laptop. I would recommend the two following steps to try and fix the issue:

  1. Ugrade to the latest viewer version (2.27.0)
  2. Try to place a call to api.scene.render() after clicking on the “show model” button
23

Thanks a lot.
The call to api.scene.render() works nicely.

24

Hi,

We have a user report the following console error in a Chrome browser. The same app running in MS Edge browser is fine. Is there any way to find the root cause for the error ?

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading ‘dispose’)
at K.destroy (RenderingHandler.js:516)
at E.destroy (ThreeDManager.js:575)
at m.removeThreeDManager (ViewportManager.js:221)
at m.createThreeDManager (ViewportManager.js:157)
at new module$src$app$ViewerApp.default (ViewerApp.js:357)
at new ParametricViewer$$module$build$package.ParametricViewer (package.js:408)
at pbs.2c8e9f978905897.js:79
at pbs.2c8e9f978905897.js:79
at ol (pbs.2c8e9f978905897.js:54)
at gs (pbs.2c8e9f978905897.js:54)

We are using React and Direct Embedding.
Here is snippet of the code:

  api = new window.SDVApp.ParametricViewer(settings)
  await api.plugins.registerCommPluginAsync(graphicsData[0])
  geometryLoaded[graphicsData[0].runtimeId] = false;