Three.js全屏问题 [英] Three.js Full Screen Issue

问题描述

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

I've read through the Three.js API, read through the questions here on StackOverflow, I've debugged the code using firebug and chrome's debugger, I've stripped out everything I can, but I am still getting this irritating full screen error, where the renderer view port is larger than my screen thus causing scroll bars to appear. It's a visible error that does not affect rendering, or other operations, I am just trying to control the size of the view port so that it matches available screen real estate without scroll bars appearing.

我在Windows 7上使用谷歌浏览器18，我刚刚开始使用Three.js API，但我过去使用过像OpenGL这样的东西，所以图形API并不陌生。

I am using Google Chrome 18 on Windows 7 and I am just starting to work with the Three.js API, but I have used things like OpenGL in the past so graphics API are not unfamiliar.

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

When I try and run this code (which is the default example shown on the github main page):

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个额外的像素并将它们添加到页面的底部和右侧？

It renders fine, I see the red wire frame box rotating around, but I've noticed that the renderer view port is too big, it is larger than my available screen size, which causes scroll bars to appear. The code uses window.innerWidth and window.innerHeight to set the aspect ratio and the width/height for the renderer, but it seems as if it picks up 20 to 30 extra pixels somewhere and adds them to the bottom and the right of the page?

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

I've tried adjusting the CSS for the body element to remove margin and padding, same for the canvas element that gets created, but nothing. I've echoed the screen size to the page, and made JavaScript alert() functions to check the window width and height, and then watch as they get passed to the Three.js API during runtime operations, but the error remains: the canvas rendering object is resizing itself to slightly larger than the screen size. The closest I get to correcting the problem is doing something like this:

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 px（大约），导致滚动条出现？

It works to bring the renderer size within the boundaries of the window, but only to a point. If I lower val to less than 7, e.g. 6 or less, the renderer size pops back out and is again larger by 20 px (approx), than the screen, causing the scroll bars to appear?

任何想法或想法？

推荐答案

只需设置在CSS中的canvas元素上显示：block;

< canvas> 元素是根据的正式访问mozilla开发者网络 块级元素 。内联元素和块元素之间的东西。他们写道：

Simply set display: block; on canvas element in your CSS

The <canvas> element is according to the mozilla developers network officially a block-level element. Something in between a inline element and a block element. They write:

浏览器通常在元素之前和之后显示带有换行符的块级元素。

Browsers typically display the block-level element with a newline both before and after the element.

但是不同浏览器的元素渲染可能会有所不同，所以为了确保获得正确的行为，最好明确设置 display：inline ; 或在CSS中显示：阻止; 。

But rendering of the element can vary across browsers, so to be sure you get the correct behavior it is best to explicitly set display: inline; or display: block; in your CSS.

所以只需设置其显示要阻止的CSS文件中的值，以解决问题。

So just set its display value in your CSS file to block, to solve the issue.

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

这篇关于Three.js全屏问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！