带有角度 6 的 Aframe ar.js 画布上下文

【问题标题】：Aframe ar.js canvas Context with angular 6带有角度 6 的 Aframe ar.js 画布上下文
【发布时间】：2018-10-25 19:41:28
【问题描述】：

现在有人知道如何获取 a-frame aer.js 画布的上下文了吗？在谷歌浏览器的开发模式下，我可以看到一个画布类，但没有 id 可以通过 id 获取上下文。

<canvas class="a-canvas" data-aframe-canvas="true" width="1920" height="1440" style="width: 1536px; height: 1152px;"></canvas>

我想要类似 var ctx = canvas.getContext('2d'); 我正在使用 Angular 6 的框架。当我这样做时

const canvas2: HTMLCanvasElement =  document.querySelector(".a-canvas");
const ctx=canvas2.getContext('2d');

常量ctx 始终为null

【问题讨论】：

【解决方案1】：

a-frame 具有 webgl 上下文，而不是 2d 上下文。您可以通过以下方式获取 webgl 上下文：

canvas.getContext('webgl')

您可以按类获取a-frame 画布

<canvas class="a-canvas" ....>

var canvas = document.querySelector(".a-canvas")

ar.js 使用相机源创建一个 <video> 元素，您可以简单地做

var feed = document.querySelector("video")

确保在您尝试访问场景时已完全加载。来自docs：

// scene - scene reference (this.el.sceneEl, queryselector(a-scene)
scene.addEventListener('loaded', (e)=> {
  // code here
}

（或者只是设置一个计时器）

小提琴here.

【讨论】：