Skip to main content

Starter template

This is a heavily commented template that can be expanded upon easily. It's recommended to read the comments of the entire file before using it.

<!DOCTYPE html>
<html>
<!--load aframe-master and aframe-ar-->
<script src="js/aframe-master.min.js"></script>
<script src="js/aframe-ar.js"></script>
<body>
<!-- 
Open an aframe scene (a-scene);
  - set draco path (draco compressed models won't work without this setting)
  - enable embedded mode 
  - disable vr mode ui (gets weird without HMD)
  - set arjs options - disable debug, set detection mode
-->

<a-scene 
gltf-model="dracoDecoderPath: js/draco/;"
embedded
vr-mode-ui="enabled: false;" 
arjs="debugUIEnabled: false; detectionMode: mono_and_matrix; matrixCodeType: 3x3;">  

<!-- 
Here are some examples:
Optionally set lighting (every aframe object has an emission light in it's center by defazlt)

Red directional light shining from the top left.
<a-light color="red" position="-1 1 0"></a-light>

Blue point light, 5 meters in the air.
<a-light type="point" color="blue" position="0 5 0"></a-light>

Dim ambient lighting. 
<a-light type="ambient" color="#222"></a-light>
-->    

<!--

Load asswts, the id of the a-asset item will later be used to load the asset at a specific marker

--> 
<a-assets>
<a-asset-item id="model01" src="models/model_01.gltf"></a-asset-item>
<a-asset-item id="model02" src="models/model_02.gltf"></a-asset-item>
<a-asset-item id="model03" src="models/model_03.gltf"></a-asset-item>
</a-assets>
    
<!--

Builtin marker setup

- use, posoition, rotation and scale to poslition and scale the model in 3D space (x, Y, Z)
- animation-mixer is optional and can be removed if the model loaded isn't animated

-->

<a-marker type="barcode" value="0">
<a-entity
id="pos1"
position="0 0 0" 
rotation="0 0 0"
scale="1 1 1"
gltf-model="#model01"
animation-mixer
>
</a-entity>
</a-marker>     

<a-marker type="barcode" value="1">
<a-entity
id="pos2"
position="0 0 0" 
rotation="0 0 0"
scale="1 1 1"
gltf-model="#model02"
animation-mixer
>
</a-entity>
</a-marker>   
<a-marker type="barcode" value="2">
<a-entity
id="pos3"
position="0 0 0" 
rotation="0 0 0"
scale="1 1 1"
gltf-model="#model3"
animation-mixer
></a-entity>
</a-marker>

<!--Custom marker setup-->
<a-marker type="pattern" url="markers/patt-1.patt">
<a-entity   
id="pos1"
position="0 0 0" 
rotation="0 0 0"
scale="1 1 1"
gltf-model="#model01"
animation-mixer
>
</a-entity>
</a-marker>

<a-marker type="pattern" url="markers/patt-2.patt">
<a-entity   
id="pos2"
position="0 0 0" 
rotation="0 0 0"
scale="1 1 1"
gltf-model="#model02"
animation-mixer
>
</a-entity>
</a-marker>

<a-marker type="pattern" url="markers/patt-3.patt">
<a-entity   
id="pos3"
position="0 0 0" 
rotation="0 0 0"
scale="1 1 1"
gltf-model="#model03"
animation-mixer
>
</a-entity>
</a-marker>

<!-- Never forget to add a camera-->

<a-entity camera></a-entity>

</a-scene>
</body>
</html>

 

Back to top