<!DOCTYPE html>
<html>
<head>
<title>Proxy Event - 03 - Toggle button</title>
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script src="https://unpkg.com/aframe-environment-component/dist/aframe-environment-component.min.js"></script>
<script src="https://unpkg.com/aframe-event-set-component@4.2.1/dist/aframe-event-set-component.min.js"></script>
<script src="https://unpkg.com/aframe-proxy-event-component/dist/aframe-proxy-event-component.min.js"></script>
<script src="../js/livecode.js"></script>
</head>
<body>
<a-scene cursor="rayOrigin: mouse" background="color: lightblue">
<a-entity id="env" environment="preset:tron"></a-entity>
<a-entity
id="toggle"
class="togglebutton"
position="0 1.6 -3"
event-set__forest="_event:clickblue; _target: #env; environment.preset:forest"
event-set__tron="_event:clickred; _target: #env; environment.preset:tron"
event-set__hideblue="_event:clickblue; _target: a-box[color='blue']; scale:0 0 0"
event-set__showred="_event:clickblue; _target: a-box[color='red']; scale:1 1 1"
event-set__hidered="_event:clickred; _target: a-box[color='red']; scale:0 0 0"
event-set__showblue="_event:clickred; _target: a-box[color='blue']; scale:1 1 1"
>
<a-box
color="blue"
proxy-event="event: click; to:#toggle; as: clickblue"
></a-box>
<a-box
color="red"
scale="0 0 0"
proxy-event="event: click; to:#toggle; as: clickred"
></a-box>
</a-entity>
</a-scene>
</body>
</html>