Currently, I am working on creating a city scene in Three.js and experimenting with lighting and shadows. Specifically, I am focusing on a single building that was modeled in 3DS Max, then exported to OBJ format, and converted using a Python converter through the command line.
Upon inspecting the model of the building, I noticed that it is a single object with self-shadowing effects. However, I encountered an issue where the lower part of the building, even when within the cast shadow, is still being illuminated by the yellow-white directional light. It seems that the illumination calculation is solely based on how much the surface faces the light source, without considering any obstructions between them.
I have been exploring methods to address this concern and achieve a more realistic outcome where the mesh obstructs the light from reaching objects behind it, including within itself. Should I delve into shaders or normal maps? Or is there another approach that would be more effective?
I came across a related question regarding light penetrating through meshes, but it lacked code snippets or examples for reference: Light penetrating through meshes. Apologies if this overlaps with existing discussions.
For those interested, the JSFiddle link showcasing the relevant code can be found here: http://jsfiddle.net/mrfolkblues/u01jwg53/
The crucial snippet of the code involves:
var T = THREE,
stats,
container,
camera = new T.PerspectiveCamera(40, window.innerWidth/window.innerHeight, 0.1, 200),
scene = new T.Scene(),
renderer = new T.WebGLRenderer({
antialias: true
}),
radius = 35, theta = 0, thetaDelta = 0, camtarget,
boundingbox, cube, plane, poly, polyMesh, sphere, line,
clock = new T.Clock();
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFShadowMap;
// initialization
(function(){
container = document.createElement( 'div' );
document.body.appendChild( container );
// setting up the renderer
renderer.setClearColor( 0xf0f0f0 );
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild(renderer.domElement);
var light = new T.DirectionalLight( 0xfff3cb, 1.25 );
light.position.set( 60, 25, 40 );
var light2 = new T.DirectionalLight( 0x204fae, 1.25 );
light2.position.set( -30, 40, 0 );
light.castShadow = true;
light.shadowDarkness = 0.33;
light.shadowCameraTop = 20;
light.shadowCameraRight = 20;
light.shadowCameraBottom = -20;
light.shadowCameraLeft = -20;
light.shadowCameraNear = 0;
light.shadowCameraFar = 200;
light.shadowMapWidth = 2048;
light.shadowMapHeight = 2048;
light.shadowBias = 0.0002;
scene.add( light );
scene.add( light2 );
var cube = createCube([0.5, 0.5, 0.5], [1.5, 10, 0]);
// positioning the camera
camera.position.x = 0;
camera.position.y = 20;
camera.position.z = radius;
camtarget = cube.position;
camera.lookAt( camtarget );
createPlane();
var loader = new T.JSONLoader();
var parsed = loader.parse(window.buildingModel);
var material = new T.MeshLambertMaterial( {
color: 0xffffff
} );
var object = new THREE.Mesh( parsed.geometry, material );
object.castShadow = true;
object.receiveShadow = true;
scene.add( object );
object.position.x = 30;
object.position.y = 0;
object.position.z = 15;
// adding event listeners
window.addEventListener( 'resize', onWindowResize, false );
render();
animate();
})();