three.js - three.js如何进入全屏？

Question

几个小时以来，我尝试了数十种不同的方法，但都没有效果，如下所示:

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

How to make Three.js fullscreen?

1. 首先，THREEx 不是 THREE.js。我不想要任何人的延期(甚至没有完全写清楚)
2. three.js 文件中根本不存在“全屏”一词。
3. 也没有三本 .js 书籍提到如何进入全屏。
4. 在我的例子中，所有的 js 和 webgl 代码都驻留在一个 JS 文件中，而不是在 HTML 中(如果重要的话)。

那么，这有可能吗？

Answer 1

我有一个项目，其中的 three.js 场景包含在一个 div 中，我添加了一个按钮以将其拉伸(stretch)到全屏模式(并返回)。如果 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 场景(渲染器、 Canvas )位于某个 div 元素内。它由 three.js lib 创建为 canvas 元素，并附加为带有“appendChild”的子元素。检查您的 div 元素，您会在那里看到 canvas 子项。这个 div 元素可以有自己的宽度和高度，但是场景/ Canvas 的宽度和高度是使用 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 */
           }
       }
   

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