Load multiple web pages in multiple iframes via clicking a single link

I have 3 iframe on a web site:

  • iframe A contains a scrollable list of models
  • iframe B ,is the place where the selected model will be displayed
  • iframe C is the place where details information will be displayed

When I click on the a model in iframe A, I would like to specify the link to the selected model. I would also like to specify the detail information for the selected model in iframe C. So I would like to know how to specify more than one link when the user clicks on one of the objects in iframe A.

Hope this makes sense. When I can get back on my laptop I might be able to post an mage that illustrates what I am trying to accomplish. Also, to let you know that once I understand how to accomplish this, I will want to get more involved with three.js because I will want to display glb files in iframe B. I already know I will have to use three.js to accomplish that. :grinning:

Here is an image of the page layout.

This question is somewhat unrelated to Three.js.

As I’m not a web developer, I’d use these steps:

  • for each model you keep somewhere some important data (e.g. object name, thumbnail, URL of its 3D file, URL of its more-details-page, etc)
  • when the user clicks on a model in iframe A, you can intercept this click and get what is this model
  • then you extract the relevant important data for this model and set the source web pages for iframes B and C

There might be some better approach or some existing framework that makes this easy, but using plain JavaScript should be OK too.

Thanks for your reply. I know this is really to a three.js issue but I need to understand how to accomplish this before I get into three.js and some of its features.

Is there a reason for the 3 iframes? communication between iframes can get complicated!

How about a CSS grid with 3 divs, div A as a sidebar, div B as the container for the three.js canvas, and div C to display the data.

The rest is javascript.

2 Likes

Official Three examples website is an example of mixing HTML, JavScript, CSS, iframes and Threejs

You could reverse engineer how that website works and then expand your use case as required.

https://threejs.org/examples

2 Likes

This is close but I will need the third div to show the model description/information. Since I have not done a coding for several years, I will have to do some more reading/learning about div tags (in particular how to make scrollable dives and how to populate multiple divs with a single click.

I really appreciate the feedback and patience, :grinning: :+1:

I wish I could see the code for the clickable examples. I need to understand how they show the model clicked in the frame to the right.

1 Like

maybe you should re-consider building this with iframes, or make fetch requests for each model because that’s going to make your site slow and the code bulky and complex. this is commonly solved with routers and components. you wouldn’t have to boot up threejs for every click, load all assets again, environments etc.

i give you a few examples so you can have something to look at even if you decide to try it with something else. just keep in mind that what you want is basically what web-dev has firmly established over the last 15 years. it would be a mistake to do it like how it was before that (iframes, polling, injections, url fetch requests for each click, …).

router links:
https://codesandbox.io/p/sandbox/router-transitions-4j2q2?file=%2Fsrc%2FApp.js

controlled load:
https://codesandbox.io/p/sandbox/pairing-threejs-to-ui-wlz1o0?file=%2Fsrc%2FApp.js

view tracking (with a single canvas):
https://codesandbox.io/p/sandbox/view-tracking-bp6tmc?file=%2Fsrc%2Fstyles.css

multi view (with a single canvas):
https://codesandbox.io/p/sandbox/multiple-views-with-uniform-controls-r9w2ob?file=%2Fsrc%2FApp.js

3 Likes

I appreciate the reply. I hope the image below and the explanation after it make things a little clearer.

  1. The first step is to load a “home” page that is the place where the models will be made for the site viewers. This page will contain a “div” on the left that is a scrollable list of the models available for the viewer. Each of the items in this list will contain a link to a web page that is unique for each model. To the left is an iFrame which is where the selected model’s web page will be displayed. When the “home” page loads, this section will be blank or could contain some general information.

  2. As was stated, each of the models will have a unique web page. The model web page will have two “div” sections. The top “div” will contain a tool (i.e. “model-viewer” or some similar tool) that presents the model in a 3D viewer (like the one of the astronaut in this example link or like the examples on the threejs web site in the post above. The lower “div” will contain information/details about the selected model.

  3. When the viewer clicks on/selects a model to be displayed, the web page for the selected model will be loaded into the iFrame on the right in the “home” page.

Hope this makes sense/clarifies what I have in mind. :smiley:

Now for some silly questions/comments:

  • At the present time, I do not have a web site and server. I am doing all of this on my laptop (which is about 10 years old). What I am attempting to do here is form my education and hopefully can share with others once I get things working (at least a sample).

  • I have not written any JavaScript code for many years.

  • The tool is a JavaScript application. In my research, it appears that it uses threejs. Since I do not have it installed on my laptop (and to my understanding I cannot use it on my laptop) is there a public link I can reference I can use on the model page that will let the tool display my model?

I know all of this may be over the top and a little silly, but I am participating in another discussion (which I cannot share at this point).

Relearn JS, learn Three.js, learn React Three Fiber, build your app. Never think of iframes again, at least, not how you intended to use them.