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错误。代码在a-scene上，因此是sceneEl = this.el;。

我尝试了camera.el，camera.parentNode，sceneEl.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的实例。

如何获得Three.Camera参考？

1 个答案: