gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-02 14:59:54 29 4
gpt4 key购买 nike

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

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 中(如果重要的话)。

那么,这有可能吗?

最佳答案

我有一个项目,其中的 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 */        }    }

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

关于three.js - three.js如何进入全屏?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50568474/

29 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com