Strange Threejs [r84] shadows

164 Views Asked by At

I have a little Threejs scene with a railway light. Model was created and exported with Blender.

Here is my code:

var scene, camera, renderer, ambientLight, directionalLight, spotLight, model, progress;
var stats, toolbox, loader;
var SCREEN_WIDTH, SCREEN_HEIGHT; 

function init(model) {    
    
    //vars
 container = document.getElementById('webGL_container');    
    toolbox = document.getElementById('toolbox');    
    loaderDiv = document.getElementById('loader');
 
    //scene
    scene = new THREE.Scene(); 
    scene.fog = new THREE.FogExp2( 0x929599, 0.001 );
 
    //progress
    progress = new THREE.LoadingManager();
    progress.onProgress = function ( item, loaded, total ) {
        //console.log( item, loaded, total );
    };
    
    //loader
    loader = new THREE.ObjectLoader(progress);
    loader.load(model, function (obj) {
        // executes when scene is loaded
        scene.add(obj);  
        loaderDiv.style.display = 'none';
  cameraControls.enabled = true; 
    });
 
 //camera      
    camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 150);
    camera.position.set(0,10,-10);
 
 //light
 ambientLight = new THREE.AmbientLight( 0xffffff, 0.1 );
 scene.add(ambientLight);
 
 directionalLight = new THREE.DirectionalLight( 0xffffff, 1.1);
 directionalLight.position.set( 100, 200, 150 );    
 scene.add(directionalLight); 

 spotLight = new THREE.SpotLight( 0xFFAA88 );
 spotLight.position.set( 10, 25, 15);
 spotLight.castShadow = true;
 spotLight.shadow.bias =  0.001;
 spotLight.shadow.camera.near = 10;
 spotLight.shadow.camera.far = 100; 
 spotLight.shadow.mapSize.width = 2048;
 spotLight.shadow.mapSize.height = 2048;
 scene.add( spotLight );  
 var helper = new THREE.CameraHelper( spotLight.shadow.camera ); 
 scene.add( helper );
       

    //renderer
    renderer = new THREE.WebGLRenderer({
        antialias: true, alpha: true
    });    
    renderer.setPixelRatio( window.devicePixelRatio );
 renderer.setSize(window.innerWidth, window.innerHeight); 
 renderer.setClearColor( scene.fog.color ); 
 renderer.gammaInput = true;
 renderer.gammaOutput = true;
 renderer.setFaceCulling(THREE.CullFaceNone);
 //shadow
 renderer.shadowMap.enabled = true;
 renderer.shadowMap.type = THREE.PCFSoftShadowMap;
  
 //
 container.appendChild(renderer.domElement);  
    
    //controls
    cameraControls = new THREE.OrbitControls( camera, renderer.domElement );
    cameraControls.target.set(0, 0, 0);
    cameraControls.enablePan = true;
    cameraControls.enabled = false;
    
    //stats      
    stats = new Stats();   
    toolbox.insertBefore(stats.domElement, toolbox.children[1]);    
    animate();
}
    
//render
function render() {
    renderer.clear();
    renderer.render(scene, camera);    
}  

//animate
function animate() {    
    stats.begin();
    requestAnimationFrame(animate);
    render();    
    cameraControls.update(); 
    stats.end();
}

//resize scene
window.onresize = function () {
    SCREEN_WIDTH = window.innerWidth;
    SCREEN_HEIGHT = window.innerHeight;
    camera.aspect = SCREEN_WIDTH / SCREEN_HEIGHT;
    camera.updateProjectionMatrix();
    renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
};

I'm a noob in posting runtime code on JSFiddle, so full-working code is here: https://drive.google.com/open?id=0BwCG1m_fANZmb0UxYVE5OUlfYzQ

What i get, running this code [screenshot]: Strange shadows

I tried playing with spotLight.shadow.bias = 0.001;, but nothing helped.

If the object doesn't have any faces inside, it looks less uglier (upper cap of light), but if it does (lower cap of light), it looks just horrible.

In Blender i tried to flip, recalculate object's normal, but still no use.

Many thanks in advance, sorry for code in GDrive.

0

There are 0 best solutions below