A component that enables sorting and manually defining render order for transparent objects.
Last updated a year ago by ngokevin .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install aframe-render-order-component 
SYNC missed versions from official npm registry.


Version License

A component that enables sorting and manually defining render order for transparent objects. A-Frame currently defaults to transparency order based on the order of objects added to the scene.

For A-Frame.



The render-order system takes a comma-delimited list of strings that name the render order layers. The render order layers will map to a number starting from 0 and counting up from there.


<a-scene render-order="background, menu, menubutton, menutext, foreground, hud">


Then the render-order component can be applied to specify the layer or render order. The value modify the three.js Object3D's renderOrder property. The value can either be a number or the name of a layer defined in the system.

<a-scene render-order="background, menu, menubutton, menutext, hud">
  <a-entity geometry="primitive: plane" material="transparent: true; opacity: 0.5" render-order="foreground"></a-entity>

  <a-entity geometry="primitive: plane" material="transparent: true; opacity: 0.5" render-order="5.5"></a-entity>

The component will apply render order recursively by default. To define to be not recursive, set the nonrecursive ID:

<a-entity render-order__nonrecursive="hud"></a-entity>



Install and use by directly including the browser files:

  <title>My A-Frame Scene</title>
  <script src=""></script>
  <script src=""></script>

  <a-scene environment="preset: forest" render-order="layer1, layer2, layer3">
    <a-entity geometry="primitive: plane" material="color: red; opacity: 0.5; transparent: true" position="0 1 -1" render-order="layer3"></a-entity>
    <a-entity geometry="primitive: plane" material="color: blue; opacity: 0.5; transparent: true" position="-0.25 1 -2" render-order="layer2"></a-entity>
    <a-entity geometry="primitive: plane" material="color: green; opacity: 0.5; transparent: true" position="-0.5 1 -3" render-order="layer1"></a-entity>


Install via npm:

npm install aframe-render-order-component

Then require and use.


Current Tags

  • 1.1.0                                ...           latest (a year ago)

2 Versions

  • 1.1.0                                ...           a year ago
  • 1.0.0                                ...           a year ago
Maintainers (1)
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 5
Dev Dependencies (0)
Dependents (0)

Copyright 2014 - 2016 © |