Crear un visor 3D de planetas con React

Tiempo de lectura: 2 minutos

A continuación, te presento un tutorial paso a paso para crear el componente React «QuantumUniverseExplorer», que te permitirá explorar un universo en 3D de manera interactiva. Este tutorial utiliza WebGL y Three.js para crear la visualización. ¡Vamos a sumergirnos en el cosmos cuántico!

Paso 1: Configuración del Proyecto 🚀

Crea un nuevo proyecto de React con Create React App:

npx create-react-app universe-explorer
cd universe-explorer

Paso 2: Instalación de Bibliotecas 📚

Instala las bibliotecas Three.js y React Three Fiber:

npm install three @react-three/fiber @react-three/drei

Paso 3: Componente QuantumUniverseExplorer 🌌

Crea un nuevo componente llamado QuantumUniverseExplorer.js en la carpeta src:

// src/QuantumUniverseExplorer.js
import React, { useEffect } from 'react';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
import { extend } from '@react-three/fiber';
import * as THREE from 'three';  // Agregamos esta línea

extend({ OrbitControls });  // Agregamos esta línea

const QuantumUniverseExplorer = () => {
    useEffect(() => {
        // Configuración del escenario
        const scene = new THREE.Scene();
        const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
        const renderer = new THREE.WebGLRenderer();
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.getElementById('universe-container').appendChild(renderer.domElement);

        // Añadir planetas
        const geometry = new THREE.SphereGeometry(1, 32, 32);
        const material = new THREE.MeshBasicMaterial({ color: 0xffffff, wireframe: true });
        const planet = new THREE.Mesh(geometry, material);
        scene.add(planet);

        // Añadir estrellas de fondo
        const starsGeometry = new THREE.BufferGeometry();
        const starsMaterial = new THREE.PointsMaterial({ color: 0xFFFFFF, size: 0.1 });

        const starsVertices = [];
        for (let i = 0; i < 5000; i++) {
            const x = (Math.random() - 0.5) * 2000;
            const y = (Math.random() - 0.5) * 2000;
            const z = (Math.random() - 0.5) * 2000;
            starsVertices.push(x, y, z);
        }

        starsGeometry.setAttribute('position', new THREE.Float32BufferAttribute(starsVertices, 3));
        const stars = new THREE.Points(starsGeometry, starsMaterial);
        scene.add(stars);

        // Configurar controles de órbita
        const controls = new OrbitControls(camera, renderer.domElement);
        controls.enableDamping = true;
        controls.dampingFactor = 0.25;
        controls.enableZoom = false;

        // Configurar cámara
        camera.position.z = 5;

        // Animación del universo
        const animate = () => {
            requestAnimationFrame(animate);
            planet.rotation.x += 0.005;
            planet.rotation.y += 0.005;
            controls.update();
            renderer.render(scene, camera);
        };

        animate();

        // Limpiar recursos en la salida
        return () => {
            scene.remove(planet);
            scene.remove(stars);
            renderer.dispose();
        };
    }, []);

    return <div id="universe-container" className="universe-container"></div>;
};

export default QuantumUniverseExplorer;

Paso 4: Estilo QuantumUniverseExplorer.css 🎨

Crea un archivo llamado QuantumUniverseExplorer.css en la misma carpeta que tu componente:

/* src/QuantumUniverseExplorer.css */
.universe-container {
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

Paso 5: Integración en App.js 🚀

Modifica tu archivo App.js para incluir el QuantumUniverseExplorer:

// src/App.js
import React from 'react';
import QuantumUniverseExplorer from './QuantumUniverseExplorer';

function App() {
  return (
    <div>
      <h1>¡Explorador Cuántico del Universo!</h1>
      <QuantumUniverseExplorer />
    </div>
  );
}

export default App;

Paso 6: Prueba tu Explorador Cuántico 🚀

Ejecuta tu aplicación con el comando mágico:

npm start

Abre tu navegador y ve a http://localhost:3000. ¡Prepárate para explorar el universo en 3D!