实时更新 a-sky src 时的问题答案

【问题标题】：issue when real time updating a-sky src实时更新 a-sky src 时的问题
【发布时间】：2020-09-15 10:53:30
【问题描述】：

我有一个简单的基于 python 的 websocket 服务器，它将视频帧作为 base64 字符串传递给客户端。

我的客户代码

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

当我使用时

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

作为图像容器，产生一个“视频”。

但是当我切换到

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

图片容器卡在第一帧，虽然更新了img元素的src属性，但是网页上的图片并没有改变。

我查看了文档，但找不到任何东西。需要注意什么？

【问题讨论】：

你在html中使用的是
尝试在client.py文件中，AFRAME.getElement.....
是的，我使用的正是那个版本。 AFRAME 被定义并返回和对象。没有为该对象定义 getElement。
github.com/supereggbert/aframe-htmlembed-component 在此清楚地写道，“所有样式和图像必须位于同一来源或允许通过 CORS 访问；这允许组件嵌入渲染所需的所有资产html 通过 foreignObject 元素正确地放到画布上。”
也许材质或纹理对象需要将needsUpdate 标志设置为true。您可以在每次 websocket 更新时尝试这样做。

标签： javascript html aframe

【解决方案1】：

您应该访问<a-sky> 的材质和纹理并设置needsUpdate 标志。例如在自定义组件中：

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

画布纹理示例here.

或者您可以使用更直接的方法，通过访问材料组件来做到这一点：

// 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

【讨论】：

在您发表评论后，我又开始查找a-frame/three 源代码，并提出了解决方案a_sky.components.material.material.map.needsUpdate = true。这个更好更干净。谢谢。
@marmeladze 希望一个过度的答案会更清楚:) 我已经添加了你的解决方案，并评论了那里发生的事情。