Question

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

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

有人有想法吗，那里可能会发生什么？我无法通过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/

three.js dom元素使整个页面变得更大

MWE

1 个答案: