Skip to main content

Documentación sobre React Three Fiber

Para crear un proyecto​

Solo se require de Vite para comenzar.

Instalaciones necesarias​

Instala las dependencias necesarias para usar Three.js con React Three Fiber:

npm install three @react-three/fiber

Valores por defecto​

React Three Fiber establece valores por defecto automáticamente, lo que simplifica la configuración.

Agregar el componente <Canvas> desde Fiber​

Para renderizar una escena 3D, envuelve tu aplicación en el componente <Canvas>:

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

function App() {
  return (
    <Canvas>
      {/* Aquí puedes agregar objetos 3D */}
    </Canvas>
  );
}

El <Canvas> toma el tamaño de su padre​

El lienzo ajusta su tamaño al contenedor padre automáticamente.

No necesitamos crear manualmente:​

  • Scene
  • WebGLRenderer
  • PerspectiveCamera

React Three Fiber lo gestiona por nosotros.

Creación automática de PerspectiveCamera​

Por defecto, <Canvas> crea una cámara de perspectiva sin necesidad de configurarla manualmente.

No requiere una función de renderizado​

React Three Fiber maneja el renderizado por nosotros, eliminando la necesidad de llamar a renderer.render().

Manejo de redimensionamiento automático​

Cuando el tamaño de la ventana cambia, React Three Fiber ajusta automáticamente la vista sin requerir código adicional.

Uso de Hooks exclusivos dentro de <Canvas>​

Muchos hooks de Fiber y Drei funcionan solo dentro de <Canvas>, por lo que es recomendable usar un High Order Component (HOC) para englobar nuestra aplicación.

Ejemplo de un HOC:

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

function Scene() {
  return (
    <Canvas>
      {/* Componentes 3D aquí */}
    </Canvas>
  );
}

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

R3F agrega automáticamente los meshes a la escena​

Ejemplo:

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

function Box() {
  return (
    <mesh>
      <boxGeometry args={[1, 1, 1]} />
      <meshStandardMaterial color='blue' />
    </mesh>
  );
}

function App() {
  return (
    <Canvas>
      <Box />
    </Canvas>
  );
}

Evitar cambios dinámicos en los args​

No cambies dinámicamente los valores de args, ya que esto reconstruirá el modelo innecesariamente.

Ejemplo INCORRECTO:

function Box({ size }) {
  return <boxGeometry args={[size, size, size]} />; // Mal, cambia en cada render
}

Ejemplo CORRECTO:

function Box() {
  return <boxGeometry args={[1, 1, 1]} />; // Bien, args no cambia
}

Uso de args para pasar valores al constructor de Three.js​

Ejemplo de uso correcto:

<mesh>
  <sphereGeometry args={[1, 32, 32]} />
  <meshStandardMaterial color='red' />
</mesh>

Orden de colocación de elementos​

El orden en que se colocan los objetos en <Canvas> afecta la forma en que se renderizan y se comportan en la escena.

Ejemplo:

<Canvas>
  <ambientLight />
  <mesh>
    <boxGeometry args={[1, 1, 1]} />
    <meshStandardMaterial color='green' />
  </mesh>
</Canvas>

En este caso, la luz se aplica antes de dibujar el cubo, asegurando que sea visible correctamente.