Aframe A帧：如何将第二个摄影机渲染到画布

我有一个有两个摄像头的场景-一个主摄像头和一个平面视图摄像头。 如何将平面视图摄影机渲染到附着到主摄影机的平面

我知道我需要按照Aframe文档中的概述将绘制画布组件附加到平面- . 然而，这是我所能做到的

<script>
  AFRAME.registerComponent('draw-canvas', {
  schema: {default: ''},

  init: function () {
    this.canvas = document.getElementById(this.data);
    this.ctx = this.canvas.getContext('2d');

    // Draw on canvas...
   }
  });
</script>

AFRAME.registerComponent（'draw-canvas'{
架构：{默认值：'}，
init：函数（）{
this.canvas=document.getElementById（this.data）；
this.ctx=this.canvas.getContext（'2d'）；
//在画布上画。。。
}
});

有没有关于如何使用帧将相机渲染到画布纹理的工作示例

---

请参阅我的演示-

我找到了一个旁观者组件来解决此问题

AFRAME.registerComponent（'观众'{
“架构”：{
画布：{
键入：“字符串”，
默认值：“”
},
//观众表演的期望FPS
fps：{
键入：“编号”，
默认值：“10.0”
}
},
“init”：函数（）{
var targetEl=document.querySelector（this.data.canvas）；
这个计数器=0；
this.renderer=new THREE.WebGLRenderer({
反别名：假，
阿尔法：是的
});
this.renderer.setPixelRatio（window.devicePixelRatio）；
this.el.object3DMap.camera.aspect=1；
this.el.object3DMap.camera.UpdateProjectMatrix（）
this.renderer.setSize（targetEl.offsetWidth，targetEl.offsetHeight）；
//创建观众画布
appendChild（this.renderer.doElement）；
},
“勾选”：函数（时间，时间增量）{
var loopFPS=1000.0/timeDelta；
var hmdisxfasterthandiredfps=loopFPS/this.data.fps；
var renderEveryNthFrame=Math.round（HMDISXFasterthandiredFPS）；
if（this.counter%renderEveryNthFrame==0）{
此.render（timeDelta）；
}
这个计数器+=1；
},
“呈现”：函数（）{
render.render（this.el.sceneEl.object3D，this.el.object3DMap.camera）；
}
});
.container{
位置：绝对位置；
宽度：300px；
高度：300px；
顶部：10px；
z指数：3；
右：20px；
}
我找到了一个旁观者组件来解决此问题


AFRAME.registerComponent（'观众'{
“架构”：{
画布：{
键入：“字符串”，
默认值：“”
},
//观众表演的期望FPS
fps：{
键入：“编号”，
默认值：“10.0”
}
},
“init”：函数（）{
var targetEl=document.querySelector（this.data.canvas）；
这个计数器=0；
this.renderer=new THREE.WebGLRenderer({
反别名：假，
阿尔法：是的
});
this.renderer.setPixelRatio（window.devicePixelRatio）；
this.el.object3DMap.camera.aspect=1；
this.el.object3DMap.camera.UpdateProjectMatrix（）
this.renderer.setSize（targetEl.offsetWidth，targetEl.offsetHeight）；
//创建观众画布
appendChild（this.renderer.doElement）；
},
“勾选”：函数（时间，时间增量）{
var loopFPS=1000.0/timeDelta；
var hmdisxfasterthandiredfps=loopFPS/this.data.fps；
var renderEveryNthFrame=Math.round（HMDISXFasterthandiredFPS）；
if（this.counter%renderEveryNthFrame==0）{
此.render（timeDelta）；
}
这个计数器+=1；
},
“呈现”：函数（）{
render.render（this.el.sceneEl.object3D，this.el.object3DMap.camera）；
}
});
.container{
位置：绝对位置；
宽度：300px；
高度：300px；
顶部：10px；
z指数：3；
右：20px；
}

你应该看看这个：谢谢@Piotr，我注意到你在JSFIDLE上做了类似的事情。你成功了吗？事实上，我希望通过在画布上渲染场景，然后将a平面src设置为画布，为你获得一个anwser，但我只会遇到更多错误，因为要么我缺少刷新材质之类的内容，要么我的方法太原始。我能够在画布元素上渲染场景，但无法从中获取材质。几个月前，我试图复制杜布先生和李·斯特姆科斯基在这里所做的，但我有太多的工作要做，我在德里克森的观众部分取得了一些成功。但它在复杂的场景中表现出色。这是我的基本代码笔-。你应该看看这个：谢谢@Piotr，我注意到你在JSFIDLE上做了类似的事情-。你成功了吗？事实上，我希望通过在画布上渲染场景，然后将a平面src设置为画布，为你获得一个anwser，但我只会遇到更多错误，因为要么我缺少刷新材质之类的内容，要么我的方法太原始。我能够在画布元素上渲染场景，但无法从中获取材质。几个月前，我试图复制杜布先生和李·斯特姆科斯基在这里所做的，但我有太多的工作要做，我在德里克森的观众部分取得了一些成功。但它在复杂的场景中表现出色。这是我的基本密码笔-。