three.js如何进入全屏？

Question

我已经尝试了数十种不同的方法几个小时并且 NONE 有效，如下所示：

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

How to make Three.js fullscreen?

首先，THREEx 不是 THREE.js。我不想要任何人的扩展（甚至没有完全写清楚）
单词 "fullscreen" 在 three.js 个文件中根本不存在。
没有 three.js 书籍提到如何进入全屏。
在我的例子中，所有的 js 和 webgl 代码都驻留在一个 JS 文件中，如果重要的话，不在 HTML 中。

那么，这可能吗？

Answer 1

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

简而言之，答案是：

set display: block; on canvas element in your CSS

Answer 2

我有一个项目，three.js 场景包含在 div 中，我添加了一个按钮以将其拉伸到全屏模式（并返回）。如果 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 场景（渲染器，canvas）在某个 div 元素内。它由 three.js 库创建为 canvas 元素，并作为带有 'appendChild' 的子元素附加。检查您的 div 元素，您会在那里看到 canvas 子元素。这个 div 元素可以有自己的宽度和高度，但是 scene/canvas 宽度和高度是使用 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 调整大小时，它会改变渲染器的宽度和高度，如果是这种情况，你将不得不让这个函数在全屏模式下运行良好，因为 - 它会被自动调用。所以让这个功能成为你的盟友吧。
```
    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 */
        }
    }

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

three.js如何进入全屏？

How to enter fullscreen in three.js?

three.js

fullscreen