Three.js 全屏问题

2022-01-17 00:00:00 fullscreen javascript html html5-canvas three.js

我已经阅读了 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 上使用 Google Chrome 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?

我尝试调整 body 元素的 CSS 以删除边距和填充，对于创建的画布元素也是如此，但没有.我已经将屏幕大小回显到页面，并使用 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 中的画布元素上设置 display: 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; 或 display: block; 在你的 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 文件中将其显示值设置为 block，即可解决问题.

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

相关文章