Simple Example

Topic Progress:

A Simple Example of Interactivity

<!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.