Aframe 动态 Canvas 作为纹理

Question

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

随着 canvas 的变化，纹理会自动刷新。

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

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

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

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

在这个故障中检查它。

而是使用tick function，只要您从更改 canvas（鼠标事件，源更改）获得任何回调，您就可以更新纹理。

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

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

用法：

<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

如果您在自己更新 canvas 时故意手动运行等效代码，那么您当然可以比滴答处理程序更有效，如果这更有意义/不是逐帧发生的话。

Aframe 动态 Canvas 作为纹理

问题描述

2 个解决方案

解决方案1
2 已采纳 2019-10-26 14:33:16

解决方案2
0 2021-08-23 14:38:11

Aframe 动态 Canvas 作为纹理

问题描述

2 个解决方案

解决方案1 2 已采纳 2019-10-26 14:33:16

解决方案2 0 2021-08-23 14:38:11

解决方案1
2 已采纳 2019-10-26 14:33:16

解决方案2
0 2021-08-23 14:38:11