Three.js 全屏问题

Posted 2023-02-27

【中文标题】Three.js 全屏问题

【英文标题】：Three.js Full Screen Issue

【发布时间】：2012-05-12 14:38:09

【问题描述】：

我已经阅读了 Three.js API，阅读了 *** 上的问题，我已经使用 firebug 和 chrome 的调试器调试了代码，我已经尽可能地删除了所有内容，但我仍然觉得这很烦人全屏错误，渲染器视口大于我的屏幕，从而导致出现滚动条。这是一个不影响渲染或其他操作的可见错误，我只是试图控制视口的大小，使其与可用的屏幕空间相匹配，而不会出现滚动条。

我在 Windows 7 上使用 Google Chrome 18，并且刚刚开始使用 Three.js API，但我过去使用过诸如 OpenGL 之类的东西，因此图形 API 并不陌生。

当我尝试运行此代码时（这是 github 主页上显示的默认示例）：

var camera, scene, renderer,
geometry, material, mesh;

init();
animate();

function init() 

    scene = new THREE.Scene();

    camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 10000 );
    camera.position.z = 1000;
    scene.add( camera );

    geometry = new THREE.CubeGeometry( 200, 200, 200 );
    material = new THREE.MeshBasicMaterial(  color: 0xff0000, wireframe: true  );

    mesh = new THREE.Mesh( geometry, material );
    scene.add( mesh );

    renderer = new THREE.CanvasRenderer();
    renderer.setSize( window.innerWidth, window.innerHeight );

    document.body.appendChild( renderer.domElement );



function animate() 

    // note: three.js includes requestAnimationFrame shim
    requestAnimationFrame( animate );
    render();



function render() 

    mesh.rotation.x += 0.01;
    mesh.rotation.y += 0.02;

    renderer.render( scene, camera );

它渲染得很好，我看到红色的线框框在旋转，但我注意到渲染器视口太大，大于我的可用屏幕尺寸，导致出现滚动条。该代码使用window.innerWidth 和window.innerHeight 设置渲染器的纵横比和宽度/高度，但似乎它在某处拾取了20到30个额外像素并将它们添加到页面的底部和右侧?

我尝试调整 body 元素的 CSS 以删除边距和填充，对于创建的画布元素也是如此，但没有。我已经将屏幕大小回显到页面，并使用 javascript alert() 函数来检查窗口的宽度和高度，然后观察它们在运行时操作期间传递给 Three.js API，但错误仍然存​​在：画布渲染对象正在调整自身大小，使其略大于屏幕大小。我最接近解决问题的是做这样的事情：

var val = 7;
//Trims the window size by val
function get_width()return window.innerWidth - val;
function get_height()return window.innerHeight - val;

//... Code omitted for brevity

camera = new THREE.PerspectiveCamera( 75, get_width() / get_height(), 1, 10000 );

//... Code omitted for brevity 

render.setSize(get_width(), get_height());

它可以使渲染器大小在窗口边界内，但仅限于一个点。如果我将val 降低到小于 7，例如6 或更小，渲染器大小弹出并再次比屏幕大 20 像素（大约），导致滚动条出现？

有什么想法或想法吗？

【参考方案1】：

只需在 CSS 中的画布元素上设置 display: block;

<canvas> 元素来自 Mozilla 开发者网络官方 a block-level element。内联元素和块元素之间的东西。他们写道：

浏览器通常会在元素之前和之后使用换行符显示块级元素。

但元素的呈现可能因浏览器而异，因此为确保您获得正确的行为，最好在 CSS 中明确设置 display: inline; 或 display: block;。

所以只需在你的 CSS 文件中将其显示值设置为 block，即可解决问题。

canvas 
    display: block; /* fix necessary to remove space at bottom of canvas */

【讨论】：

这应该是公认的答案 - 隐藏溢出只会掩盖问题，但这可以解决问题。非常感谢！

我同意ultrafez，而且，通过在窗口上点击拖动鼠标，即使滚动条被隐藏，内容仍然在滚动！...

由于 4 年后我仍然在这个问题上受到打击，我已经根据 ultrafez 的建议接受了这个答案，并且社区对此答案表示赞同，感谢@Wilt 提供更新答案！

【参考方案2】：

我。视口尺寸精度

我建议使用 Tyson Matanich 的 viewportSize.js，因为 'window.innerWidth' 和 'window.innerHeight' 并不总是准确的。

下载：https://github.com/tysonmatanich/viewportSize

演示：http://tysonmatanich.github.com/viewportSize/

这是作者的详细解释：

“大多数人依赖 window.innerWidth、document.documentElement.clientWidth 或 $(window).width()，它们并不总是准确地报告 CSS 媒体查询中使用的视口宽度。例如，WebKit 浏览器会更改大小滚动条可见时的 CSS 视口，而大多数其他浏览器不可见。由于无论滚动条状态如何，window.innerWidth 都保持不变，因此它不是与 Chrome 或 Safari 一起使用的好选择。此外，Internet Explorer 6、7 , 和 8 不支持 window.innerWidth。另一方面，document.documentElement.clientWidth 会根据滚动条状态而变化，因此对于 Internet Explorer、Firefox 或 Opera 来说不是一个好的选择。”

例子：

var viewportWidth  = viewportSize.getWidth(),
    viewportHeight = viewportSize.getHeight(),
    viewportAspect = viewportWidth / viewportHeight;

camera = new THREE.PerspectiveCamera( 75, viewportAspect, 1, 10000 );

二。难以捉摸的元素

注意任何以编程方式创建的元素（通过“createElement”）。他们很容易错过。

使用 Chrome 的检查器或 Firebug 查看是否还有其他您可能遗漏的元素。我经常看到一些我完全忘记的东西，深深地埋在上周的代码中，想知道我以前是怎么错过的。

三。硬重置

最后，为了彻底，您可以尝试硬重置。 Eric Meyer 的经典重置通常被认为是最彻底的 (http://meyerweb.com/eric/tools/css/reset/index.html)，但我个人更喜欢“Condensed Meyer Reset”（去年某个时候出现在网络上，作者不详）：

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, 
pre, form, fieldset, input, textarea, p, blockquote, th, td  
    padding: 0;
    margin: 0;
    
fieldset, img  
    border: 0;
    
table 
    border-collapse: collapse;
    border-spacing: 0;
    
ol, ul 
    list-style: none;
    
address, caption, cite, code, dfn, em, strong, th, var 
    font-weight: normal;
    font-style: normal;
    
caption, th 
    text-align: left;
    
h1, h2, h3, h4, h5, h6 
    font-weight: normal;
    font-size: 100%;
    
q:before, q:after 
    content: '';
    
abbr, acronym  
    border: 0;
    

【参考方案3】：

在 css 中这也应该可以解决问题：

canvas 
    vertical-align: top;

当然也需要上面的填充、边距修复

【参考方案4】：

这对我来说已解决的问题。它总是会让画布全屏显示。

canvas 
    width: 100vw;
    height: 100vh;
    display: block;