如何获取 Three.Camera 引用？

Question

我正在尝试将 <a-camera> 输出渲染到 canvas,
我在我的资产中设置了一个 canvas:

<canvas id="canvasnd" crossorigin="anonymous"></canvas>

我有相机：

<a-entity id="ndcam" camera look-controls position="2 1.6 -1" rotation="0 90 
 0"></a-entity>

当我尝试像这样渲染相机输出时：

  var cameraElement = document.querySelector("#ndcam");
  var camera = cameraElement.getAttribute("camera");
  var sceneEl = this.el;
  var renderer = new THREE.WebGLRenderer({
    canvas: canvasnd
  });

  function render() {
    renderer.render(sceneEl, camera);
  }
  render();

我收到 camera is not an instance of three.js camera 错误。代码在 a 场景中，因此 sceneEl = this.el;.

我尝试获取 camera.el、camera.parentNode、sceneEl.systems.camera、sceneEl.systems.camera.activeCameraEl，但我真的不知道如何获取有效的 three.camera 参考.

我试过，但事件从未触发。
直播fiddle here.

Answer 1

如果您有对 a-scene 元素的引用，您可以直接调用它。

let sceneEl = ...;    
let camera = sceneEl.camera;

相机是一个组件，可以驻留在 a-entity 或 a-camera 中（专用于 API）。如果元素是 A-Frame 基元，它应该有一个存储所有组件的对象。查询相机的简单方法可能是：

let cameraEl = document.querySelector('a-entity[camera]')
if (!cameraEl) {
    cameraEl = document.querySelector('a-camera');
}
let camera = cameraEl.components.camera.camera;

其中第一个相机引用是组件，第二个是 THREE.Camera 的实例。

如何获取 Three.Camera 引用？

How to get the Three.Camera reference?

three.js

aframe