I’m not a programmer by any stretch, which is why I like bought Hype for making interfaces. I’m also using a program called Verge 3D to create interactive 3D content from Blender files.
In a Verge web app, I can use a ‘parent’ html document, put the 3D content in an iframe, and then use the id’s of elements in the parent document to drive actions in the 3D iframe. However, this doesn’t work using a Hype document. The 3D shows up, but there is no interaction.
I saw someone post about Unity that you needed to use postmessage to send an argument to the iframe, but both documents are in the same folder on my local server, so cross-origin shouldn’t be an issue. My guess is that since the Hype content is somehow inside its own frame, it isn’t really in the ‘parent’ html document (but again, I’m no programmer).
Any thoughts on how this might be made to work?
The sameOrigin-Rule only works online or in a local webserver. Same origin doesn’t work for file://
Would it matter if it was running in a local server? Because that’s what was happening.
Maybe it helps if you generate your iFrame instead of using the one provided by Hype. There was recently a link to this: Tip: JS-Library for iFrame-embedding by @h_classen
Not seeing your setup is guess work in the dark. So hope this helps.
Marmoset Toolbag, Keyshot XR, FinalMesh, Boxshot Koru allows for something like this out of the box. They have a snapshot feature which you can define.
I’m trying to make something like a product visualizer, where you click on a button to change a texture or show a feature. And I want control over the interface, especially so I can put my client’s logo on it, etc. I’m not seeing that level of control in those examples.
kinda like this? Its not 3d though.
https://tumult.com/hype/gallery/InteractiveConfigurator/InteractiveConfigurator.html
https://tumult.com/hype/gallery/InteractiveConfigurator/InteractiveConfigurator.hype.zip
Yeah, the 3D part is key
Okay, I’ve gotten it to work, by manually adding the iframe to the generated html instead of using an html widget, but none of the 3D navigation works (typically, you click and drag to rotate the view, mouse wheel to zoom, right click to pan. I suppose I could rebuild that functionality, but then the rest of the clicks would be problematic (like click on the cube to cause an action) Here is a ridiculously simple example:
http://www.argosdesigns.com/HypeTest/HypeParent.html
Is there a way to make mouse click pass through the hype document to the 3D iframe?
Here is an example of what the normal navigation should be:
Please share your Hype document with the above example
Here is a zip of the whole example. I’ve updated it a little from before (the 3D is now full frame and the Hype part is in the corner, still 600 x 400). The ultimate goal is to make a full screen gui over the 3D. Not sure how to add a file to these posts so here is a dropbox link.
https://www.dropbox.com/s/gufxf1kjhc9p7a6/HypeTest.zip?dl=0
I may be barking up the wrong tree… but would a postMessage work?
The button would have a on click action in Hype which runs a hype function to post a message.
Then the iframe would neeed a the EventListener code.
I’m not sure how to implement postMessage. I am not a programmer. Here is an example of a 3D project in Verge that has an html gui over it:
https://preview.webflow.com/preview/teapot-heater-preview?preview=a487d9c64960ef2c7b6927cc345c1111
They used Webflow to make the gui. I was hoping to be able to use Hype, because I like the program and want to use animations in the gui part.
Which would work fine if I could pass mouse events to an iframe beneath the Hype div.
Anyone else tried this? I can get it working but only on desktop, really strange because even in chrome if I inspect it, the responsive mode of the inspector breaks it too.
For anyone stumbling upon this by googling "verge 3d postmessage to main page"
this is how you do it insided a puzzle script:
var message = JSON.stringify({
message:VARS["My_variable_name"] ,
date: Date.now(),
});
window.parent.parent.postMessage(message, '*');