如何获取 Three.Camera 参考？答案

【问题标题】：How to get the Three.Camera reference?如何获取 Three.Camera 参考？
【发布时间】：2017-06-27 01:20:56
【问题描述】：

我正在尝试将<a-camera> 输出渲染到画布，
我已经在我的资产中设置了一个画布：

<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 错误。代码在现场，因此sceneEl = this.el;。

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

我尝试了this，但该事件从未触发。
直播fiddle here。

【问题讨论】：

标签： three.js aframe

【解决方案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 的实例。

【讨论】：