webstudio + verge3D

I don't really understand what the issue is, if you are happy with a iframe

I'm unable to make HTML elements communicate with the web app. Clicking on the div should change the color of the mask, but it doesn't work.
I can't figure out if the HTML UI and the web app need to be in the same folder on the server. It seems like Verge3D expects all the files to be located within the project folder.
Just wondering if uploading all the Verge project files on the webstudio cloud is the right practice or if I should fix this in adifferent way

which div?

oh those 2 squares are supposed to be buttons?

so you want to have buttons on the webstudio side which change things inside the iframe that is in verge

does verge support parameters on the iframe url?

if yes then you can addd some js to the buttons an set the iframe url on click

a better way to render would be if verge provides a js-based widget that renders without the iframe, directly in the same document and provides an api to update the rendering

tools like spline have an api for that https://docs.spline.design/doc/code-api-for-web/docAaCtKnMkZ

verge seems to have that too

https://www.soft8soft.com/docs/manual/en/programmers_guide/Programming-basics.html

Yes the two square are two buttons ...
The Verge 3D suggested pipeline (using webflow) is to build the UI, assigning specifi ID to the UI elements.
download .html and .css. put them in the project folder, and Verge app is able to listen and react when a button is clicked.
What I do not understand is how to replicate this on webstudio cloud.
Sorry I am not a coder I would be more confident to use the visual editor provided by verge instead of JS.
Hope this make sense.

Hey, I might be able to help. I completed a side project this year that dealt with similar integration issues.

Verge3D is a confusing beast. It's part game engine, part blender addon, part puzzles programming interface, part local web development environment and the documentation is not great. I think Verge3D was awesome when it was released, but is an outdated system now. I tried really hard to like it a bunch of times, but just couldn't get it to stick and if you look at their support forums you'll see many others struggling with things that should be easy.

Check out cables.gl for a fun alternative - I'll bet you could port your project over with a little effort (you'll just need to learn a bit about glTF files and how they're handled in Cables). Cables is awesome and has a really cool community, but integration with Webstudio's buttons won't be easy for you.

I think @Oleg Isonen 's suggestion to use Spline3D is a really good one. Spline gives you a lot of goodies for free; the renderer is really well optimized out of the box and Spline is built with modern javascript frameworks in mind. Pretty sure Webstudio is built on Remix so they should play nicely together, even for complex interactions.

The code sandbox @Oleg Isonen linked to is a great example of how easily Spline3D can get the integration you want. You don't even have to host the code yourself. If you don't understand the code, copy and paste it into chatgpt and ask it to explain it to you, it's a decent code tutor.

When you get something up and running, paste it back here, I'm curious to see what you'll make

@Sebastian Petrovski thank you som much for your help, it look like this is the best way for me.
Thank you so much, regards.