A-frame：如何将第二个相机渲染到画布答案

【问题标题】：A-frame: How to render 2nd camera to canvasA-frame：如何将第二个相机渲染到画布
【发布时间】：2017-11-29 08:11:30
【问题描述】：

我有一个带有两个摄像头的场景 - 一个主摄像头和一个平面视图摄像头。如何将平面视图相机渲染到连接到主相机的平面上？

我了解我需要按照 Aframe 文档中的说明将绘图画布组件附加到平面 - https://aframe.io/docs/0.5.0/components/material.html#canvas-textures。然而，这是我能做到的。

<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 将相机渲染到画布纹理的工作示例？

请看我的演示 - https://codepen.io/MannyMeadows/pen/OgxwGm

【问题讨论】：

你应该看看这个：stemkoski.github.io/Three.js/Camera-Texture.html
谢谢@Piotr，我注意到你在你的jsfiddle上做了类似的事情-jsfiddle.net/gftruj/cjjw1d8a/1。你成功了吗？
实际上，我希望通过在画布上渲染场景，然后将 a-plane src 设置到画布来为您获得一个 anwser，但我只遇到了更多错误，因为要么我我错过了一些东西，比如刷新材料，或者我的方法太原始了。我可以在画布元素上渲染场景，但无法从中获取材质。几个月前，我试图重现 mrdoob 和 lee stemkoski 在这里 stackoverflow.com/questions/11329180/… 所做的事情，但我有太多工作要做。
我在 derickson 的旁观者组件上取得了一些成功 - github.com/derickson/aframe-play。但它在复杂场景中提供了相当大的性能冲击。这是我的基本代码笔 - codepen.io/MannyMeadows/pen/BZbZBO。

标签： aframe

【解决方案1】：

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

AFRAME.registerComponent('spectator', {
  'schema': {
    canvas: {
      type: 'string',
      default: ''
    },
    // desired FPS of spectator dislay
    fps: {
      type: 'number',
      default: '10.0'
    }
  },
  'init': function() {
    var targetEl = document.querySelector(this.data.canvas);

    this.counter = 0;
    this.renderer = new THREE.WebGLRenderer({
      antialias: false,
      alpha: true
    });

    this.renderer.setPixelRatio(window.devicePixelRatio);
    this.el.object3DMap.camera.aspect = 1;
    this.el.object3DMap.camera.updateProjectionMatrix()
    this.renderer.setSize(targetEl.offsetWidth, targetEl.offsetHeight);

    // creates spectator canvas
    targetEl.appendChild(this.renderer.domElement);
  },
  'tick': function(time, timeDelta) {

    var loopFPS = 1000.0 / timeDelta;
    var hmdIsXFasterThanDesiredFPS = loopFPS / this.data.fps;
    var renderEveryNthFrame = Math.round(hmdIsXFasterThanDesiredFPS);

    if (this.counter % renderEveryNthFrame === 0) {
      this.render(timeDelta);
    }
    this.counter += 1;
  },
  'render': function() {
    this.renderer.render(this.el.sceneEl.object3D, this.el.object3DMap.camera);
  }
});

.container {
  position: absolute;
  width: 300px;
  height: 300px;
  top: 10px;
  z-index: 3;
  right: 20px;
}

<html>

<head>
  <script src="https://aframe.io/releases/0.6.0/aframe.min.js"></script>
  <script src="//cdn.rawgit.com/donmccurdy/aframe-extras/v3.8.5/dist/aframe-extras.min.js"></script>
</head>

<body>
  <a-scene stats>
    <a-assets>
      <img id="map-tex" src="https://cdn0.iconfinder.com/data/icons/architecture-construction/128/1-512.png" crossorigin>
    </a-assets>
    <!-- Scene geometry -->
    <a-sphere position="0 1.25 -1" radius="1.25" color="#EF2D5E">
    </a-sphere>
    <a-box position="-1 0.5 1" rotation="0 45 0" width="1" height="1" depth="1" color="#4CC3D9"></a-box>
    <a-cylinder position="1 0.75 1" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
    <a-plane rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
    <a-sky color="#ECECEC"></a-sky>
    <!-- 1st person camera -->
    <a-entity>
      <a-camera id="primaryCamera" position="0 0 3">
      </a-camera>
      <a-camera position="0 20 3" active="false">
        <a-sphere id="icon" position="0 0 0" radius="0.1" color="#EF2D5E"></a-sphere>
      </a-camera>
    </a-entity>
    <!-- spectator camera -->
    <a-entity camera="active:false; fov:1; far:280" spectator="canvas:#spectatorDiv;" active="false" look-controls="enabled: false" wasd-controls="enabled: false" id="secondaryCamera" position="0 300 0" rotation="-90 0 0">
    </a-entity>
    <!-- mini-map -->
    <a-plane position="0 21 0" rotation="-90 0 0" width="4" height="4" src="#map-tex"></a-plane>
  </a-scene>
  <div class="container" id="spectatorDiv">
  </div>
</body>

</html>

【讨论】：

【解决方案2】：

我已经编写了一个组件来帮助解决这个问题。 https://github.com/diarmidmackenzie/aframe-multi-camera

这是一个将场景的平面视图渲染到位于相机前方固定位置的平面的示例。

<!DOCTYPE html>
<html>
  <head>
      <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
      <script src="https://cdn.jsdelivr.net/gh/diarmidmackenzie/aframe-multi-camera@latest/src/multi-camera.min.js"></script>  
  </head>
  <body>
      <a-scene>
        <!-- arbitrary texture used to initialize materia on the target canvas-->
        <img id="test-texture" src="https://cdn.aframe.io/examples/ui/kazetachinu.jpg" crossorigin="anonymous"/>
        <a-camera>
          <!-- this is the plane that the plan-camera is rendered to-->
          <!-- child of main camera so that it stays in a fixed position-->
          <a-plane id="texture-plane1" position="0.4 0.4 -1" rotation="0 0 0" width="0.3" height="0.3"
                   src='#test-texture'></a-plane>
        </a-camera>
        
        <!-- some scene content-->        
        <a-entity id="container" position = "0 0 -6">
          <a-box position="-1 0.5 1" rotation="0 0 0" color="#4CC3D9"
                 animation="property: rotation; to: 0 360 0; loop: true; dur: 3000; easing: linear"></a-box>
          <a-sphere position="0 1.25 -1" radius="1.25" color="#EF2D5E"></a-sphere>
          <a-cylinder position="1 0.75 1" radius="0.5" height="1.5" color="#FFC65D"
                      animation="property: rotation; to: 360 0 0; loop: true; dur: 3000; easing: linear"></a-cylinder>
          <a-plane position="0 0 0" rotation="-90 0 0" width="4" height="4" color="#7BC8A4" side="double"></a-plane>
        </a-entity>
                        

        <a-entity id="plan-camera" secondary-camera="output:plane; outputElement:#texture-plane1; sequence:before"
                  position="0 9 -6" rotation="-90 0 0">
        </a-entity>        

        <a-sky color="#ECECEC"></a-sky>

      </a-scene>
  </body>
</html>

这里也是一个小故障： https://glitch.com/edit/#!/rattle-ruby-badger

【讨论】：

请谨慎链接到您自己在不同网站上的内容，您不想成为spammer。您应该在此处包含大部分内容，并且仅将链接用作参考。