A-Frame example showing the reconstructed facade of the St. Margherita church of l'Aquila (Italy) with some light animation and interactive panels.
A-Frame example showing the reconstructed facade of the St. Margherita church of l'Aquila (Italy) with some light animation and interactive panels. The interactive panels are also useful to move around the 3D map when you are using devices without controllers such as smartphones or tablets.
The model used here was obtained using photogrammetry and laser scanning techniques. The complete process is explained in this paper: Augmented Reality for Historical Storytelling. The INCIPICT Project for the Reconstruction of Tangible and Intangible Image of L’Aquila Historical Centre .
Open it on https://pichillilorenzo.github.io/A-Frame-example/ to see the example.
A-Frame compontents defined in main.js
are:
THREE.MeshBasicMaterial
to an A-Frame entity.path
value you can set an array of steps for the animation. In each step you can define the position and other properties (like the rotation) of the entity that will be updated. Example:<a-entity
light="type: spot; angle: 20; castShadow: true; intensity: .7;"
animation-move='path: [
{"position": {"x": 0, "y": 0, "z": 1}, "rotation": {"x": 35, "y": -15, "z": 1}},
{"position": {"x": -10, "y": 0, "z": 1}, "rotation": {"x": 35, "y": -35, "z": 0}},
{"position": {"x": -10, "y": 25, "z": 1.5}, "rotation": {"x": -35, "y": -25, "z": 1}},
{"position": {"x": 10, "y": 25, "z": 1.5}, "rotation": {"x": -35, "y": 30, "z": 1}},
{"position": {"x": 10, "y": 0 , "z": 1}, "rotation": {"x": 30, "y": 35, "z": 1}}
]; animationStepTime: 3000'>
</a-entity>
<a-text
class="sign"
highlight
follow-camera="offset: -5 1 -2;"
rotation="0 80 0"
value="Look here to go up"
move-camera="position: 0 0.1 0;"
align="center">
<a-plane color="#000" width="3"></a-plane>
</a-text>
When an user will look at it, the camera will move along the y axis by 0.1 each second, and 0 on the x and z axis.