Question

我已经阅读了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.innerWidth和window.innerHeight来设置渲染器的宽高比和宽度/高度，但似乎它在某处拾取了20到30个额外像素，并将它们添加到底部和页右边？

我已经尝试调整body元素的CSS以删除边距和填充，对于创建的canvas元素也是如此，但没有。我已经回显了页面的屏幕大小，并使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 px（大约），导致滚动条出现？

有什么想法或想法吗？

Answer 1

只需在CSS

中的canvas元素上设置 display：block; 即可

<canvas>元素根据mozilla开发者网络正式 a block-level element 。内联元素和块元素之间的东西。他们写道：

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

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

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

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

Answer 2

删除CSS正文边距并隐藏溢出：

body{
  margin: 0px;
  overflow: hidden;
}

Answer 3

予。视口大小准确度

我建议使用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 );

II。难以捉摸的元素

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

使用Chrome的检查器或Firebug查看是否还有其他可能遗漏的元素。我常常看到一些我完全忘记的东西，埋藏在上周的代码深处，并想知道我之前是如何错过它的。

III。硬重置

最后，要彻底，您可以尝试硬重置。 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;
    }

Answer 4

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

canvas {
    vertical-align: top;
}

当然还需要从上面填充，边距修复

Answer 5

这对我来说是一个固定的问题。它总是将画布保持在全屏幕上。

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

Three.js全屏问题

5 个答案:

只需在CSS

予。视口大小准确度

II。难以捉摸的元素

III。硬重置