🔹 Hooks en React Three Fiber

🏗️ useFrame(state, delta)

useFrame es un hook que permite ejecutar lógica en cada frame de renderizado. Es útil para animaciones y actualizaciones en tiempo real.

import { Canvas, useFrame } from '@react-three/fiber';
import { useRef } from 'react';

function RotatingBox() {
  const meshRef = useRef();

  useFrame((state, delta) => {
    meshRef.current.rotation.y += delta; // Rota a velocidad constante
  });

  return (
    <mesh ref={meshRef}>
      <boxGeometry args={[1, 1, 1]} />
      <meshStandardMaterial color='orange' />
    </mesh>
  );
}

export default function App() {
  return (
    <Canvas>
      <ambientLight />
      <RotatingBox />
    </Canvas>
  );
}

📌 Nota: No se debe usar useFrame para actualizar estados (useState), ya que puede causar re-renderizados innecesarios y afectar el rendimiento.

---

🎛️ useThree()

useThree() es un hook que proporciona información sobre la escena 3D actual, incluyendo la cámara, el renderizador y el tamaño de la pantalla.

import { Canvas, useThree } from '@react-three/fiber';

function SceneInfo() {
  const { camera, size } = useThree();

  console.log('Cámara actual:', camera);
  console.log('Tamaño de pantalla:', size);

  return null;
}

export default function App() {
  return (
    <Canvas>
      <ambientLight />
      <SceneInfo />
    </Canvas>
  );
}

📌 Nota: useThree() es útil cuando se necesita acceder a la cámara o modificar la escena de manera programática.

---

⚡ Recomendaciones para animaciones

• ❌ No usar useFrame para actualizar estados (useState).
• ✅ Usar useRef para animar propiedades sin afectar el estado de React.

Ejemplo correcto:

function RotatingSphere() {
  const sphereRef = useRef();

  useFrame((state, delta) => {
    sphereRef.current.rotation.x += delta;
  });

  return (
    <mesh ref={sphereRef}>
      <sphereGeometry args={[1, 32, 32]} />
      <meshStandardMaterial color='red' />
    </mesh>
  );
}

---

🎭 Uso de objetos de terceros de forma declarativa

🔹 extend() para agregar nuevos componentes JSX

La función extend permite extender el catálogo de elementos JSX en React Three Fiber con objetos de three.js o bibliotecas externas.

import { extend } from '@react-three/fiber';
import { OrbitControls, TransformControls } from 'three-stdlib';

extend({ OrbitControls, TransformControls });

function Controls() {
  return (
    <>
      <orbitControls />
      <transformControls />
    </>
  );
}

export default function App() {
  return (
    <Canvas>
      <ambientLight />
      <Controls />
    </Canvas>
  );
}

📌 Nota: Esto permite que los componentes añadidos sean usados en JSX de la misma forma que otros elementos de three.js.

---

🛠️ Agregando axesHelper

axesHelper es una herramienta útil para visualizar los ejes en la escena 3D y orientar mejor los objetos.

function SceneWithAxes() {
  return (
    <>
      <directionalLight position={[0, 5, 2, 3]} />
      <axesHelper args={[1]} />
    </>
  );
}

export default function App() {
  return (
    <Canvas>
      <SceneWithAxes />
    </Canvas>
  );
}

📌 Nota: args={[1]} define el tamaño del axesHelper en la escena.

---

✅ Resumen

🔹 useFrame() → Para animaciones en cada frame, sin actualizar estados.
🔹 useThree() → Para acceder a la escena, cámara y renderizador.
🔹 useRef → Para animaciones eficientes sin re-renderizados.
🔹 extend() → Para agregar objetos de three.js en JSX.
🔹 axesHelper → Para visualizar los ejes y mejorar la orientación.

🚀 ¡Con estos conceptos, puedes construir experiencias 3D interactivas de manera eficiente en React Three Fiber! 🎨