如何在Three.js中进入全屏模式? [英] How to enter fullscreen in three.js?

问题描述

我已经尝试了数十种不同的方法几个小时，但都无法正常工作，如下所示:

I have tried tens of different methods for hours and NONE works, like the following:

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中.

那么，这有可能吗?

推荐答案

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

I have a project with three.js scene contained in a div and I added a button to stretch it to fullscreen mode (and back). It would be nice if Three.js had a functionality implemented on one function call, but its not too difficult to add it manually.

要考虑的几件事:

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

1. Browser has fullscreen mode (F11 in Chrome), there is an API that can be called from the code to make browser enter full screen, so you can do it on button click. When browser goes full screen tabs and task bar are gone and all screen estate is available for your HTML page.

    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无关.

Three.js scene (renderer, canvas) is inside some div element. It is created as canvas element by three.js lib and appended as a child element with 'appendChild'. Inspect your div element and you will see canvas child there. This div element can have its own width and height, but scene/canvas width and height are set using renderer.setSize function and its independent from 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"功能，该功能可以在调整浏览器窗口大小时更改渲染器的宽度和高度，如果是这种情况，则必须使该功能在全屏模式下正常播放，因为-它会自动调用.因此，使该功能成为您的盟友.

When you tell your browser to go full screen, at the same time you want to set your scene div height and width to full screen size (but most importantly its position to start from 0,0) plus you must set your renderer size to fullscreen height and width. You may want to hide some other div elements on the page, like overlay GUI - so your whole page becomes practically just div with renderer. Chances are, you already have 'onWindowResize' function implemented that changes the renderer width and height when browser window is resized, if this is the case you will have to make this function play nice with fullscreen mode because - it will be called automatically. So make this function your ally.

    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按钮.您可以定义在更改全屏模式时调用的函数，但需要将其添加为事件侦听器.

When user leaves full screen mode you have to revert things back manually. Change the div and renderer size back, show hidden elements, etc. User can leave fullscreen in two ways - by pressing your gui button or esc button. You can define function that is called when fullscreen mode is changed, but you need to add it as event listener.

    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 */
        }
    }

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

This code is not ready to work out of the box because you may have different page setup, but it does list all that you have to think about to make this work.

这篇关于如何在Three.js中进入全屏模式?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！