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

Question

现在有人知道如何获得 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');

constctx总是null

score 0 · Accepted Answer

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")

当您尝试访问场景时，请确保场景已完全加载。从文档：

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

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

1 回答 1