https://sergiomg.com/experiments/Recent content in Experiments on Sergio MGHugoen-usTue, 17 Mar 2026 00:00:00 +0000https://sergiomg.com/experiments/01-cube/Tue, 17 Mar 2026 00:00:00 +0000https://sergiomg.com/experiments/01-cube/<div id="cube-container" style="width:100%;height:500px;"></div> <script type="module"> import * as THREE from '/libs/three.module.js'; const container = document.getElementById('cube-container'); const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera(75, container.clientWidth / container.clientHeight, 0.1, 1000); const renderer = new THREE.WebGLRenderer({ antialias: true }); renderer.setSize(container.clientWidth, container.clientHeight); renderer.setClearColor(0x111111); container.appendChild(renderer.domElement); const geometry = new THREE.BoxGeometry(1, 1, 1); const material = new THREE.MeshNormalMaterial(); const cube = new THREE.Mesh(geometry, material); scene.add(cube); camera.position.z = 3; function animate() { requestAnimationFrame(animate); cube.rotation.x += 0.01; cube.rotation.y += 0.01; renderer.render(scene, camera); } animate(); window.addEventListener('resize', () => { camera.aspect = container.clientWidth / container.clientHeight; camera.updateProjectionMatrix(); renderer.setSize(container.clientWidth, container.clientHeight); }); </script>https://sergiomg.com/experiments/02-particles/Tue, 17 Mar 2026 00:00:00 +0000https://sergiomg.com/experiments/02-particles/<div style="position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:999;"> <iframe src="https://sergiomg.com/demos/02-particles/" style="width:100%;height:100%;border:none;"></iframe> <a href="https://sergiomg.com/experiments/" style="position:absolute;top:1rem;left:1rem;color:#fff;background:rgba(0,0,0,0.6);padding:0.5rem 1rem;border-radius:6px;text-decoration:none;font-size:0.9rem;z-index:1000;">← Back</a> </div>