THREE.js flat shading but with shadows?

0
votes

I'm hoping to create a 1-bit or black-white colour effect with Three.js where all shadows (cast, received and self) are visible/black but all materials have flat white shading and blend with the (also white) background. I tried using THREE.MeshBasicMaterial but it doesn't like shadows and THREE.ShadowMaterial but it makes the material invisible and I need it to be there (but constantly 'flat'), like in this example:

enter image description here enter image description here

In terms of shadows, they should also behave in 1-bit fashion and only be solid (when over 50% gray?) or not visible.

Any ideas of how to achieve such an effect? Anyone has a shader to share?

My pen: http://codepen.io/znak/pen/bpxXrV?editors=0010

1
three.js

1 Answers

0
votes

The problem was actually very simple to solve by increasing light intensity:

sun = new THREE.DirectionalLight( 0xffffff, 1000 );

Example: http://codepen.io/znak/pen/bpxXrV