Aframe ar.js canvas Контекст с угловым 6

Question

У кого-нибудь сейчас как получается контекст a-frame aer.js canvas? В режиме разработки Google Chrome я вижу класс-холст, но нет идентификатора, чтобы получить контекст по идентификатору.

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

Я хотел бы иметь что-то вроде вар ctx = canvas.getContext('2d');Я использую рамку с угловым 6. Когда я делаю это с

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

const ctx всегда null

Answer 1

Спасибо за Ваш ответ

Я использую рамку с угловым 6. Когда я делаю это с

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

const ctx всегда null

Answer 2

Это я попробовал:

ngAfterViewInit() {
let scene = document.querySelector('a-scene');
scene.addEventListener('loaded', run);
console.log('now');
function run() {
  setTimeout(function () {
    let canvas = <HTMLCanvasElement> scene.querySelector('.a-canvas');
    let ctx = <CanvasRenderingContext2D > canvas.getContext('2d');
    console.log('ctx:' + ctx);
  }, 1000);
}

ctx все еще null

У тебя есть идея?

Answer 3

А-кадр имеет 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
}

(или просто установите таймер)

возиться здесь