Aframe Dynamic Canvas as Texture

Question

I was trying to use a canvas as texture in my aframe project. I found some instructions here. It mentioned:

The texture will automatically refresh itself as the canvas changes.

However, I gave it a try today and the canvas could only be changed / updated in init function. Afterwards the update to canvas cannot be reflected. Here is my implementation:

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);
   }
 }

The color change of of the texture was never changed. Is there anything I missed? Thank you so much for any advice.

Answer 1

I could never get it to work with those instructions (never checked out if bug or improper use though), but you can achieve the same with 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
}

Check it out in this glitch.

Instead using the tick function, you could update the texture whenever you get any callback from changing the canvas (mouse events, source change).