Three.js: Color Lens and color filters for camera

Every three.js has a camera within a scene. I would like to add a lens filter (such as ND -makes everything darker, yellow -makes everything abit more yellow used for old style, orange- adds abit orange used for danger, red etc. which are usually screw on the top of lenses) to my three.js camera. Just as regular camera that you can add or remove a filter I would like to let the user to enable or disable filter as well as choose the color of the filter.

My first solution was to do a “sphere object with transparency as filter and put the camera inside that sphere” so that it could apply to the whole scene and also using orbit-control camera was always inside the sphere filter regardless of the view:

let filterGeometry = new THREE.SphereGeometry(0.5, 15, 32); // camera near is 0.1, camera goes inside this sphere
let filterMaterial = new THREE.MeshBasicMaterial({color: default, transparent: true, opacity: 0.35}); }
let filterMesh = new THREE.Mesh(filterGeometry, filterMaterial);
filterMesh.visible = true;
filterMesh.position.x=proCamera.position.x;
filterMesh.position.y=proCamera.position.y;
filterMesh.position.z=proCamera.position.z;
proCamera.add(filterMesh); // (*) put camera inside filter

and then I could add enable/disable, and color change control of sphere to gui. BUT, here comes the problem: The sphere did not show at all. When I do not put the camera inside the sphere () everything works but as soon as I add () I get no sphere!
Any kind of help is appreciated. Thanks.

You should use post-processing for this, specifically color grading of some kind such as Hue/Saturation or a LUT (look up table).

I would use this library:

There’s a demo of color grading here:
https://vanruesc.github.io/postprocessing/public/demo/#color-grading

It all depends on what kind of effect you are looking for

My first solution was to do a “sphere object with transparency as filter and put the camera inside that sphere

That makes perfect sense if you just need color variation. In order to view the sphere try flipping the faces normals and double check geometry position. I have used planes instead of spheres (remember to aim the normal towards the camera). Relative positioning is easier if you 1) create the camera at scene origin, 2) create, position and parent the plane, and only then 3) move the camera to desired position.

For all the other lens-filtering effects, you are gonna get much better precision, customization and even physical magnitude control of all kind of different light phenomena if you take the postprocessing approach that @looeee is suggesting.

@Antonio Yes, I have added
side:THREE.DoubleSide
to it to have normals on both sides but still no luck. Camera is moving on a rig using tween and I guess have to “add sphere to the camera” so that camera does not go out of sphere by orbit-control.
@looeee is referring to the best solution but I guess it is over kill for a simple task. I am considering it too. If I can do it using sphere then I would be able to introduce several sphere to combine some o them (such as yellow and ND) like a real World :slight_smile: