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