Question

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

var helper = new THREE.MMDHelper(renderer);

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

a-scene有渲染器属性 =＆GT; 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。

顺便说一下，我找了相机属性我可以通过使用“相机设置 - 活动”来获取相机属性供您参考。

<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>

如何在一帧中获得渲染器

3 个答案: