Affect elements outside of iFrame (Webflow)

This topic has 3 replies, 3 voices, and was last updated 4 months, 3 weeks ago by the3d.

Viewing 4 posts - 1 through 4 (of 4 total)

Author

Posts
2023-12-07 at 11:36 am #69014

the3d
Participant

Hi,

Spent the last few days playing around with verge3d, which is pretty awesome (Blender workflow). However, I’ve hit a snag which I can’t seem to find the answer for. My background is design, but I’ve got some basic understanding of coding.

In the tutorial (Verge3D for Blender basics), Webflow is used to create code and export it. This is all fine and works as expected. However, this method essentially is just a shortcut to writing HTML/CSS by hand, and decouples the code from the Webflow builder.

What I want to be able to do is keep a site maintainable on Webflow, and have Verge3D affect elements on the Webflow site.

In this simple example, I want; Clicking on the cube to hide the button, or clicking on the button to hide the cube.

Attachment 1 shows the puzzle setup
Attachment 2 shows assigning of id to button (‘trigger’)
For the embed I’m using: <iframe width="100%" height="100%" frameborder="0" src="https://cdn.soft8soft.com/AROAJSY2GOEHMOFUVPIOE:4d1c2599b1/interaction_tests/interaction_tests.html"></iframe>

From what I’ve gathered online, I’m thinking maybe it doesn’t work because the two projects are hosted on different domains, so I think security blocks them interacting with each other. although I could be wrong.

What are the options here. How can I make this so elements on my Webflow site affect elements within the Verge3D iframe and vice versa?

I guess one option would be to write the site code by hand by whatever means and not use Webflow. However, I would lose the benefits offered by Webflow. Also thinking ahead to potentially using it commercially, I would prefer to still use Webflow primarily.

Files can’t be uploaded to Webflow (at least I don’t believe they can), so moving all the files from my local computer to the Webflow file, to get them on the same server/domain(?), rather than hosted by Verge3D, is a no go.

Attachments:
You must be logged in to view attached files.

2023-12-08 at 2:12 pm #69043
jamdalu
Customer
I had a similar question related to the elementor integration and only got vague answers – topic here:( https://www.soft8soft.com/topic/how-to-communicate-with-wordpress/ ) . I spent countless hours trying to figure it out and never got it to work. In the end I had to scrap the integration due to time constraints. It seems that every user of this tool would want a simple and reliable way to get the in and out communication (iframe to web / vice versa ) to work. I check back from time to time hoping a sample project that demonstrates how to make verge3d work with elementor (app that communicates back and forth with elementor) would be released. Why we still don’t we have a tutorial showing how to do this with the elementor integration 7 months after release is beyond frustrating and makes zero sense. Asking the customer to figure it out, giving vague answers, or following demos from different platforms is not helpful. I would love to use this tool to power my websites, however after 2 years, I haven’t got anything of substance (beyond self contained iFrame) to work. The promise of simple integration with no code is the my main reason for using this tool in the first place. It makes zero sense to release a plugin (elementor plugin in this case) without showing exactly how to use it in context and in a way that makes sense, beyond a simple self contained iframe. Please show us how to get verge and elementor communicating back and forth, and we are good to go! If anyone does end up figuring this out, please post so others can benefit! Good luck!!
- This reply was modified 4 months, 3 weeks ago by jamdalu.
- This reply was modified 4 months, 3 weeks ago by jamdalu.
- This reply was modified 4 months, 3 weeks ago by jamdalu.
2023-12-08 at 8:41 pm #69055

kdv
Participant

the3d wrote:

Files can’t be uploaded to Webflow

But the Webflow files (index.html/.css/.js) can be exported and placed into the app’s folder. Here’s an example where the interface was completely created in Webflow with a Verge3D app running in a frame. And this app can be uploaded to any hosting or you can work with it locally with no CORE restrictions.

Puzzles and JS. Fast and expensive.

If you don’t see the meaning in something it primarily means that you just don’t see it but not the absence of meaning at all.

2023-12-11 at 1:39 pm #69082

the3d
Participant

I understand this option, and whilst it works, it’s not an elegant solution if you want to continue using Webflow as the working environment. Changes then have to be made in Webflow and reintegrated with the previously exported files within the Verge3D project folder. Or made outside of Webflow on the previously exported files. Either way it’s a faff for changes going forward.

@jamdalu Can’t say I’m familiar with elementor, although sounds like we’re in a similar boat. I’m sure there are much smarter people who can work these things out, but I’m not one of those. Figuring I can’t use Webflow in a streamlined manner, and would have to build a website outside of Webflow, I looked at two options; using a frontend framework or just hand-coding from scratch using HTML/CSS/JS. Hand coding works, but the more I got into it, and thinking about future projects/capabilities I went with using a front-end framework (Svelte, don’t ask why).

This created a new issue, integrating Verge3D with Svelte. I have no doubt it’s doable, but I couldn’t work it out. Figuring I had already dipped my toes into basic coding, I instead went with full control using Threlte (based on ThreeJS). Still working it out, but the integrated code seems to be working for me. Deep in the rabbit hole.
Author

Posts