<html>
<head>
<title>Falling! VR Ball Pit</title>
<script src="aframe.js"></script>
<script src="aframe-extras.min.js"></script>
</head>
<body>
<a-scene>
<a-entity id="container"></a-entity>
<a-sky color="#ECECEC"></a-sky>
<a-plane static-body position="0 0 0" rotation="-90 0 0" width="30" height="30" color="#7BC8A4" material="transparent: true; opacity: 0.2"></a-plane>
</a-scene>
<!-- https://glitch.com/~ballpit -->
<script>
let container = document.querySelector("#container")
let colors = ["#EF2D5E", "#F86624", "#FFC65D", "#7DDF64", "#4CC3D9", "#6F73D2", "#E072A4"]
for (let i = 0; i < 50; i++) {
addBall()
}
function addBall() {
let x = Math.random() * 10 - 5
let y = Math.random() * 50 + 2
let z = Math.random() * -10
container.innerHTML += `<a-sphere dynamic-body position="${x} ${y} ${z}" radius="0.25" mass="0.5" color="${colors[Math.floor(Math.random() * colors.length)]}"></a-sphere>`
}
</script>
</body>
</html>