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.
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.
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,
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.
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, …).
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.
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.
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.
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).
Sorry, I do not want to develop an app. There are several apps out there already that do what I am suggesting. However, I currently on have access to my laptop. I need to know if I can run/install ThreeJS on my laptop or is there a way to reference it somewhere in a web page on my laptop (for demo purposes).
As I showed on my previous post, I only have one iframe and that is because I want to load a web page that includes the 3D vieweable of the selected model and a descriptive div that provides information about the model into the iframe. I do not think you can do that in a div.
Please help me understand what you (and some others on another forum) have against iframes. I do not think there is a way to do that in a div tag and I do not want to have to but an app that both shows the model in 3D and contains the information about the model. If I use something like Sketchfab the iframe solution works.
One last thing I should share is that all of my models are built in SketchUp and the exported in a glb format.
Divs can do pretty much anything with JS, and frameworks make that incredibly easy. That’s why I’m suggesting you relearn JS (and a framework), it seems like you don’t fully understand what you’re actually asking for on a technical level or how it should be achieved.
The main issue I see is communication between what’s inside your iframe and your information div, how do you intend to dynamically aggregate state and data into that div from within an iframe? I honestly don’t know off the top of my head how that would happen, but I do know I could set that up in an app pretty quickly and easily with having the model in the app. If you plan to hard code that could work, but as you add more models you hamstring flexibility and scalability and it quickly becomes a mess. But if you only have a handful of models you plan to do you could condition your info div based on another parameter related to the iframe but not what’s going on inside the iframe.
