Aframe 动态画布作为纹理答案

【问题标题】：Aframe Dynamic Canvas as TextureAframe 动态画布作为纹理
【发布时间】：2021-12-31 03:19:15
【问题描述】：

我试图在我的框架项目中使用画布作为纹理。我找到了一些说明here。它提到：

纹理会随着画布的变化而自动刷新。

但是，我今天试了一下，画布只能在 init 函数中更改/更新。之后无法反映对画布的更新。这是我的实现：

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

纹理的颜色变化从未改变。有什么我错过的吗？非常感谢您的任何建议。

【问题讨论】：

标签： javascript canvas aframe

【解决方案1】：

我永远无法让它与这些说明一起使用（尽管从未检查过是否存在错误或使用不当），但您可以使用 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
}

在this 故障中查看。

您可以使用tick 函数代替，只要您从更改画布（鼠标事件、源更改）中获得任何回调，就可以更新纹理。

【讨论】：

【解决方案2】：

文档已过时，我已提出更新请求。下面是显示如何执行此操作的代码：

源代码：https://github.com/aframevr/aframe/issues/4878

指向：https://github.com/aframevr/aframe/blob/b164623dfa0d2548158f4b7da06157497cd4ea29/examples/test/canvas-texture/components/canvas-updater.js

我们可以快速把它变成这样的组件，例如：

/* global AFRAME */

AFRAME.registerComponent('live-canvas', {
  dependencies: ['geometry', 'material'],

  schema: {
    src: { type: "string", default: "#id"}
  },

  init() {
    if (!document.querySelector(this.data.src)) {
      console.error("no such canvas")
      return
    }
    this.el.setAttribute('material',{src:this.data.src})
  },

  tick() {
    var el = this.el;
    var material;

    material = el.getObject3D('mesh').material;
    if (!material.map) { 
      console.error("no material map")
      this.el.removeAttribute('live-canvas')
      return; 
    }
    material.map.needsUpdate = true;
  }
});

（记得在你的场景之前声明你的组件......）

用法：

<body>
  <canvas id="example-canvas"></canvas>
  <a-scene>
    <a-box live-canvas="src:#example-canvas;"></a-box>
  </a-scene>
</body>

在这里进行实时故障代码演示： https://glitch.com/edit/#!/live-canvas-demo?path=index.html%3A58%3A43

如果您只是在自己更新画布时有意手动运行等效代码（如果这样做更有意义/不会逐帧发生），那么您当然可以比滴答处理程序更高效。

【讨论】：