如何在一帧中获得渲染器

Question

我尝试在框架中使用 three.js 库。
例如，

var helper = new THREE.MMDHelper(renderer);

我不知道如何在帧中获取渲染器。

一个场景有一个渲染器属性。
=> https://aframe.io/docs/0.3.0/core/scene.html
但是，它是未定义的。

document.querySelector('a-scene').renderer; <= undefined

请告诉我如何获得渲染图

Answer 1

在渲染器可用之前，您需要等待场景初始化：

 sceneEl.addEventListener('render-target-loaded', function () {
   // sceneEl.renderer is now set.  
 });

Answer 2

如果您在组件中编写代码，则可以保证所有内容都已加载：

AFRAME.registerComponent('do-something', {
  init: function () { 
    console.log(this.el.renderer);
  }
});


<script src="do-something-component.js"></script>
<a-scene do-something></a-scene>

Answer 3

谢谢 Don McCurdy 和 ngokevin。

顺便找了相机属性。
我可以通过使用 'camera-set-active'.
获得相机属性供大家参考。

<html>
  <head>
    <title>a-frame sample</title>
    <script src="https://aframe.io/releases/0.3.0/aframe.min.js"></script>
  </head>
  <body>
    <a-scene do-something>
    </a-scene>
  </body>
  <script>

var sceneEl = document.querySelector('a-scene');

window.onload = function() {
  console.log('window.onload');
  console.log(document.querySelector('a-scene').renderer);  // undefined
  console.log(document.querySelector('a-scene').camera);    // undefined
}

AFRAME.registerComponent('do-something', {
  init: function() {
    console.log('do-something init');
    console.log(this.el.renderer);    // OK
    console.log(this.el.camera);      // undefined

    this.el.addEventListener('camera-set-active', this.cameraSetActive.bind(this));
  },

  cameraSetActive: function() {
    console.log('do-something cameraSetActive');
    console.log(this.el.renderer);    // OK
    console.log(this.el.camera);      // OK
  }
});

sceneEl.addEventListener('render-target-loaded', function() {
  console.log('render-target-loaded');
  console.log(document.querySelector('a-scene').renderer);  // OK
  console.log(document.querySelector('a-scene').camera);    // undefined
});

sceneEl.addEventListener('camera-ready', function() {
  console.log('camera-ready');
  console.log(document.querySelector('a-scene').renderer);  // OK
  console.log(document.querySelector('a-scene').camera);    // undefined
});

sceneEl.addEventListener('camera-set-active', function() {
  console.log('camera-set-active');
  console.log(document.querySelector('a-scene').renderer);  // OK
  console.log(document.querySelector('a-scene').camera);    // OK
});

  </script>
</html>

如何在一帧中获得渲染器

How can I get a renderer in a-frame

aframe