Improve lighting in three.js scene

2
votes

I am rendering solid models using three.js, similar to how GitHub does for STL files. However, I'm having trouble setting up the lighting to look good. What I have right now looks like this:

enter image description here

The problem is that it only really looks good from some angles. From other angles there is bad contrast (planes that are perpendicular can be the exact same shade of grey).

The code I am using to achieve this is as follows:

light = new THREE.DirectionalLight(0xffffff, 1);
light.position.copy(camera.position);
scene.add(light);

and when the camera is moved, the light moves with it.

Any ideas how to improve this?

2
javascriptgraphics3dthree.js
Use a positional light rather than a directional light? Use multiple lights of different colors in different locations? These approaches would guarantee contrasts between non-coplanar surfaces. – Juan Tomas

2 Answers

3
votes

Here are some things you can try to improve the lighting of/on your rendered object:

Try a different material type:

Different materials will reflect light differently. It appears you may be using a Basic material. Try perhaps a using a Lambert material. The material is defined when you create your mesh. For example, first define your material:

var material4 = new THREE.MeshLambertMaterial({color: 0xffffff, vertexColors: THREE.FaceColors});

and then mesh your object:

var objectMesh = new THREE.Mesh(objectGeom, material4);

Documentation for the Lambert Material can be found here: http://threejs.org/docs/index.html#Reference/Materials/MeshLambertMaterial

Add additional lights:

Most objects look better with multiple light sources from different angles on different sides. Add new lights with with following:

lights[ 0 ] = new THREE.PointLight( 0xffffff, 1, 0 );
lights[ 0 ].position.set( 0, 200, 0 );
scene.add( lights[ 0 ] );

Notice that lights[] is an array which can contain multiple lights.

Add directional light helpers:

During development, it helps to add directional light helpers to see where the lights are coming from. For example:

directionalLightHelper[0] = new THREE.PointLightHelper(lights[0], 1);
scene.add( directionalLightHelper[0] );
1
votes

i myself prefer to use the Standard material

standardMaterial = new THREE.MeshStandardMaterial( {
                    color: 0xffffff,
                    metalness: 0.5,
                    roughness: 0.5,
                } );

and enable gammaOutput for the renderer, which makes overbright Areas look far better:

        renderer.gammaInput = true;
        renderer.gammaOutput = true;

from an artistic Point of view, it is best to have the light come from the top left of the Screen, so give it a bit of an Offset. then you can enable shadows, so the object always casts a shadow to the bottom right.