i am trying to integrate a shapediver model over an iframe into a django web-app.
I’ve got a Pro account of shapediver and i used the embedding code out of my model and i uncommented the line for api access as written in the documentation.
The viewer loads the model correctly But I get the error when trying to call the parameters in the console:
SDVReflector is not defined
I’ve also tried it in parallel with a simple Wordpress page, with the same problem.
I’m sure it is really a basic issue but at the moment I am really struggling with it.
The SDVReflector object gets defined as soon as the first message is received from the iframe. It’s important that the id of the iframe is sdv-iframe or sdv-frame, others are ignored.
You might be running into a timing problem. Please try to move the script tag for the sdv_reflector.min.js to a place before the iframe.
i tried this. But it seems to stay the same problem at least if i understood it right. I’m honestly not a devoloper, i’m a designer, sorry about my silly problems.
When i put it in JS bin i get at least an answer in the console:
Doesn’t seem like a problem, your call to api=SDVReflector.get('api') seems to have succeeded as expected. This gives you the api object to use for controlling the viewer. As an example, you can go ahead now and change parameters, control the camera, etc
An example to start with:
There are a trillion reasons why this might not be working in your specific setup
If you post a publicly accessible link to your example we might be able to help you.
Perhaps i have to explain a little bit my approach.
I want to optimize parameters of a design and i have a algorithm (PSO) which edits parameters of multiple designs based on user-ratings. This works quite well with 2D-Designs and now i want to find out if i can edit 3D-Design with this approach powered with shapediver.
The algorithm is enbedded in a django webapp. So the parameter value is transfered to the html which seems to work. But the communication with the shapediver iframe doesn’t work at the moment.
I am very happy about help in this quite special case!
Thanks for the link. As it turns out, there is a bug in the platform: the URL inside the iframe should start with https:, otherwise the origin check fails and the API object can’t be loaded.
It should look like this: <iframe id="sdv-iframe" src="https://viewer.shapediver.com/v2/2.7.0/iframe/remote.html...
I tested it in your page and it solved the problem.
However there is still an error in the link you sent, because then your are making a call to update a parameter value using an value that is not valid (setting 184 to a parameter that accepts values between 5 and 20). If you try to set a correct value, it works as expected.
The bug will be fixed very soon on the platform, in the meantime don’t forget to do this small change manually. As a side note, we had missed this until now because most users use direct embedding, which is more flexible and provides more features. Is there any reason you prefer using the iframe? Otherwise consider using direct embedding, which is better documented at the moment.
Ah! Yeah now it works properly!
Thank you so much…
i started to use the iframe version, because i thought that i only had the license with PRO for this version. But probably this is a stupid misunderstanding on my part.
But it would also be interesting for me to understand the differences. Which version is better in terms of loading time? I don’t need complex interfaces at the moment, because currently only the algorithm changes parameters.
The iframe version makes it easier to load the viewers with all the GUI elements. It is also the only way at the moment to embed several models on the same page. However, some of the advanced API functionality is not available through the iframe. Reading and updating parameters works fine though.
Direct embedding might be slightly faster, especially if you don’t need any of the UI, then you can load the 3d view only. The API is fully available for directly embedded models, and some of its functions are more convenient (synchronous responses).
If you want to try it, switching to direct embedding shouldn’t be too much work for your application. Find everything you need in the documentation.
Thank you very much for your answer, thats very interesting!
in fact i would like to load two windows with shapediver models side by side at the same time to show the users models in parallel to find out which variant is more attractive in a Coice test.
One challenge is that I would like to control both models at the same time (zoom, rotate, etc.). Is there already a solution?
First of all, an update on embedding several viewers: it is actually an issue we are working on at the moment. It will be possible both for iframe and direct embedding in the near future. For now, it is possible to embed two viewers in iframes, but the API will not work properly. After the next update, multiple viewers and their respective APIs will be available in all cases.
As for controlling both viewers at the same time, there is no straightforward way to do this. Below is an idea of how you could do this (once the above issue is fixed!).
I guess you could set a listener on the viewer containers for mouse move events (while mouse down), get the camera of the active viewer using the API (api.scene.camera.get()) and then set the camera in the other one (api.scene.camera.updateAsync()). Of course, since you have two viewers, there is a different api interface object for each of them, so it would look like this:
thank you very much!
For me this would be really essential.
Is there a time frame when this could be realized? At the moment i want to buy a years license.
This functionality would be really important because i want to compare diferent models. So will it be possible to use this in some months or are we talking about a longer timeframe?
I updated the demo with a single slider that is connected with the same parameter in both viewers. When the slider is updated, both models are updated with the new value.
Now the script contains a single function for which you give the parameter name, the value you want to set, and which iframes to target (an array where you can specify one or several iframes).
Of course it’s a quick and dirty example, ideally the slider properties should be initialized when loading the model (min, max and current values pulled from the viewer). But that’s another story.
Yeah now it works properly!