We use cookies to ensure that we give you the best experience on our website. If you continue to use this site we will assume that you are happy with it.

Ok, I Agree

Affect elements outside of iFrame (Webflow)

Home › Forums › General Questions › Affect elements outside of iFrame (Webflow)

Viewing 6 posts - 1 through 6 (of 6 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 1 year ago by jamdalu.
    • This reply was modified 1 year ago by jamdalu.
    • This reply was modified 1 year 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 coding. 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 the 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.

    2024-06-22 at 4:10 am #75415
    domjasper
    Customer

    Also looking for a solution to this. I want to use Webflow to host my project, and have the 3D scene interact with the webflow ui. Is it possible?

    2024-06-22 at 11:06 am #75505
    Brameister
    Participant
    the3d wrote:

    Files can’t be uploaded to Webflow

    Hi guys, I’m no expert and I’m still figuring all of this out, but I might be able to help, if I understood your issue correctly.

    You indeed can’t upload files to a webpage builder per se, but you can upload files to the server actually hosting the site (I believe Webflow also provides web hosting services, apart from the builder tool). This also applies to Elementor and WordPress. They’re not web hosts, but page builders.

    However, you have to have a webpage host, right? That’s where you can access the server’s files.

    After going through the process of creating the interface on Webflow/Elementor, you have to export the code and place it in your local Verge3d app folder. Then you can build the puzzle logic, etc.

    After that, you need to place the entire app folder somewhere in the web host server, and then, back in Webflow/Elementor, you change the iframe’s src path to whereever your app.html file was placed on the server.

    Then, the UI built on Webflow/Elementor will interact with the Verge3D scene on the live website.

    Hope that helps!

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.