Ir al contenido
learn
Menú global

three.js para desarrolladores C#/Java — Misión

Por qué aprendo esto

Sección titulada «Por qué aprendo esto»

Guitar Alchemist dibuja con three.js un mástil de guitarra en 3D, un océano, un sistema solar y unas cuantas decenas de escenas más. Algunas usan el nuevo WebGPURenderer y su lenguaje de shading, TSL; la mayoría todavía usa WebGLRenderer y GLSL escrito a mano. Como desarrollador C#, conozco el Viewport3D de WPF y un poco de MonoGame. three.js se parece a ambos al principio: un grafo de escena, una cámara, mallas y luces. Luego los detalles cambian: el renderer puede elegir WebGPU o WebGL sin avisarme, un color hexadecimal no es el número que recibe el shader, la intensidad de una luz está en candelas, y un modelo llega como un archivo glTF que necesita sus propios decodificadores.

Este curso aprende three.js tal como es en septiembre de 2026, no como lo muestran la mayoría de los tutoriales: WebGPURenderer primero, setAnimationLoop en lugar de requestAnimationFrame, TSL en lugar de ShaderMaterial, importaciones de three/addons, Timer en lugar de Clock, HDRLoader en lugar de RGBELoader.

A quién va dirigido este curso

Sección titulada «A quién va dirigido este curso»

Te manejas bien con C# o Java, y has seguido JavaScript para desarrolladores C#/Java y TypeScript para desarrolladores C#/Java, o conoces su contenido: módulos ES y npm, async y await, clases, tipos estructurales. La lección 9 usa React; el curso de React (Vite) cubre lo que necesita. No hace falta experiencia previa en 3D, pero si has usado WPF 3D, MonoGame o JavaFX 3D, cada lección dice qué se puede aprovechar.

three.js en una tabla

Sección titulada «three.js en una tabla»
WPF 3D MonoGame JavaFX 3D three.js
Dónde dibuja un elemento Viewport3D la ventana del juego una SubScene un <canvas> creado por el renderer
Grafo de escena ModelVisual3D, Model3DGroup ninguno: dibujas cada modelo Group, MeshView Scene, Group, Mesh
Ejes dextrógiros, Y hacia arriba matrices dextrógiras, Y hacia arriba Y hacia abajo dextrógiros, Y hacia arriba
Geometría MeshGeometry3D buffers de vértices e índices TriangleMesh BufferGeometry
Materiales DiffuseMaterial, SpecularMaterial BasicEffect, efectos personalizados PhongMaterial basados en la física: MeshStandardMaterial, materiales de nodos
El bucle retenido: WPF renderiza cuando algo cambia Update y Draw, llamados por Game AnimationTimer renderer.setAnimationLoop(callback)
API de GPU Direct3D 9 DirectX u OpenGL Direct3D u OpenGL, a través de Prism WebGPU, o WebGL 2 como alternativa
Shaders ninguno efectos HLSL ninguno TSL, compilado a WGSL o GLSL
Archivos de modelo nada integrado el content pipeline (FBX, X) nada integrado glTF 2.0 con GLTFLoader

Los datos

Sección titulada «Los datos»

Las escenas propias del curso son pequeñas y deterministas: un cubo, un trozo de mástil de guitarra hecho de primitivas, parches de color, diez esferas en un estudio HDR y un metrónomo escrito como archivo glTF por un script. Cada página informa de lo que hizo el renderer, y un script de Playwright lo lee, así que los números de las lecciones vienen de una ejecución, no de la memoria.

El código real es GuitarAlchemist/ga en el commit 05c8eda, sobre todo ThreeFretboard.tsx, su mástil de guitarra en 3D. Los componentes React de GA piden three.js 0.180, seis versiones por detrás de este curso. Las lecciones citan el código de GA donde ilustra bien un punto, incluido lo que cambió desde r180; los hallazgos están en el diario.

Demos en vivo

Sección titulada «Demos en vivo»

Cada página de lección funciona en este sitio, en un marco plegado bajo su captura, con un panel Try it que fija los parámetros de la página, los que usan los ejercicios. Cinco escenas completas reúnen las lecciones sobre una guitarra entera modelada en código: una guitarra para tocar (lección 5), voicings de acordes en el diapasón de GA (lección 13), un estudio con sombras, entorno HDR y bloom (lección 7), púas lanzadas sobre la guitarra con Rapier (lección 10) y la guitarra en VR (lección 11). Un marco no carga nada hasta que se despliega. El build entero pesa 9.4 MB, sobre todo los dos builds de Rapier en WebAssembly.

Al final de este curso, sabré

Sección titulada «Al final de este curso, sabré»
  • configurar un proyecto three.js con Vite y TypeScript, y explicar qué hace WebGPURenderer cuando falta WebGPU;
  • construir escenas con geometrías, materiales basados en la física y luces, con sombras, y leer renderer.info para saber qué se le pidió a la GPU;
  • mantener los colores correctos de la textura a la pantalla: espacios de color, tone mapping y entornos HDR;
  • cargar modelos glTF con sus animaciones, y elegir entre la compresión Draco, meshopt y KTX2;
  • seleccionar objetos y mover la cámara, escribir materiales y efectos en TSL, y aplicar posprocesado a una escena;
  • dibujar miles de objetos con instancing, BatchedMesh y niveles de detalle, y medir el resultado;
  • escribir las mismas escenas con React Three Fiber, añadir física con Rapier y un modo WebXR;
  • probar código 3D en CI, y saber qué puede y qué no puede verificar un navegador headless sin GPU.

Plan

Sección titulada «Plan»
# Lección Ya conoces
1 Escena, cámara, renderer Viewport3D y PerspectiveCamera de WPF, el bucle Game de MonoGame, SubScene de JavaFX
2 Geometrías, materiales, luces y sombras MeshGeometry3D, DiffuseMaterial, BasicEffect, luces direccionales y puntuales
3 Color, tone mapping y entornos HDR sRGB, Color en WPF o JavaFX, fotos HDR
4 Cargar modelos glTF y animaciones el content pipeline de MonoGame, los storyboards de WPF, AnimationTimer
5 Interacción, Raycaster y controles de cámara hit testing en WPF, VisualTreeHelper.HitTest, PickResult de JavaFX
6 TSL y materiales de nodos efectos HLSL, grafos de shaders
7 Posprocesado con RenderPipeline render targets, pixel shaders
8 Rendimiento, medido: instancing, BatchedMesh, LOD, frustum culling dibujo instanciado, profilers
9 React Three Fiber y drei data binding de WPF, componentes Blazor o React
10 Física con Rapier en WebAssembly BEPUphysics, motores de física en juegos
11 WebXR Windows Mixed Reality, OpenXR
12 Pruebas y CI: renderizado headless, capturas de pantalla comparadas, y sus límites automatización de UI, pruebas de snapshot
13 Proyecto: el mástil de guitarra 3D de GuitarAlchemist, portado a WebGPU las lecciones anteriores
14 Laboratorio: Guitar Alchemist en 3D, quince experimentos medidos las lecciones 8, 9, 10, 11 y 13
— Diario

El curso está completo: las 13 lecciones se escribieron y comprobaron el 16 de septiembre de 2026. La lección 14, un laboratorio de quince experimentos medidos sobre las necesidades 3D de Guitar Alchemist, se añadió el 17 de septiembre. Lo que queda por probar en hardware real, un casco de realidad virtual, un teléfono, WebGPU en Linux, figura en el diario.

Recursos

Sección titulada «Recursos»