CODEWITHSUNDEEP
aframe
sgi-don
sgi-don

Reputation: 43

How can I get a renderer in a-frame

I try to use three.js library in a-frame.
For example, 

var helper = new THREE.MMDHelper(renderer);

I don't know how to get a renderer in a-frame.

a-scene has a renderer property.
=> https://aframe.io/docs/0.3.0/core/scene.html
but, it's undefined. 

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

Please tell me how to get the rendere

Upvotes: 4

Views: 3842

Answers (3)

sgi-don
sgi-don

Reputation: 43

thanks, Don McCurdy and ngokevin.

Incidentally, I looked for the camera property.
I can get the camera property by use 'camera-set-active'.
For your reference.

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

Upvotes: 0

ngokevin
ngokevin

Reputation: 13233

If you write your code within a component, you can be guaranteed everything is loaded:

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


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

Upvotes: 1

Don McCurdy
Don McCurdy

Reputation: 11970

You'll need to wait for the scene to initialize before a renderer is available:

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

Upvotes: 6

Related Questions