Simple Example
A Simple Example of Interactivity
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
<!doctype html> <html lang="en"> <!-- Version 04.04.2018; A-Frame 0.80 --> <head> <meta charset="UTF-8"> <title>A-Frame Interactivity</title> <script src="js/aframe.min.js"></script> <script> function setScene2() { document.querySelector('#scene1').setAttribute('visible', 'false'); document.querySelector('#scene2').setAttribute('visible', 'true'); } function setScene1() { document.querySelector('#scene2').setAttribute('visible', 'false'); document.querySelector('#scene1').setAttribute('visible', 'true'); } </script> </head> <body> <a-scene> <a-camera zoom="0.5" user-height="0"> <a-cursor cursor="fuse: true; fuseTimeout: 1500" geometry="primitive: ring; radius-outer: 0.05; radius-inner: 0.01;" material="color: red" ></a-cursor> </a-camera> <a-entity id="scene1"> <a-sky src="images/scene_1.jpg"></a-sky> <a-box color="green" position="1 0 -5" onclick="setScene2()"></a-box> </a-entity> <a-entity id="scene2" visible="false"> <a-sky src="images/scene_2.jpg"></a-sky> <a-box color="yellow" position="-1 0 -5" onclick="setScene1()"></a-box> </a-entity> </a-scene> </body> </html> |
By looking 1500 Milliseconds at the box, the scene will change. Actually, one entity becomes visible, the other invisible.
Remarks
The onclick Event in the HTML is not very elegant. In the next topic, we will work with addEventListener.
File
Please play around with the example (with onclick Event) or example (with addEventListener).