Once the component API is validated, expect this to be pulled into A-Frame as a standard component.
A template component for A-Frame VR.
Features:
- Agnostic template engine support, choose from popular templating engines
- Rendering templates before, at the beginning, at the end, or after entities
- Loading templates defined within script tags
- Loading external templates
- Lazy-loading template engines
Supports:
Planned:
| Property | Description |
|---|---|
| src | Selector to a <script template> element or a URL to an external template file. |
| insert | Where to insert the rendered HTML using insertAdjacentHTML |
| type | Type of templating engine to use |
Local context variables for the template are passed through the element's dataset.
Install and use by directly including the browser files:
<head>
<title>My A-Frame Scene</title>
<script src="https://rawgit.com/aframevr/aframe/dev/dist/aframe.min.js"></script>
<script src="https://rawgit.com/ngokevin/aframe-template-component/dev/dist/aframe-template-component.min.js"></script>
</head>
<body>
<a-scene>
<a-assets>
<script id="butterflies" type="text/x-nunjucks-template">
{% for x in range(0, 10) %}
{% for z in range(0, 10) %}
<a-entity template="src: butterfly.template; type: handlebars"
data-position="{{ x * 10 }} 1 {{ z * 10 }}"></a-entity>
{% endfor %}
{% endfor %}
</script>
<script id="forest" type="text/x-nunjucks-template">
{% for x in range(0, 10) %}
{% for z in range(0, 10) %}
<a-entity template="src: tree.template; type: handlebars"
data-position="{{ x * 10 }} 0 {{ z * 10 }}"
data-trunkcolor="#623B1C"></a-entity>
{% endfor %}
{% endfor %}
</script>
<script id="clouds" type="text/x-jade-template">
- for (var x = 0; x < 5; x++) {
- for (var z = 0; z < 5; z++) {
a-entity(geometry="primitive: box; depth: 8; height: 1; width: 6", material="opacity: 0.2", position="#{x * 20} 15 #{z * 20}")
- }
- }
</script>
</a-assets>
<a-entity template="src: #forest"></a-entity>
<a-entity template="src: #butterflies"></a-entity>
<a-entity template="src: #clouds"></a-entity>
</a-scene>
</body>Install via NPM:
npm install aframe-template-componentThen register and use.
var AFRAME = require('aframe');
var templateComponent = require('aframe-template-component').Component;
AFRAME.registerComponent('template', templateComponent);
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent