🚀 Guía de Inicio: React Three Fiber (R3F) + Vite

1. Requisitos Previos (Base)

• Node.js: Descarga e instalar la versión LTS desde nodejs.org. (puede ser el .msi) desmarcar la casilla de "automatically install the necesary tools..."
• Descargar/instalar un IDE como Visual Studio code, también instalar esta extensión ES7+ React/Redux/React-Native snippets
• Verificación: Abre una terminal (CMD o PowerShell) y escribe:
  • node -v (Debe devolver una versión como v18 o v20).
  • npm -v (Debe devolver la versión del gestor de paquetes).

2. Creación del Proyecto con Vite

Vite es la herramienta moderna para crear proyectos rápidos.

1. Abre la terminal en la carpeta donde quieras tu proyecto (ej. D:\).
2. Ejecuta: npm create vite@latest
3. cuando te pida ubicación, ponle la ubicación de la carpeta con todos tus proyectos web, cuando le des el nombre de tu proyecto en particular, creará una carpeta para ese proyecto en específico
4. Sigue los pasos:
   • Project name: WEB3D (o el nombre que prefieras).
   • Select a framework: React.
   • Select a variant: JavaScript (o JavaScript + SWC).
5. Entra a la carpeta: cd WEB3D
6. Instala las dependencias base: npm install

3. Instalación de Librerías 3D

Para que el 3D funcione, instalamos el "tridente" de R3F:

npm install three @types/three @react-three/fiber @react-three/drei gsap maath

• three: El motor 3D original.
• @react-three/fiber: El puente entre React y Three.js.
• @react-three/drei: Ayudantes (helpers) para cámaras, controles e iluminación.

4. Configuración del Archivo App.jsx

Vite usa la extensión .jsx para archivos que contienen etiquetas visuales. Un esqueleto básico funcional para tu proyecto:

JavaScript

import { Canvas } from '@react-three/fiber'
import { OrbitControls, Stars } from '@react-three/drei'

export default function App() {
  return (
    <div style={{ width: '100vw', height: '100vh', background: '#050505' }}>
      <Canvas camera={{ position: [0, 0, 5] }}>
        <ambientLight intensity={0.5} />
        <pointLight position={[10, 10, 10]} />
        
        {/* Tu objeto 3D aquí */}
        <mesh>
          <boxGeometry />
          <meshStandardMaterial color="orange" />
        </mesh>

        <OrbitControls />
        <Stars />
      </Canvas>
    </div>
  )
}

Nota: No olvides el export default App al final o al inicio de la función para que el proyecto no se quede en blanco.

5. Control de Versiones (GitHub Desktop)

Para no perder tu progreso y trabajar desde casa:

1. Abrir GitHub Desktop: Arrastra tu carpeta WEB3D a la aplicación.
2. Crear Repositorio: Haz clic en el enlace azul "Create a repository here".
3. Ajuste de Ruta: Asegúrate de que el Local Path apunte a D:\ y el Name sea WEB3D (para evitar la carpeta doble WEB3D/WEB3D).
4. Git Ignore: Selecciona el filtro "Node" para evitar subir los 200MB de node_modules.
5. Commit & Publish:
   • Escribe un resumen (ej: "Inicio proyecto").
   • Dale a Commit to main.
   • Dale a Publish repository (márcalo como Private si es institucional).

6. Trabajar desde Casa

Cuando descargues el proyecto en otra PC:

1. Clone: Desde GitHub Desktop descarga el repositorio.
2. Reconstruir: Abre la terminal en esa carpeta y ejecuta:
   Bash

npm install

(Esto descargará las librerías pesadas basándose en tu archivo package.json).

1. Correr: Ejecuta npm run dev para abrir el servidor local.

Parar correr el proyecto

debes correr el servidor: abre la carpeta del explorador de windows de tu proyecto y abre el cmd desde esa carpeta

npm run dev

esto activará el servidor y te indicará el puerto que usará, que suele ser 5173, entonces entrarías a http://localhost:5173/
y para editar el proyecto abre Visual Studio Code, arrastra la carpeta de tu proyecto, por ejemplo WEB3D a Visual Studio Code y listo

7. Conceptos Clave para Obsidian

• .js vs .jsx: En Vite, usa siempre .jsx para componentes de React con 3D.
• node_modules: Nunca se sube a la nube. Se regenera con npm install.
• npm run build: Comando para generar la versión final optimizada (carpeta dist) que solo pesa unos pocos MB para subir a la web.

📱 Visualización en Dispositivos Móviles (Network)

Para ver tu proyecto 3D en un celular o tablet dentro de la misma red Wi-Fi, debes "exponer" el servidor local de Vite.

1. El comando de exposición

Si tienes tu servidor corriendo páralo, con Ctrl+C un par de veces y vuelvelo a correr pero con el siguiente comando:

npm run dev -- --host

2. Cómo encontrar la URL

Una vez ejecutado el comando, la terminal mostrará dos direcciones:

• Local: http://localhost:5173 (Para tu PC).
• Network: http://192.168.X.XX:5173 ⬅️ Esta es la que debes usar en tu celular.

3. Requisitos para que funcione

1. Misma Red: El celular y la PC deben estar conectados al mismo Wi-Fi.
2. URL Exacta: Debes escribir la IP y el puerto (ej. :5173) en el navegador del móvil.
3. Firewall: Si no carga, es posible que el Firewall de Windows esté bloqueando la conexión. (Suele pedir permiso la primera vez).

4. Configuración Permanente (Opcional)

Si quieres que el proyecto siempre esté disponible para tu celular sin escribir comandos extra, edita el archivo package.json:

JSON

"scripts": {
  "dev": "vite --host"
}

Con este cambio, solo necesitarás escribir npm run dev y la dirección Network se activará sola.

En caso no funcione!

1. abre la aplicación "Permitir un aplicación a través del firewall de windows"
2. darle a Cambiar la configuración (pide permiso de administrador)
3. buscar el o los que digan Node.js JavaScript Runtime
4. marcar todos los checks a la izquierda y derecha
5. dar aceptar, volver a probar, ya debería estar