Tutorial 3 : Change 3D objects displaying on the marker

1. Introduction

Prepare your own 3D object and display it on the marker

This section, we use some of the scripts from Tutorial 1

code: html

<!doctype HTML>

<html>

<head>

</head>

<a-scene embedded arjs>

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

</a-scene>

</body>

</html>

2. Prepare gltf file

Do not use the objects in the library

gltf files are available on sites such as here.

For Sketchfab, push "download" to "Autoconverted format", and download gltf files

This time, we will use this free object.

Rename the downloaded file and place it as follows

code: file

santamodel

└ santa.mtl

index.html

3. Import gltf files

Use a-asset tags to load the 3D object

Describe the gltf file into the a-assets tag

code: html

<a-scene embedded arjs>

<a-assets>

<a-asset-item id="santa-obj" src="santa_model/santa.gltf"></a-asset-item>

</a-assets>

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

</a-scene>

</body>

4. Add details of the 3D object to display on the marker

As with Tutorial 1, use the "hiro marker"

Use a-entity and enter src defined in a-asset tags

3D objects can be set such as position

code: html

<a-scene embedded arjs="debugUIEnabled:false;" vr-mode-ui="enabled: false">

<a-assets>

<a-asset-item id="santa-obj" src="santa_model/santa.gltf"></a-asset-item>

</a-assets>

<a-marker preset="hiro">

<a-entity gltf-model="#santa-obj" position="0 0 0" rotation="0 0 0" scale="0.5 0.5 0.5">

</a-entity>

</a-marker>

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

</a-scene>

</body>

5. Publish

Finally, Publish the file to the web

The final script is as follows

code: webar_santa.html

<!doctype HTML>

<html>

<head>

</head>

<a-scene embedded arjs="debugUIEnabled: false;" vr-mode-ui="enabled: false;">

<a-assets>

<a-asset-item id="santa-obj" src="santa_model/santa.gltf"></a-asset-item>

</a-assets>

<a-marker preset="hiro">

<a-entity gltf-model="#santa-obj" position="0 0 0" rotation="0 0 0" scale="0.5 0.5 0.5">

</a-entity>

</a-marker>

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

</a-scene>

</body>

</html>

#Tutorial