Question

我已经尝试了数十种不同的方法几个小时，没有工作，如下所示：

document.body.addEventListener("keydown", function() {
  THREEx.FullScreen.request();
}, false);

How to make Three.js fullscreen?

首先，THREEx不是THREE.js。我不想要某人的延期（甚至没有完全写出来并澄清）
三个.js文件中根本不存在“全屏”一词。
没有three.js书籍提到如何全屏。
就我而言，所有js和webgl代码都驻留在JS文件中，如果重要的话，则不在HTML中。

那么，这有可能吗？

Answer 1

我在一个div中包含一个包含three.js场景的项目，并添加了一个按钮以将其拉伸到全屏模式（并返回）。如果Three.js具有在一个函数调用上实现的功能会很好，但是手动添加它并不难。

要考虑的几件事：

浏览器具有全屏模式（Chrome中为F11），可以从代码中调用一个API，以使浏览器进入全屏状态，因此可以在单击按钮时执行。当浏览器进入全屏模式时，选项卡和任务栏都消失了，并且所有页面内容都可用于HTML页面。

    function openFullscreen() {
      var elem = document.getElementById("id-webglcanvas");
      if (elem.requestFullscreen) {
        elem.requestFullscreen();
      } else if (elem.mozRequestFullScreen) { /* Firefox */
        elem.mozRequestFullScreen();
      } else if (elem.webkitRequestFullscreen) { /* Chrome, Safari & Opera */
        elem.webkitRequestFullscreen();
      } else if (elem.msRequestFullscreen) { /* IE/Edge */
        elem.msRequestFullscreen();
      }
      elem.style.width = '100%';
      elem.style.height = '100%';
    }

Three.js场景（渲染器，画布）位于某些div元素内。它由three.js lib创建为canvas元素，并附加为带有'appendChild'的子元素。检查您的div元素，您将在那里看到canvas子级。该div元素可以具有自己的宽度和高度，但是场景/画布的宽度和高度是使用renderer.setSize函数设置的，并且与div无关。
```
    renderer = new THREE.WebGLRenderer( { antialias: true } );
    renderer.setSize(sceneWidth, sceneHeight);
    var threeJSCanvas = document.getElementById("id-webglcanvas");
    threeJSCanvas.appendChild( renderer.domElement );
```
当您告诉浏览器进入全屏模式时，同时您要将场景div的高度和宽度设置为全屏尺寸（但最重要的是，其位置应从0,0开始），并且必须将渲染器大小设置为全屏高度和宽度。您可能希望在页面上隐藏其他一些div元素，例如覆盖GUI-因此您的整个页面实际上只是带有渲染器的div。很有可能，您已经实现了“ onWindowResize”功能，该功能可以在调整浏览器窗口大小时更改渲染器的宽度和高度，如果是这种情况，则必须使该功能在全屏模式下正常播放，因为-它会自动调用。因此，使此功能成为您的盟友。
```
    window.addEventListener( 'resize', onWindowResize, false );
    function onWindowResize() {
        if ( myGlobalFullscreenModeVariable) {
            var elem = document.getElementById("id-webglcanvas");
            var sceneWidth = window.innerWidth;
            var sceneHeight = elem.offsetHeight;
            camera.aspect = sceneWidth / sceneHeight;
            camera.updateProjectionMatrix();
            renderer.setSize( sceneWidth, sceneHeight );
        } else {
            // my other resize code
        }
    }
```

当用户离开全屏模式时，您必须手动还原内容。更改div和渲染器的大小，显示隐藏的元素等。用户可以通过两种方式离开全屏模式-通过按下gui按钮或esc按钮。您可以定义在更改全屏模式时调用的函数，但需要将其添加为事件侦听器。

    if (document.addEventListener)
    {
        document.addEventListener('webkitfullscreenchange', fsChangeHandler, false);
        document.addEventListener('mozfullscreenchange', fsChangeHandler, false);
        document.addEventListener('fullscreenchange', fsChangeHandler, false);
        document.addEventListener('MSFullscreenChange', fsChangeHandler, false);
    }
    function fsChangeHandler()
    {
        if (document.webkitIsFullScreen || document.mozFullScreen || document.msFullscreenElement !== undefined) {
            /* Run code when going to fs mode */
        } else {
            /* Run code when going back from fs mode */
        }
    }

此代码尚未准备好立即可用，因为您可能具有不同的页面设置，但它确实列出了您需要考虑的所有内容。

Answer 2

也许这个帖子的答案会有所帮助： Three.js Full Screen Issue

简而言之，答案是：

设置display：block; CSS中的canvas元素

如何在three.js中输入全屏？

2 个答案: