javascript - AR.js:如何在单击按钮时启用/禁用相机并显示/隐藏 AR 内容

Question

在浏览器上演示 AR.js AR 功能的所有示例和代码，在网页加载后立即运行。但是，我想为用户提供一个选项，以手动启动和停止扫描过程以及隐藏 AR 内容。

基本上，我只想在用户单击网页上的按钮时加载 a-frame、AR.js 脚本和其他 a-frame html 元素。

如果 AR.js 中有任何参数可以传递来表示用户启动相机/扫描/显示我们的内容的意图，请告诉我。

---

脚本版本:
A 帧版本:0.7.1(日期 18-10-2017，提交 #b9a751e)
三版本:^0.87.0
WebVR Polyfill 版本:^0.9.36

---

Answer 1

自 ar.js将相机提要附加到 body元素，很难将其包含在典型网站的容器中。我建议:

1) 有一个 ar外景内景.html文件，所以你可以把它放在 <i-frame> 中
2) 单击按钮(或任何其他事件)时创建 iframe，并将其放置在您的网站上:

function addScene() {
  var scene = document.createElement("i-frame")
  scene.setAttribute("src", "ar.html")
  scene.setAttribute("height", "300")
  scene.setAttribute("width", "300")
  document.querySelector("#somecontainer").appendChild(scene)
}

查看此 glitch .