如何将相机视图约束到 DIV 元素边界答案

【问题标题】：How to constrain camera view to DIV element boundaries如何将相机视图约束到 DIV 元素边界
【发布时间】：2019-05-04 08:07:11
【问题描述】：

我正在尝试留出一些空间来在此 AR 网站上添加导航菜单，但无法覆盖 AR.JS 默认的全屏摄像头视图。我的代码几乎与 Jerome 的原始代码类似：

<body style='margin : 0px; overflow: hidden; font-family: Monospace; padding: 20px;'>

    <div id="camera"></div>
<scrpit>
.
.
document.getElementById('camera').appendChild( renderer.domElement );
.
.
</script>
</body>

请注意，我在 body 标记上添加了 20 像素的填充，但最后添加的 video 标记完全忽略了该填充。

【问题讨论】：

标签： javascript html three.js ar.js

【解决方案1】：

由于稍后添加了video 元素，您可以查找定义它的代码，它究竟添加了什么以及如何添加，或者您可以尝试覆盖它。这应该可以在左侧获得 20px 的边距：

video {
    margin-left: 20px !important;
}

但要确保实际视频和 AR.js 场景不会受到负面影响。

【讨论】：