Need Help with Full Screen Functionality in Three.js

Questions
1

Hello everyone,

I’ve been working on a project using the Three.js library where I’ve implemented a map with a full screen functionality. For simplicity’s sake, I’ve added a UI button that toggles this full screen mode.

The canvas has a set height of 1000px, but when moving to the full screen mode, I want the canvas to utilize all available screen space. However, I’m encountering an issue where the canvas height isn’t updating correctly in full screen mode.

Here’s what I’ve tried so far:

  1. I’ve tried adjusting the renderer size, but the canvas still doesn’t update its height.
  2. I’ve attempted to modify the camera aspect ratio and update the projection matrix.
  3. I’ve attempted to directly alter the canvas element height.

Unfortunately, none of the above methods have been successful. The canvas height remains unchanged when I switch to full screen mode.

I’m not sure what I’m missing here. Has anyone encountered a similar issue or does anyone have suggestions on what else I could try? Any help would be greatly appreciated!

Best,
Nil

Some code snippets for context:

Code to enter fullScreen mode:

if (mapCanvas.requestFullscreen) {
    mapCanvas.requestFullscreen();
    mapCanvas.style.backgroundColor = "white";
    mapCanvas.style.width = '100%';
    mapCanvas.style.height = '100%';
} else if (canvas.mozRequestFullScreen) {
    canvas.mozRequestFullScreen();
} else if (canvas.webkitRequestFullscreen) {
    canvas.webkitRequestFullscreen();
} else if (canvas.msRequestFullscreen) {
  canvas.msRequestFullscreen();
}

Other code we use for adjusting canvas size:

window.camera.aspect = canvasContainer.clientWidth / canvasContainer.clientHeight;
window.camera.updateProjectionMatrix();
window.renderer.setPixelRatio(window.devicePixelRatio);
window.renderer.setSize(canvasContainer.clientWidth, canvasContainer.clientHeight);
2

A codepen would be helpful.

Looking at your code, all I can tell is that your logic to change the canvas size is only going to fire in your first if statement. Have you checked which one is running?

I would try making the size changes not directly after requestFullScreen, but instead use a window resize listener or a ResizeObserver on the canvas, so you only resize it once the window dimensions have changed.

Why are you fixing your canvas height at 1000px? In the vast majority of cases, if you want full screen visuals, your canvas should use the same dimensions as the window.

3

Hi Arthur,

Yes, the first if statement is being hit using Chrome. We should indeed add the same code for the rest of clauses.

Will look into the suggestion of the window resize listener, seems like an approach that could work.

And we are fixing the height of the canvas for previous requirements. We have already tried removing this fixed height to a dynamic one, but when we enter full screen it still doesn’t seem to respond appropriately.

I have noticed that when we use this other code to adjust the canvas size, the width is adjusted properly, but height stays mainly the same. Is there any reason for that? This is referring to the second code snippet, it should be updating width and height regardless, right?

4

Here is a quick editable example that shows how to make Three.js go fullscreen.

It works in the browsers that I tested. Recent versions of Chrome, Firefox and Edge.

1 Like
5

Not sure about the height adjustment, a live example would be easier to understand.

I would suggest figuring out how to make the canvas height dynamic first, if you start with a fixed height of 1000px regardless of browser size whatever you build on top of that is going to be a hack and introduce further issues down the line.

I think it’s quite likely you have other bits of code interfering with your logic, I would recommend trying to setup a very basic scene that goes fullscreen. When you get that working, you can more easily figure out what are the differences with the current state of your project. Sean’s example above works fine for me, maybe use that as a starting point and track down any CSS / JS in your project that’s affecting the canvas. Disable everything, get the full screen working, then start reintroducing thing sone by one so you can pinpoint why your resizing has issues.