Subtractive color

Questions
1

Capture d’écran du 2025-04-09 11-57-54
Capture d’écran du 2025-04-09 11-57-541002×673 17.4 KB

Hello !
I’m new to threeJS, im trying to do a subtractive color example like the screenshot. But even with opacity a mesh block all the light. By doing like:

const mat = new THREE.MeshStandardMaterial({
  color: color,
  roughness: 0,
  transmission: 0.5, // Rend la surface "transparente"
  transparent: true,
  opacity: 0.5,
  thickness: 0.5,
  side: THREE.DoubleSide,
});

Also another example (same result) with another material

const mat = new THREE.MeshBasicMaterial({
  color: color,
  transparent: true,
  opacity: 0.5,
  side: THREE.DoubleSide,
});

I was thinking to make a filter. I also try MeshPhysicalMaterial. Do you know any tricks to do a Subtractive color or to create a material that filter white color ?

2

Make sure the background object doesn’t have .transparent set… to make it go into the solid (first) rendering pass.

Check out the material.blending modes:

examples:

3

Do you mean you want the light going through one of those coloured meshes to behave as though it’s been filtered by the mesh’s colour?

That’s not possible out of the box.

It will require at minimum some amount of shader coding.

For the scene in your screenshot, where there’s a single light source, where the light is filtered by 3 planes, and illuminates a single plane, this is how you could achieve it.

You would need to write a shader for that final plane. The shader would do this:

The vertex shader would pass world positions of vertices to the fragment shader.

The fragment shader would trace a line between a pixel’s world position and the light’s position. It would calculate if any of the filter planes are in the way, and depending on the result of that calculation + the distance from the light to the pixel, it would then be able to calculate the color for that pixel.

EDIT: or blending modes could work as mentioned by manthrax, depending on what exactly you’re trying to achieve

1 Like
4

Oh yeah, I think you may be right that OP wants to project colored lights. Oof.

5

There is also this which I haven’t used before but you may be able to set a texture in here: three.js docs and have it project.

6

Hi ! Thanks for the response. Yes you understood correctly im trying to “change” the light color with the mesh’s colors (cyan magenda yellow).

I will try to use a shader like you say to create the desired color.

I try the blending THREE.SubtractiveBlending , interesting but look like not the thing i was looking for.

1 Like
7

You can set a blending to THREE.SubtractiveBlending or THREE.MultiplyBlending. And opacity is better to set to 1, but transparent must still be true. It is better to use MeshBasicMaterial for filter, but if you want to add some reflections, you can add to the scene a mesh with the same geometry and MeshStandardMaterial also transparent with blending: THREE.AdditiveBlending. To prevent z-fighting you can set depthWrite: false for filter material.