- This topic has 15 replies, 2 voices, and was last updated 1 month ago by
.
-
I’m trying to get fullscreen immediately responsive to users’ input when button is clicked on – (like Verge3d viewport fullscreen’s – that scene is immediately reactive to player’s input when the fullscreen button is clicked)
My javascript:
My html:
How do I get this code to work?
failed to apply this, where did I go wrong:
source:
https://stackoverflow.com/questions/2890921/simulating-click-with-javascript-on-documenti tried to apply
v3d.play();, yet this didn’t cause fullscreen to be responsive immediately when fullscreen button is clicked on? Still have to click fullscreen again to get Verge3d to respond.
My html:
Even this does not work. Still have to click fullscreen again to get Verge3d to respond. How do I get fullscreen to be playable immediately after clicking the HTML element for fullscreen?
window.onload = function() { v3d.play(); // Ensures the scene starts playing if there are animations or interactions. };
Tried this, still does not work?
HTML
<div id="fullscreen" title="Fullscreen" onclick="fullscreen();"><img src="https://i.postimg.cc/0ykypt59/gameplayerfullscreen.png" style="width:22px;height:20px;"></div>Javascript
let fse = document.getElementById("fullscreen"); fse.onclick = fullscreen; fse.click() document.onclick = fullscreen;
Hi,
Please explain more what you’re trying to achieve. In any case it appears what the required functionality can be implemented with puzzles, not JavaScript. If you’re trying to run some logic then fullscreen is enabled, just use the init fullscreen on some custom element and disable the standard fullscreen buttons in configure application.I’m trying to make fullscreen immediately reactive to user input after the website icon/button clicks the fullscreen feature
think of it as the Verge3d internal fullscreen feature, where users can immediately interact with scene after fullscreen is activated, but with html, HTML.DOM and javascript instead.
Or like browser games being immediately playable after fullscreen is activated
Then you should delay the game start (e.g. playing animations/music/showing characters) etc till the user clicks on the fullscreen button.
If you’re going to register custom fullscreen handler and don’t want to use Puzzles, do it in runCode() as suggested in the documentation.
The actual code could be as follows:
function runCode(app, puzzles) { const container = document.getElementById('v3d-container'); const fullscreenToggle = document.getElementById('fullscreen-toggle'); fullscreenToggle.addEventListener('click', () => { if (document.fullscreenElement) { document.exitFullscreen(); } else { if (container.requestFullscreen) { container.requestFullscreen(); // start your game here } } }); }function runCode(app, puzzles) { const container = document.getElementById('v3d-container'); const fullscreenToggle = document.getElementById('fullscreen-toggle'); fullscreenToggle.addEventListener('click', () => { if (document.fullscreenElement) { document.exitFullscreen(); } else { if (container.requestFullscreen) { container.requestFullscreen(); // start your game here } } }); }But this code means I can only activate my app when it’s fullscreen? When app is loaded, I’d like to choose between default small screen, or by fullscreen.
How can I modify the above code to do so?
sorry for the noob questions, but
1) as the fullscreen button is in a separate HTML file (in the webpage itself rather than in the verge3d app), I can place
<script src="app.js"></script>under<script></script>in HTML file so my app.js file is readable by my webpage’s HTML and back, right?2) if I connect app.js file to my html file like that, do I still have to upload my verge3d project to my webhost as usual after compressing it into a zip file, then place it in my webpage’s iframe element like this?
<div class="gamescreen"><iframe allow="fullscreen" width="100%" height="100%" controls id="gamescreen" frameborder="0" src="https://sitename/myawesomeapp/myawesomeapp.html"></iframe></div>will the above
<script src="app.js"></script>affect app usage under the above iframe?3) do I have to put the app.js file into the same place with my HTML files, or leave the app.js file in the app folder where it is zipped and uploaded to webhost? If the former, will it affect user usage, since the app.js containing puzzles is gone now?
- You must be logged in to reply to this topic.