More than one 3D scene on the same HTML page without iframes

This topic has 9 replies, 3 voices, and was last updated 4 years, 5 months ago by scalare.

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

Author

Posts
2019-10-09 at 2:51 pm #20003

scalare
Customer

Hi Verge3D Team!

Is it possible to have more than one 3D Scene inserted into an HTML page without the use of iframes? If so, how? I’m working on a website where we need to display several 3D objects that will have to rotate slightly based on mouse position on the containing page. Is this something we can do with Verge3D with a separate GLTF file/visual logic file per object, and insert them into different locations on the same page? If so, how?

Thank you!

2019-10-10 at 6:27 am #20017

Yuri Kovelenov
Staff

Hi,

Yes you can have multiple app instances on the same page loading its own gltf file each. However, for now you can have only one logic file per html.

Chief 3D Verger | LinkedIn | Twitter

2019-10-10 at 11:54 am #20036

scalare
Customer

Hi Yuri,

I’m confused by your answer. Does that mean that we can display different gltf 3d objects on a page, but only one of them will react to the mouse movement, because only one of them can be controlled via puzzles?

The case is that we need about 4 or 5 different objects on the page, that will change their position responsively, something that we cannot do easily by adjusting the objects positions in a single scene, because we need them to match the positions of some HTML background elements (it is much easier to have each object as a separate GLTF and position them absolutely, matching the background automatic resize for the various responsive breakpoints)

Can you please clarify?

2019-10-10 at 1:21 pm #20041

Yuri Kovelenov
Staff

scalare wrote:

will react to the mouse movement, because only one of them can be controlled via puzzles?

if we are talking about default camera controls, then yes, all app instances will react to mouse movement. We didn’t try such a setup with puzzles and I’m not sure how it will behave. May be you could give it a try and see what happens?

Chief 3D Verger | LinkedIn | Twitter

2019-10-10 at 1:49 pm #20045

scalare
Customer

Not really. I plan to have several small 3D scenes in the same page, say about 250×250 pixels each. And I want them to react to the mouse movement that won’t necessarily hover over the 3D scenes, so we’re not talking about default camera controls here. I want the objects to rotate SLIGHTLY, following the cursor movement, so I guess I need to create some puzzles that will get the mouse location in every frame, and make the objects rotate in a non-linear calculation. But I guess that is not possible because I cannot have more than one visual logic on the same page, and that is what I would need. Am I right?

2019-10-10 at 2:01 pm #20047

Yuri Kovelenov
Staff

yes, I think you’ll have to use JavaScript in such the case

Chief 3D Verger | LinkedIn | Twitter

2019-10-11 at 4:10 pm #20089

scalare
Customer

Thanks, I’ll try and see how that goes.

2020-06-23 at 1:31 pm #29170

scalare
Customer

Hello Yuri,

circling back around this idea. I was able to create a Javascript file that handles the initialization of the 4 different 3D scenes on a single page. I create 4 different apps. Each one loads the gltf files correctly, and I set things so that they all load the same visual_logic.js file, which includes puzzles that refer to the objects in all 4 gltf files. The interaction works, but it is slightly laggy. I’m concerned that since all of the 3D scenes are using the same visual logic file, the code seems to be running four times. This means that there must be some kind of overhead because of the same file being executed four times. Is there a way to avoid that?

Thank you!

2020-06-25 at 12:43 am #29270

GLiFTeK
Customer

scalare wrote:

Hello Yuri,
circling back around this idea. I was able to create a Javascript file that handles the initialization of the 4 different 3D scenes on a single page. I create 4 different apps. Each one loads the gltf files correctly, and I set things so that they all load the same visual_logic.js file, which includes puzzles that refer to the objects in all 4 gltf files. The interaction works, but it is slightly laggy. I’m concerned that since all of the 3D scenes are using the same visual logic file, the code seems to be running four times. This means that there must be some kind of overhead because of the same file being executed four times. Is there a way to avoid that?
Thank you!

that sounds really interesting!

Visit the GLIFTEK Verge3D Plugins Store!

GLIFTEK.com for Plugin Documentation & LIVE DEMOS!

LIKE The GLIFTEK Facebook Page for updates!

Join the Verge 3D Discord Server!
plz share Discord link & on your signature!

2020-06-25 at 1:32 pm #29277

scalare
Customer

Thank you. Unfortunately, I have confirmed that the visual_logic.js code is running four times, and I haven’t been able to figure out how to avoid that.
Author

Posts