uniform
A fundamental node for passing any static or dynamic data, such as colors, numbers, or textures, from JavaScript (CPU) to the shader (GPU).
Core Advantages
It enables dynamic and configurable materials by providing a simple, type-safe way to control shader parameters from JavaScript at runtime without recompiling the shader.
Common Uses
Passing dynamic values controlled by JS (e.g., time, mouse position) to drive animations.
Defining configurable material properties (e.g., color, roughness) for scenarios like product configurators.
Passing textures (e.g., diffuse maps, normal maps) to the shader for sampling.
How to adjust
Adjust by modifying its .value property in JavaScript. For example, create a vec2 uniform, continuously update its value with mouse coordinates in JS, and then use it in the shader to drive a spotlight effect that follows the mouse.
Code Examples
1// Create a uniform in JS to hold a color
2const myColorUniform = uniform(new THREE.Color(0xff0000));
3material.colorNode = myColorUniform;
4
5// In the render loop, directly modify the .value property
6myColorUniform.value.setHSL(hue, 1.0, 0.5);