<!DOCTYPE html>
<html>
<head>
<title>Sound - 06 - Events Proximity House</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.0.0/dist/aframe-event-set-component.min.js"></script>
<script src="https://unpkg.com/aframe-proxemic-component@0.0.17/dist/aframe-proxemic-component.min.js"></script>
<script src="../js/livecode.js"></script>
</head>
<body>
<a-scene background="color:lightblue" cursor="rayOrigin: mouse">
<a-assets>
<audio
id="door-sound"
src="https://cdn.glitch.com/80978ab7-9db6-45ae-bc43-4fab16bdbb6e%2Fopen_creaky_door.mp3?v=1619385895573"
></audio>
<a-asset-item
id="house-obj"
crossorigin="anonymous"
src="https://raw.githubusercontent.com/jorgecardoso/aframe-usj-models/master/house/house.obj"
></a-asset-item>
<a-asset-item
id="house-mtl"
crossorigin="anonymous"
src="https://raw.githubusercontent.com/jorgecardoso/aframe-usj-models/master/house/house.mtl"
></a-asset-item>
</a-assets>
<a-obj-model
src="#house-obj"
mtl="#house-mtl"
scale="0.2 0.2 0.2"
position="0 0 -8"
></a-obj-model>
<a-entity
id="door"
position="-0.783 1.183 -4.029"
scale="1.383 0.989 1.019"
proximity-sensor="distance: 2"
animation__open="property: rotation; to: 0 80 0; startEvents: proximityenter"
animation__close="property: rotation; to: 0 0 0; startEvents: proximityexit"
sound="src:#door-sound; on: proximityenter; volume: 1"
>
<a-box
width="1"
height="2"
depth="0.1"
position="0.5 0 0"
color="red"
></a-box>
</a-entity>
<a-camera wasd-controls="acceleration:10">
<a-cursor objects="#door"></a-cursor>
</a-camera>
</a-scene>
</body>
</html>