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

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

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

如何让Three.js全屏显示？ https://stackoverflow.com/questions/10672101/how-to-make-three-js-fullscreen#10672958

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

那么，这有可能吗？

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

需要考虑的几件事：

1. 浏览器具有全屏模式（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%';
       }
     

2. 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 );
     

3. 当您告诉浏览器进入全屏时，同时您希望将场景 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
           }
       }
     

4. 当用户离开全屏模式时，您必须手动恢复。更改 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 */
           }
       }
     

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