Skip to main content

🎛 Tutorial: Uso de Leva en React Three Fiber

📌 ¿Qué es Leva?​

Leva es una biblioteca ligera que permite crear paneles de control dinámicos en React Three Fiber (R3F), similar a dat.GUI pero más moderno y flexible.

✅ Modifica valores en tiempo real como posiciones, colores y tamaños.
✅ Fácil integración con R3F y hooks de React.
✅ Optimizado para reactividad y rendimiento.

📦 1️⃣ Instalación​

Para instalar Leva en tu proyecto de React Three Fiber, usa:

npm install leva

o con Yarn:

yarn add leva

🏗 2️⃣ Uso Básico en R3F​

🔹 Ejemplo: Controlando la posición de un cubo​

import { Canvas } from "@react-three/fiber";
import { useControls } from "leva";

function Cube() {
  const { positionX, positionY, positionZ, color } = useControls({
    positionX: { value: 0, min: -5, max: 5, step: 0.1 },
    positionY: { value: 0, min: -5, max: 5, step: 0.1 },
    positionZ: { value: 0, min: -5, max: 5, step: 0.1 },
    color: "#ff0000",
  });

  return (
    <mesh position={[positionX, positionY, positionZ]}>
      <boxGeometry args={[1, 1, 1]} />
      <meshStandardMaterial color={color} />
    </mesh>
  );
}

export default function App() {
  return (
    <Canvas camera={{ position: [0, 0, 5] }}>
      <ambientLight />
      <Cube />
    </Canvas>
  );
}

🎯 Explicación​

  • useControls() crea un panel donde podemos modificar posición y color en tiempo real.
  • { value: 0, min: -5, max: 5, step: 0.1 } define valores mínimos, máximos y pasos.
  • color: "#ff0000" permite seleccionar colores en un color picker.

🎨 3️⃣ Personalización Avanzada​

🔹 Ejemplo: Agregando múltiples controles​

import { Canvas } from "@react-three/fiber";
import { useControls } from "leva";

function Sphere() {
  const { scale, wireframe, roughness } = useControls("Sphere Controls", {
    scale: { value: 1, min: 0.5, max: 3, step: 0.1 },
    wireframe: false,
    roughness: { value: 0.5, min: 0, max: 1, step: 0.05 },
  });

  return (
    <mesh scale={scale}>
      <sphereGeometry args={[1, 32, 32]} />
      <meshStandardMaterial wireframe={wireframe} roughness={roughness} />
    </mesh>
  );
}

export default function App() {
  return (
    <Canvas camera={{ position: [0, 0, 5] }}>
      <ambientLight />
      <Sphere />
    </Canvas>
  );
}

🎯 Explicación​

  • scale: Ajusta el tamaño de la esfera en tiempo real.
  • wireframe: Alterna entre modo sólido y wireframe.
  • roughness: Controla la rugosidad del material.

🎛 4️⃣ Organización del Panel con useStore​

Si necesitas múltiples paneles en tu aplicación, usa useControls() dentro de useStore() para organizar parámetros.

import { Canvas } from "@react-three/fiber";
import { useControls, Leva } from "leva";

function Sphere() {
  const controls = useControls("Sphere", {
    scale: { value: 1, min: 0.5, max: 3 },
    color: "#ff0000"
  });

  return (
    <mesh scale={controls.scale}>
      <sphereGeometry />
      <meshStandardMaterial color={controls.color} />
    </mesh>
  );
}

export default function App() {
  return (
    <>
      <Leva /> {/* Renderiza la UI de Leva */}
      <Canvas camera={{ position: [0, 0, 5] }}>
        <ambientLight />
        <Sphere />
      </Canvas>
    </>
  );
}

🎯 Explicación​

  • Leva renderiza la UI del panel.
  • useControls("Sphere", {...}) organiza parámetros dentro de un grupo llamado "Sphere".

🚀 Conclusión​

✅ Leva es una herramienta poderosa y fácil de usar para manipular valores en tiempo real en R3F.

🔹 Úsalo para modificar posiciones, colores, escalas y más.
🔹 Organiza los controles en paneles personalizados.
🔹 Mejora la interactividad sin afectar el rendimiento.

🚀 ¡Ahora puedes crear paneles dinámicos en tus escenas de React Three Fiber! 🎨