Javascript threejs：如何设置渲染器大小以适应屏幕？

使用下面的代码时，我遇到了一些问题：

        //WebGL renderer
        renderer = new THREE.WebGLRenderer();
        renderer.setSize(window.innerWidth, window.innerHeight); //TODO: set optimal size   
        document.body.appendChild(renderer.domElement);

左上角-一些薄的白色边框：

右下角-滚动元素（看起来像

window.innerWidth，window.innerHeight

比初始视图大）：

---

如何获得渲染器的w和h。设置大小以适应窗口内的所有可见区域？或者这个问题应该用另一种方式解决？

左上方的空白是因为我认为主体默认有一个边距。
滚动条是因为由于我不知道的原因，canvas元素的行为就好像它是一个内联元素一样

这个css应该修复它：

body {
  margin: 0px;
  overflow: hidden;
}
canvas {
  display: block;
}

---

顶部和左侧的空白是因为我认为主体默认有边距。
滚动条是因为由于我不知道的原因，canvas元素的行为就好像它是一个内联元素一样

这个css应该修复它：

body {
  margin: 0px;
  overflow: hidden;
}
canvas {
  display: block;
}

---

我假设您希望渲染器是全屏的，而页面上没有其他内容。如果是这样的话，您所需要的就是

上的

溢出：隐藏
。如果您想要垂直滚动，请使用
overflow-x:hidden。您使用的
窗口是正确的。innerWidth
，因为在没有永久滚动条的设备上，如果您尝试在传统桌面（
17px
）上考虑滚动条的宽度，您的渲染器将更窄。我假设您希望您的渲染器是全屏的，并且页面上没有任何其他内容。如果是这样的话，您所需要的就是
上的
溢出：隐藏
。如果您想要垂直滚动，请使用
overflow-x:hidden。您使用的
窗口是正确的。innerWidth
，因为在没有永久滚动条的设备上，如果您尝试在传统桌面（
17px
）上考虑滚动条的宽度，则渲染器的宽度会更窄。它可以工作。看起来
body{margin:0px；overflow:hidden；}
就足够了，是否需要
canvas{display:block；}
呢？我认为body-overflow-hidden和canvas-display-block是可以互换的，你可以使用其中一个。它很有效。看起来
body{margin:0px；overflow:hidden；}
足够了，是否需要
canvas{display:block；}
呢？我认为body-overflow-hidden和canvas-display-block是可以互换的，您可以使用其中一个。