Simple Example

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.

  

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

Comments are closed.