我已经尝试了数小时的数十种不同的方法，但都没有奏效，如下所示：
document.body.addEventListener("keydown", function() {
THREEx.FullScreen.request();
}, false);
How to make Three.js fullscreen?
那么，这可能吗？
【问题讨论】：
标签： three.js fullscreen
我有一个项目，其中包含三个.js 场景，包含在一个 div 中，我添加了一个按钮以将其拉伸到全屏模式（并返回）。如果 Three.js 在一个函数调用上实现一个功能就好了，但是手动添加也不是很困难。
需要考虑的几件事：
浏览器具有全屏模式（Chrome 中的 F11），有一个 API 可以从代码中调用以使浏览器进入全屏，因此您可以通过单击按钮来实现。当浏览器进入全屏状态时，选项卡和任务栏都消失了，所有屏幕区域都可用于您的 HTML 页面。
功能打开全屏（）{ 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%'; }Three.js 场景（渲染器、画布）位于某个 div 元素中。它由three.js lib创建为canvas元素，并作为带有'appendChild'的子元素附加。检查您的 div 元素，您将在那里看到画布子元素。这个 div 元素可以有自己的宽度和高度，但场景/画布的宽度和高度是使用 renderer.setSize 函数设置的，它独立于 div。
renderer = new THREE.WebGLRenderer( { antialias: true } ); 渲染器.setSize（场景宽度，场景高度）； var threeJSCanvas = document.getElementById("id-webglcanvas"); 三JSCanvas.appendChild(renderer.domElement);当您告诉浏览器全屏时，同时您希望将场景 div 的高度和宽度设置为全屏尺寸（但最重要的是它的位置从 0,0 开始），另外您必须设置渲染器大小到全屏高度和宽度。您可能希望隐藏页面上的其他一些 div 元素，例如覆盖 GUI - 这样您的整个页面实际上就变成了带有渲染器的 div。很有可能，您已经实现了 'onWindowResize' 函数，该函数在调整浏览器窗口大小时更改渲染器的宽度和高度，如果是这种情况，您将不得不让这个函数在全屏模式下运行良好，因为 - 它会被自动调用。所以让这个函数成为你的盟友。
window.addEventListener('resize', onWindowResize, false); 函数 onWindowResize() { if (myGlobalFullscreenModeVariable) { var elem = document.getElementById("id-webglcanvas"); var sceneWidth = window.innerWidth; var sceneHeight = elem.offsetHeight; camera.aspect = 场景宽度/场景高度； camera.updateProjectionMatrix(); renderer.setSize(sceneWidth,sceneHeight); } 别的 { // 我的其他调整大小代码 } }当用户离开全屏模式时，您必须手动恢复。更改 div 和渲染器大小，显示隐藏元素等。用户可以通过两种方式离开全屏 - 通过按 gui 按钮或 esc 按钮。您可以定义更改全屏模式时调用的函数，但您需要将其添加为事件侦听器。
如果（document.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 !== undefined) { /* 进入 fs 模式时运行代码 */ } 别的 { /* 从 fs 模式返回时运行代码 */ } }此代码尚未准备好开箱即用，因为您可能有不同的页面设置，但它确实列出了您必须考虑的所有内容。
【讨论】：
【讨论】：