如何将摄影机视图约束到DIV元素边界



我试图留出一些空间在这个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标记上添加了20px的填充,但末尾添加的video标记完全忽略了该填充。

当稍后添加video元素时,您可以在定义它的代码中查找它到底添加了什么以及如何添加,也可以尝试覆盖它

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

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

最新更新