如何在 Three.js 中进入全屏？

Question

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

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

如何让Three.js全屏显示？

1. 首先，THREEx 不是 THREE.js。我不想要某人的扩展（甚至没有完整地编写和澄清）
2. Three.js 文件中根本不存在“全屏”一词。
3. 也没有 Three.js 书籍提到如何进入全屏。
4. 就我而言，所有 js 和 webgl 代码都驻留在 JS 文件中，而不是 HTML（如果重要的话）。

那么，这有可能吗？

Answer 1

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

需要考虑的几件事：

1. 浏览器具有全屏模式（Chrome 中的 F11），可以从代码中调用一个 API 来使浏览器进入全屏，因此您可以通过单击按钮来完成。当浏览器进入全屏状态时，选项卡和任务栏都会消失，所有屏幕空间都可用于您的 HTML 页面。

       函数 openFullscreen() {
         var elem = document.getElementById("id-webglcanvas");
         如果（elem.requestFullscreen）{
           elem.requestFullscreen();
         } else if (elem.mozRequestFullScreen) { /* 火狐 */
           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%';
       }
   

2. Three.js 场景（渲染器、画布）位于某个 div 元素内。它由 Three.js lib 创建为 canvas 元素，并通过“appendChild”附加为子元素。检查您的 div 元素，您将在那里看到 canvas 子元素。这个div元素可以有自己的宽度和高度，但是场景/画布的宽度和高度是使用renderer.setSize函数设置的，并且它独立于div。

       渲染器 = new THREE.WebGLRenderer( { 抗锯齿: true } );
       renderer.setSize(sceneWidth, sceneHeight);
       var ThreeJSCanvas = document.getElementById("id-webglcanvas");
       ThreeJSCanvas.appendChild( renderer.domElement );
   

3. 当您告诉浏览器进入全屏时，同时您希望将场景 div 高度和宽度设置为全屏大小（但最重要的是其位置从 0,0 开始），并且必须将渲染器大小设置为全屏高度和宽度。您可能想隐藏页面上的一些其他 div 元素，例如覆盖 GUI - 这样您的整个页面实际上就变成了带有渲染器的 div。有可能，您已经实现了“onWindowResize”函数，该函数可以在调整浏览器窗口大小时更改渲染器的宽度和高度，如果是这种情况，您将必须使该函数在全屏模式下运行良好，因为 - 它将被自动调用。所以让这个函数成为你的盟友。

       window.addEventListener( '调整大小', onWindowResize, false );
       函数 onWindowResize() {
           如果（myGlobalFullscreenModeVariable）{
               var elem = document.getElementById("id-webglcanvas");
               var sceneWidth = window.innerWidth;
               var sceneHeight = elem.offsetHeight;
               相机.aspect = 场景宽度 / 场景高度;
               相机.updateProjectionMatrix();
               renderer.setSize( 场景宽度, 场景高度 );
           } 别的 {
               // 我的其他调整大小代码
           }
       }
   

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

       if (文档.addEventListener)
       {
           document.addEventListener('webkitfullscreenchange', fsChangeHandler, false);
           document.addEventListener('mozfullscreenchange', fsChangeHandler, false);
           document.addEventListener('fullscreenchange', fsChangeHandler, false);
           document.addEventListener('MSFullscreenChange', fsChangeHandler, false);
       }
       函数 fsChangeHandler()
       {
           if (document.webkitIsFullScreen || document.mozFullScreen || document.msFullscreenElement !== 未定义) {
               /* 进入 fs 模式时运行代码 */
           } 别的 {
               /* 从 fs 模式返回时运行代码 */
           }
       }
   

此代码尚未准备好开箱即用，因为您可能有不同的页面设置，但它确实列出了您必须考虑的所有内容才能正常工作。