threejs

• GameDev
• Proyectos
• shaders
• p5js

Recursos WebGL / Three.js (videos)

• Animation system – three.js docs
• Learn Three.js by Building 5 Projects – YouTube
• Multiplayer Game in TypeScript + Three.js + Rogue Engine + Croquet – YouTube
• Pathfinding para NPCs – ThreeJS Games – YouTube

Ejemplos y Repositorios

• Shader Tutorials – SuboptimalEng
• Three.js Tutorials – SuboptimalEng
• Three.js Games – experimentos

Conceptos Fundamentales de Three.js

• Escena (THREE.Scene)
  Estructura base donde se colocan objetos, luces, cámaras y helpers. Es el “mundo” del proyecto.
• Cámara (THREE.PerspectiveCamera o THREE.OrthographicCamera)
  Controla el punto de vista. Variar FOV y clipping planes influye en la percepción de profundidad.
• Renderer (THREE.WebGLRenderer)
  Traductor hacia WebGL. Ajustar pixel ratio, antialias y sombras es clave para rendimiento.
• Objetos 3D (THREE.Mesh)
  Combinan geometría + material. Pueden ser primitivos, custom geometry, GLTF, etc.
• Materiales
  Phong, Standard, Physical, ShaderMaterial. Definen cómo interactúa la luz, metálico/roughness, normal maps, etc.
• Luces
  Ambient, Directional, Point, Spot, Hemisphere. Impactan realismo y rendimiento.
• Animaciones
  Animadores basados en clips, keyframes, morph targets, esqueletos (skinning).
• Carga de Assets
  GLTFLoader, TextureLoader, CubeTextureLoader. Optimización de compresión (KTX2, Draco).
• Interacción y Eventos
  Raycaster para clics, detección de colisiones, selección de objetos.
• Postprocesado
  EffectComposer, Bloom, SSR, DOF, LUTs. Permite estilos cinemáticos o estilizados.

Patrones y Workflows Recomendados

• Estructura limpia del proyecto
  Separar: escena, render, animación, input, loaders, UI.
• Loop de Render
  Actualizar animaciones, físicas, input y render en requestAnimationFrame.
• Uso de módulos
  Importaciones ESModules desde three/examples/jsm/....
• Optimización WebGL
  Reducir draw calls, usar instancing, geometrías compartidas, texturas comprimidas.
• Debugging
  Usar lil-gui, stats.js, helpers de luz/cámara, grid, axes helpers.
• Compatibilidad
  Testear en distintos dispositivos, evitar materiales demasiado costosos en móviles.
• Pipeline GLTF
  Exportar desde Blender con escalado correcto, animaciones, materiales PBR.

Omnivore threejs

type: list
name: "Notas con #threejs en Omnivore"
order:
  - property: date_saved
    direction: desc
columns:
  - file.name
  - date_saved
filters:
  and:
    - file.inFolder("Omnivore")
    - file.hasTag("threejs")
views:
  - type: table
    name: Table
    sort:
      - property: file.mtime
        direction: DESC
    columnSize:
      file.name: 641