Integración con Three.js
Redactado por
Sebastian V. Fecha de publicación
12/05/2026
Tiempo de lectura
7 min
Tema
Shaders GLSL
Uniendo los dos mundos
Escribir Shaders puros en un archivo de texto es genial para aprender, pero en el mundo real, los vas a inyectar en mallas, luces y cámaras de Three.js. El componente principal que te permite hacer esto es THREE.ShaderMaterial.
El ShaderMaterial
Es un material como MeshBasicMaterial, pero te da una hoja en blanco. Le pasas un string de tu vertexShader, un string de tu fragmentShader y un objeto con tus uniforms.
Hackeando materiales existentes
¿Qué pasa si quieres que tu objeto mantenga las sombras y el sistema de luces hiperrealista de Three.js (MeshStandardMaterial) pero quieres hacer que los vértices se deformen como olas?
No puedes usar ShaderMaterial porque perderías todas las luces. El truco avanzado es usar onBeforeCompile. Es un método que te permite inyectar código GLSL dentro de los materiales predefinidos de Three.js justo antes de que se compilen hacia la tarjeta gráfica. Es un terreno oscuro pero inmensamente poderoso.
Consejo profesional
En lugar de escribir tus shaders como largas y feas strings en tu archivo JavaScript, usa bloques de backticks ` ` o impórtalos como archivos .glsl separados usando Vite (import vertexShader from './miShader.vert?raw'). Mantendrá tu código limpio e inteligente.
Errores comunes
El poder de onBeforeCompile
const material = new THREE.MeshStandardMaterial({
color: 0x57B0FB,
roughness: 0.4
});
// Inyectamos nuestro propio código antes de que Three.js lo compile
material.onBeforeCompile = (shader) => {
shader.uniforms.u_time = { value: 0 };
// Guardamos referencia para animarlo después
material.userData.shader = shader;
// Inyectamos variables en el Vertex Shader
shader.vertexShader = shader.vertexShader.replace(
'#include <common>',
`
#include <common>
uniform float u_time;
`
);
// Deformamos la geometría preservando luces!
shader.vertexShader = shader.vertexShader.replace(
'#include <begin_vertex>',
`
vec3 transformed = vec3(position);
transformed.y += sin(transformed.x * 5.0 + u_time) * 0.2;
`
);
};Una esfera con MeshStandardMaterial y luces direccionales. Conservamos el realismo de Three.js pero inyectamos una onda sinusoidal en sus vértices.
Practica lo aprendido
Hackea los materiales por defecto.