issue when real time updating a-sky src

user_4481312 0
Viewed 193

I have simple python based websocket server which passes video frames as base64 string to client.

My client code

var ws = new WebSocket("ws://127.0.0.1:5678/")
ws.onmessage = function (event) {
  console.log("Event received: ", event.data.length)
  let data = event.data.slice(0, -1);
  document.getElementById('sky').setAttribute('src', "data:image/jpg;base64," + data);
};

When I use

//html
<img id="sky" src="" >

as image container, a "video" is produced.

But when I swtich to

<a-scene>
  <a-assets>
    <img id="sky" src="sky.png">
  </a-assets>
  <a-sky src="#sky"></a-sky>
</a-scene>

the image container get stuck at first frame, and although the src attribute of img element is updated, the image on web page doesn't change.

I've looked documentation and weren't able to find anything. What should I give attention?

aframe html javascript
1 Answers

You should access the <a-sky>'s material and texture and set the needsUpdate flag. For example in a custom component:

AFRAME.registerComponent('foo', {
  init: function() {
    // wait until the object is loaded
    this.el.addEventListener("loaded", e => {
       // grab the mesh
       var mesh = this.el.getObject3D("mesh")
       // expose the material
       this.material = mesh.material
    })
  },
  tick: function() {
    // when the material is exposed - set the update flag on each tick
    if (!this.material) return;
    this.material.map.needsUpdate = true
  }
}

Canvas texture example here.

Or you can do this with a more direct approach, by accessing the material component:

// Providing the a-sky entity is loaded and ready
a_sky.components.material.material.map.needsUpdate = true

// Untangling it from the left to right:
// entity -> component list -> material component ->
// THREE.js Material object -> texture -> needsUpdate flag
user_24257870
Related