27

我已经阅读了 Three.js API，阅读了 StackOverflow 上的问题，我已经使用 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.innerWidthandwindow.innerHeight来设置渲染器的纵横比和宽度/高度，但似乎它在某处拾取了 20 到 30 个额外像素并将它们添加到页面的底部和右侧？

我尝试调整 body 元素的 CSS 以删除边距和填充，对于创建的画布元素也是如此，但没有。我已经将屏幕大小回显到页面，并制作了 JavaScriptalert()函数来检查窗口宽度和高度，然后观察它们在运行时操作期间传递给 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());

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

有什么想法或想法吗？

4

4 回答 4

61

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

该<canvas>元素是根据 Mozilla 开发者网络官方的一个块级元素。内联元素和块元素之间的东西。他们写：

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

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

所以只需在你的 CSS 文件中设置它的显示值来阻止，来解决这个问题。

canvas {
    display: block; /* fix necessary to remove space at bottom of canvas */
}
于 2013-03-26T09:30:50.730 回答
1

一、视口尺寸精度

我推荐使用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;
    }
于 2013-03-24T03:14:28.680 回答
0

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

canvas {
    vertical-align: top;
}

自然也需要从上面的填充，边距修复

于 2014-02-15T14:24:46.587 回答
0

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

canvas {
    width: 100vw;
    height: 100vh;
    display: block;
  }
于 2017-12-14T14:03:58.180 回答