三.js dom元素让整个页面变大

Question

我正在尝试使用 three.js 构建一个 3D 查看器，它具有全高，但为侧面板留出了空间。垂直布局按预期工作，但只要我添加渲染的 dom 元素，就会出现一个水平滚动条。

附件是一个最小的工作示例。我希望只看到（黑色）画布元素和红色主体。但是在v.append(renderer.domElement) 之后，页面变大了（填充了蓝色，html 元素）并出现了一个水平滚动条。页面似乎比正文大。

见https://jsfiddle.net/5jnvt4jh。

有人知道，那里可能发生什么吗？我在 Chrome 和 Firefox 中找不到任何边距或填充。谢谢:)。

MWE

<!DOCTYPE html>
<html lang="de">
    <head>
        <meta charset="UTF-8">
        <style>
            html {
                background-color: blue;
            }

            body {
                margin: 0px;
                height: 100vh;
                background-color: red;
            }

            #viewer {
                height: 100%;
                width: 80vw;
                background-color: green;
            }
        </style>

        <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/86/three.min.js"></script>

    </head>
    <body>
        <div id="viewer"></div>
        <script>
            var v = document.getElementById('viewer');
            var renderer = new THREE.WebGLRenderer();
            v.append(renderer.domElement);
            renderer.setSize(v.clientWidth, v.clientHeight);
        </script>

    </body>
</html>

Answer 1

将正文样式更改为：

body {
            margin: 0px;
            height: 100vh;
            background-color: red;
            overflow:hidden;
        }

jsfiddle：https://jsfiddle.net/raushankumar0717/5jnvt4jh/2/