How to implement my v3dApp to my website

This topic has 7 replies, 3 voices, and was last updated 3 days, 4 hours ago by bigmike814.

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

Author

Posts
2024-11-12 at 7:15 pm #78620
mohammadreza
Participant
After setting up the scene and adding functionalities with puzzles, can I embed the resulting v3dApp into a canvas element within my own webpage? The page will also contain other HTML elements.
If yes, what is the best workflow to do so?

Thanks in advance for your replies.
- This topic was modified 1 week, 2 days ago by mohammadreza.
2024-11-12 at 7:53 pm #78630

visualizer
Customer

Yes very much you can use simple ways like iframe to embed the 3d content in you website.

2024-11-12 at 7:56 pm #78631

mohammadreza
Participant

Thanks for you reply!
Is there any tutorial for that?

2024-11-12 at 8:12 pm #78635

visualizer
Customer

Its not very difficult. I will check but perhaps someone here can also reply to you with quick code on it.

Here is a screenshot of a website we made for out client with header page itself with complete robot system playing in loop infinitely. Shor clip is attached fyr

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

2024-11-12 at 9:50 pm #78640

mohammadreza
Participant

Thank you; I figured out how to integrate my V3D app using an iframe. However, there’s an issue. When using an iframe, you need a server to host the V3D app files—this could be a server like v3d.net, GitHub, or any other. The downside is that loading the files from the server takes time, as the client first loads the main website, which then has to make another request to load the iframe content.
I’m trying to find a way to combine my code with the code generated by the v3dApp manager to create a website that the client only needs to load once.

2024-11-13 at 1:51 pm #78695

visualizer
Customer

Exactly this issue is to be addressed by using ReactJS based website building method.
I was about to mention this yesterday in my reply but thought you would confuse so avoided.
By using ReactJS we achieved the results well recently.
Experienced people here can tell you more on this but at gross level what I understand is, ReactJS allows to load the only specific section of a page which is browsed instead of whole page content in one go.

2024-11-16 at 4:16 pm #78833

mohammadreza
Participant

Thank you very much for your information. I think some tutorials in this field could be really useful.

2024-11-19 at 6:57 am #78914
bigmike814
Customer
You can embed it into your canvas. Just make sure it is at the same level as the html they give you and make sure to include this (substitute your app name for “my_awesome_app”
```
 <script src="v3d.js"></script>
  <script src="my_awesome_app.js"></script>

  <link rel="stylesheet" type="text/css" href="my_awesome_app.css">
</head>

<body>
  <div id="v3d-container">
    <div id="fullscreen-button" class="fullscreen-button fullscreen-open" title="Toggle fullscreen mode"></div>
  </div>
```
This will want to overlay your html, so you’ll need to adjust the z-index in the css.
- This reply was modified 3 days, 4 hours ago by bigmike814.
- This reply was modified 3 days, 4 hours ago by bigmike814.
Author

Posts