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.