如何獲取Three.Camera參考？

Question

我試圖呈現<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.parentNodesceneEl.systems.camera,sceneEl.systems.camera.activeCameraEl，但我真的不知道如何得到一個有效的three.camera引用。

我試過this，但事件從不發生。
現場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第二實例。