Skip to main content

3D Assets

It's an augmented reality app, so it's not fun without some 3D assets!

Adding assets

The first thing we need to do is to add some assets to the scene. In AFRAME, we do this by a-assets. Add this block of code inside the <a-scene/> element


<a-assets>
<a-asset-item id="glassesModel" src="https://cdn.jsdelivr.net/gh/hiukim/mind-ar-js@1.1.5/examples/image-tracking/assets/glasses/scene.gltf"></a-asset-item>
</a-assets>

It's a 3D glasses model in gltf format. AFRAME basically supports all the standard 3D format, so you can probably replace it with the models of your choices later.

Update the scene

Now we can replace the dull sphere in the earlier example with this glasses. We also changed the anchorIndex to 168 because that is a better position for glasses.

<a-entity mindar-face-target="anchorIndex: 168">
<a-gltf-model rotation="0 0 0" position="0 0 0" scale="0.01 0.01 0.01" src="#glassesModel"></a-gltf-model>
</a-entity>

The scale 0.01 is set by trial-and-error. It depends on the original size of the 3D models.

Putting it together

Putting it together, your html page is something like below.


<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script src="https://cdn.jsdelivr.net/gh/hiukim/mind-ar-js@1.1.5/dist/mindar-face.prod.js"></script>
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/hiukim/mind-ar-js@1.1.5/dist/mindar-face-aframe.prod.js"></script>
</head>
<body>
<a-scene mindar-face embedded color-space="sRGB" renderer="colorManagement: true, physicallyCorrectLights" vr-mode-ui="enabled: false" device-orientation-permission-ui="enabled: false">
<a-assets>
<a-asset-item id="glassesModel" src="https://cdn.jsdelivr.net/gh/hiukim/mind-ar-js@1.1.5/examples/image-tracking/assets/glasses/scene.gltf"></a-asset-item>
</a-assets>

<a-camera active="false" position="0 0 0"></a-camera>
<a-entity mindar-face-target="anchorIndex: 168">
<a-gltf-model rotation="0 0 0" position="0 0 0" scale="0.01 0.01 0.01" src="#glassesModel"></a-gltf-model>
</a-entity>
</a-scene>
</body>
</html>

If everything works correctly, you should see something like this: