AFRAME: How to use Three's render property setPixelRatio on A-Frame?

Question

Three.js has a renderer property setPixelRatio that I would like to use set to 2.

Reviewing the A-Frame docs, I don't see a corresponding property.

Does anyone know a way to implement it into an A-Frame project?

Answer 1

You'll need a custom component. Just add this to your head (or put this in a separate JS file, and reference that).

    <script>
      AFRAME.registerComponent('pixel-ratio', {
        schema: {
          type: 'number'
        },
        update: function() {
           this.el.sceneEl.renderer.setPixelRatio(this.data)
        }
      })
    </script>

and then declare your <a-scene> like this:

<a-scene pixel-ratio="2">
</a-scene>

In the Three.js docs, I don't see any restrictions on when setPixelRation can be called, so this should work fine.

You can also adjust pixel ratio at any time by changing the pixel-ratio attribute on the a-scene

Example on glitch here: https://glitch.com/edit/#!/set-pixel-ratio