Aframe Dynamic Canvas в качестве текстуры - PullRequest
Новая
       9

Aframe Dynamic Canvas в качестве текстуры

0 голосов
/ 25 октября 2019

Я пытался использовать холст в качестве текстуры в своем проекте aframe. Я нашел некоторые инструкции здесь . В нем упоминалось:

Текстура будет автоматически обновляться при изменении холста.

Однако я попробовал сегодня, и холст можно было изменить или обновить только вфункция инициализации. После этого обновление холста не может быть отражено. Вот моя реализация: 

module.exports = {
  'canvas_component': {
    schema: {
      canvasId: { type: 'string' }
   },

   init: function () {
     this.canvas = document.getElementById(this.data.canvasId);
     this.ctx = this.canvas.getContext('2d');

     this.ctx.fillStyle = "#FF0000";
     this.ctx.fillRect(20, 20, 150, 100);

     setTimeout(() => {
       this.ctx.fillStyle = "#FFFF00";
       this.ctx.fillRect(20, 20, 150, 100);
     }, 2000);
   }
 }

Изменение цвета текстуры никогда не менялось. Я что-то пропустил? Большое спасибо за любой совет.

1 Ответ

1 голос
/ 26 октября 2019

Я никогда не смогу заставить его работать с этими инструкциями (никогда не проверялось, если ошибка или неправильное использование), но вы можете добиться того же с Three.js: 

// assuming this is inside an aframe component
init: function() {
  // we'll update this manually
  this.texture = null
  let canvas = document.getElementById("source-canvas");
  // wait until the element is ready
  this.el.addEventListener('loaded', e => {
     // create the texture
     this.texture = new THREE.CanvasTexture(canvas);

     // get the references neccesary to swap the texture
     let mesh = this.el.getObject3D('mesh')
     mesh.material.map = this.texture
     // if there was a map before, you should dispose it
  })
},
tick: function() {
  // if the texture is created - update it
  if (this.texture) this.texture.needsUpdate = true
}

Проверьте это в это глюк.

Вместо использования функции tick вы можете обновлять текстуру всякий раз, когда вы получаете какой-либо обратный вызов от изменения холста (события мыши, смена источника).

...