Cubo

 <!DOCTYPE html>

<html lang="es">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Cubo 3D Interactivo</title>

    <style>

        body {

            margin: 0;

            overflow: hidden;

            background-color: #111;

            display: flex;

            justify-content: center;

            align-items: center;

            height: 100vh;

        }

        canvas {

            display: block;

            cursor: grab;

        }

        canvas:active {

            cursor: grabbing;

        }

    </style>

</head>

<body>

    <!-- Cargamos la librería Three.js desde internet para los gráficos 3D -->

    <script src="https://cloudflare.com"></script>

    

    <script>

        // 1. Configuración de la escena, cámara y renderizador

        const scene = new THREE.Scene();

        const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

        const renderer = new THREE.WebGLRenderer({ antialias: true });

        

        renderer.setSize(window.innerWidth, window.innerHeight);

        document.body.appendChild(renderer.domElement);

        // 2. Creación del Cubo (Geometría de líneas / Wireframe)

        const geometry = new THREE.BoxGeometry(2, 2, 2);

        const edges = new THREE.EdgesGeometry(geometry);

        const lineMaterial = new THREE.LineBasicMaterial({ color: 0x3b82f6, linewidth: 2 });

        const cube = new THREE.LineSegments(edges, lineMaterial);

        scene.add(cube);

        camera.position.z = 5;

        // 3. Variables para el control del ratón

        let isDragging = false;

        let previousMousePosition = { x: 0, y: 0 };

        // 4. Eventos del ratón para rotar

        window.addEventListener('mousedown', (e) => {

            isDragging = true;

        });

        window.addEventListener('mousemove', (e) => {

            const deltaMove = {

                x: e.offsetX - previousMousePosition.x,

                y: e.offsetY - previousMousePosition.y

            };

            if (isDragging) {

                // Rotación basada en el arrastre del ratón

                cube.rotation.y += deltaMove.x * 0.005;

                cube.rotation.x += deltaMove.y * 0.005;

            }

            previousMousePosition = {

                x: e.offsetX,

                y: e.offsetY

            };

        });

        window.addEventListener('mouseup', () => {

            isDragging = false;

        });

        // 5. Adaptar al tamaño de la pantalla si cambia

        window.addEventListener('resize', () => {

            camera.aspect = window.innerWidth / window.innerHeight;

            camera.updateProjectionMatrix();

            renderer.setSize(window.innerWidth, window.innerHeight);

        });

        // 6. Bucle de animación (Renderizado continuo)

        function animate() {

            requestAnimationFrame(animate);

            renderer.render(scene, camera);

        }

        animate();

    </script>

</body>

</html>