Javascript Three.js全屏版

我已经通读了Three.js API，通读了StackOverflow上的问题，我使用firebug和chrome的调试器调试了代码，我已经尽了全力，但是我仍然遇到了这个恼人的全屏错误，渲染器视图端口比我的屏幕大，从而导致出现滚动条。这是一个可见的错误，不会影响渲染或其他操作，我只是试图控制视图端口的大小，使其与可用的屏幕属性匹配，而不会出现滚动条

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

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

它渲染得很好，我看到红色的线框框在旋转，但我注意到渲染器视图端口太大，它比我可用的屏幕大小大，这导致出现滚动条。代码使用

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（约），从而导致滚动条出现

有什么想法吗？

I.视口大小的准确性 我建议使用Tyson Matanich的viewportSize.js，因为“window.innerWidth”和“window.innerHeight”并不总是准确的

下载：

演示：

以下是作者的详细解释：

大多数人依赖window.innerWidth、document.documentElement.clientWidth或$（window.width（））它并不总是准确地报告CSS媒体查询中使用的视口宽度。例如，当滚动条可见时，WebKit浏览器会更改其CSS视口的大小，而大多数其他浏览器则不会。由于window.innerWidth保持不变，无论滚动条状态如何，它都不是与Chrome或Safari一起使用的好选项。a另外，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的inspector或Firebug来查看是否有其他您可能遗漏的元素。我经常看到一些我已经完全忘记的东西，深深地埋藏在上周的代码中，我想知道我以前怎么会错过它

三、 硬复位 最后，为了更彻底，您可以尝试硬重置。Eric Meyer的经典重置通常被认为是最彻底的（），但我个人更喜欢“浓缩的Meyer重置”（去年某个时候出现在网上，作者不详）：

简单设置显示：块；CSS中的画布元素

元素是根据mozilla开发者网络官方发布的。介于内联元素和块元素之间的东西。他们写道：

浏览器通常在块级元素前后都显示一条换行符

但是元素的呈现在不同的浏览器中可能会有所不同，因此为了确保获得正确的行为，最好显式设置

display:inline或<代码>显示：块在CSS中

因此，只需将CSS文件中的显示值设置为block，即可解决此问题

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

在css中，这也应该做到：

canvas {
    vertical-align: top;
}

当然，我也需要从上面的填充、边距修复这个问题。它总是将画布保持在全屏状态

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

这应该是公认的答案——隐藏溢出只是掩盖了问题，但这可以解决问题。非常感谢！我同意ultrafez，而且，通过在窗口上单击并拖动鼠标，即使滚动条被隐藏，内容仍在滚动！。。。4年后，我在这个问题上仍然很受欢迎，我根据ultrafez的建议接受了这个答案，社区对这个答案进行了投票，谢谢@Wilt提供了更新的答案！
canvas {
    vertical-align: top;
}

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