A 帧在二维平面上镜像我 div 中的代码

Question

问题

我正在使用框架 (https://aframe.io) 创建 3d 场景，我需要某种方式将 html div 镜像到框架内的平面上.例如，假设有一个 div 和一些代码，我可以在上面绘图，类似于屏幕左下角的白板。我在白板上画的所有东西都应该镜像到 a 帧平面上。这样我应该能够在我的 a 帧场景中看到我的白板绘图。

我试过的

我已经尝试使用两个组件 a-frame html 嵌入组件 (https://github.com/supereggbert/aframe-htmlembed-component) and the a-frame shader component (https://github.com/mayognaise/aframe-html-shader) 并且都可以在我的场景中的二维平面上显示 html 但是 2d我场景中的平面不反映白板并且不更新。这意味着当我在我的白板上画东西时，而不是镜像到二维平面并显示我在 vr 中画的东西，只有一块白板，上面没有任何东西。

我需要解决的问题和理想的解决方案

我需要能够在 html 中创建一个带有白板或其他代码的 div，并在我的场景中的二维平面上显示相同的 html .如果我在白板上绘制字母“a”，平面上的 2d html 应该更新含义，字母 a 将出现在场景中的 2d 平面上。只要有一个 div 我可以在其中放置我的 2d html（我的白板）和 div 镜子在 vr 中，那将是理想的解决方案。是否有一些代码可以完成此操作？

我是否遗漏了我尝试过的两个允许我完成此任务的组件？ （两个组件：https://github.com/supereggbert/aframe-htmlembed-component and https://github.com/mayognaise/aframe-html-shader）或者可能是不同的 A 帧组件？

理想情况下，我正在寻找一个组件的代码，该组件允许我将 div 镜像到场景中的 3d 平面上，或者推荐一个允许我显示 interactable 二维内容 div.

Answer 1

由于您的白板使用 canvas，您可以使用 aframe canvas component.

然后在 handleUpdate() 函数的末尾调用组件的 updateTexture() 函数将 aframe 纹理更新为白板的当前状态。