The fullscreen API is still in discussion, but the basics are settled. At the time of this writing, it is available in firefox nightly, webkit nightlyand chrome stable. It has been already added in marbleSoccer. The icon is from The Noun Project, a source of nice and clean icons. Try it out! Click on it to toggle fullscreen state. If you dont see the icon, your browser doesn’t yet have the fullscreen API.
Ok now is time for code :)
Let’s get started
As usual, i provide a little helper to make it easier for you to include it in your games. It is called THREEx.FullScreen.js. It hides the prefix of each vendor and the little discrepencies between their API implementation. You download this file from here and include it in your page like this
How to use it ?
The API is simple, only 4 calls. Lets see them one by one. To test if it is possible to have fullscreen on your system, do
To test if fullscreen is currently activated on your page
To Request fullscreen on a given element, just do
If element isnt provided, it defaults to
To cancel fullscreen on your page, use this line.
Quite straight forward, no ? :) As an example, let’s make a toggle, the same used in marbleSoccer.
1 2 3 4 5
What about the standard ?
There is a w3c proposal in dicussion. John dyer has written an in-depth summary. Mozilla provides details on their API. At the time of this writing It is available in firefox nightly, webkit nightly and chrome stable.
For more details on THREEx.FullScreen, see its annoted source. It is a simple to add in your game. It provides a more immersive experience to your players. On a related subject, we will soon likely do a post about embedding your game in another page. It is usefull when you want to include it in a blog, in facebook or other game plateforms.