How to get the Three.Camera reference?

Question

I am trying to render a <a-camera> output to a canvas,
i've set up a canvas in my assets:

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

I've got a camera:

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

And when i try to render the camera output like this:

  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();

I get the camera is not an instance of three.js camera error. The code is on the a-scene, hence the sceneEl = this.el;.

I tried getting the camera.el, camera.parentNode, sceneEl.systems.camera, sceneEl.systems.camera.activeCameraEl, but i have really no idea how to get a valid three.camera reference.

I tried this, but the event never fires.
Live fiddle here.

score 1 · Accepted Answer · answered Jun 26 '17 at 17:20

If you have an reference to the a-scene element, you can just call it with a direct reference.

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

The camera is an component and can either reside in an a-entity or an a-camera (exclusively to the API). If the element is an A-Frame primitive, it should have a object which stores all components. A simple way to query for a camera could be:

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

Where the first camera reference is the component and the second an instance of THREE.Camera.

How to get the Three.Camera reference?

1 Answers1