Nodes/WAS Node Suite v3/Three Custom Material
ComfyUI Node Runs on cloud

Three Custom Material

Toon, matcap and every other shader, via a return statement

By WASasquatch·Created 3 years ago·Updated 4 days ago· 1,844
Three Custom Material
  • texture1
  • texture2
  • texture3
  • texture4
  • material
javascriptreturn new THREE.MeshStandardMaterial({color: "#ffffff", roughness: 0.35, metalness: 0.1});

Three Standard Material gets you a long way, and then you want the look it can't do - a toon shading band, a matcap, a flat lambert. That's what Three Custom Material is for: a javascript body that returns any material class three.js knows, with THREE in scope. Want a toon shader? return new THREE.MeshToonMaterial({color: "#ff8800"}); Done. A matcap is one line with a map wired in. A depth or lambert material is the same story.

The genuinely clever bit is how textures arrive. The node takes up to four optional THREE_TEXTURE inputs, and whatever you wire in becomes texture1 through texture4 inside your body, matched by slot. So a matcap - a material defined almost entirely by its map - is:

return new THREE.MeshMatcapMaterial({ map: texture1 });

Wire a texture image in, write that body, and the surface picks up the picture. That wired-texture handoff is what makes the node usable rather than academic, because most of the materials the built-in nodes don't cover are exactly the ones that need a map.

The default body gives you a plain standard material to start from (roughness 0.35, metalness 0.1), and the material output feeds the material socket on Three Mesh like any other surface. This node is the material half of a family - Three Custom Geometry for shapes, Three Custom Object for whole scene objects - and it shares their one non-negotiable: the JavaScript runs in your browser when the viewer loads, with the reach of any frontend extension. Only run workflows whose custom code you trust, and don't hand one of these scenes around like it's inert data. Three Compile will even bake your custom material's code into the standalone page it exports, code and all.

For the workflow, this is the node to reach for when a style guide says "the product should look cell-shaded" and a standard material physically cannot. It's overkill for ordinary PBR surfaces - that's what Three Standard Material is for - but when the built-ins hit their ceiling, this is a small, well-lit door out.

Installing it

Part of WAS Node Suite v3. ComfyUI Manager: search WAS Node Suite v3, or:

cd ComfyUI/custom_nodes
git clone https://github.com/WASasquatch/was-node-suite-comfyui.git

Restart; needs ComfyUI 0.14.0+ / Python 3.10+. Nothing installs. If the Three menu is absent, set features.threejs: true in <ComfyUI user dir>/was-node-suite/config.yaml.

If it errors

Your body must return a material - usually with new, since you're constructing an instance. Errors surface when the browser viewer loads, not when you queue the graph. And if a wired texture isn't appearing, check it's actually a THREE_TEXTURE-typed output (from the suite's texture nodes) and that you're using the matching texture1-texture4 name.

CategoryWAS Suite/Three

Inputs (5)

NameTypeDefaultDescription
javascriptSTRINGreturn new THREE.MeshStandardMaterial({color: "#ffffff", roughness: 0.35, metalness: 0.1});A body returning a material, as `return new THREE.MeshToonMaterial({map: texture1});`.
texture1optTHREE_TEXTUREA texture reachable in the body as `texture1` through `texture4`, by the slot it fills.
texture2optTHREE_TEXTUREA texture reachable in the body as `texture1` through `texture4`, by the slot it fills.
texture3optTHREE_TEXTUREA texture reachable in the body as `texture1` through `texture4`, by the slot it fills.
texture4optTHREE_TEXTUREA texture reachable in the body as `texture1` through `texture4`, by the slot it fills.

Outputs (1)

NameTypeDescription
materialTHREE_MATERIALThe surface the code returned, for the material socket on Three Mesh.