colorNode and positionNode on one material
A wave moves along the plane and the colour runs from blue to orange. The console shows the CPU still sees a flat plane. No output because of the fallback warning line.
A node material describes its look as a graph of small operations: colorNode, positionNode, normalNode and more. three.js turns the graph into a shader for whichever backend runs, and a uniform() node changes without recompiling.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 3 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Make a MeshStandardNodeMaterial whose roughness goes from 0.1 at the left of a plane to 0.9 at the right.
Make the plane's colour pulse between orange and blue once per second with no JavaScript in the animation loop.
Explain it without notes
What is a node, and why is a node material described as a graph?
When does changing a node material cost a shader compile, and when is it free?
Console
Nothing logged yet.