Странные Тройки [r84] тени

У меня есть небольшая сцена Threejs с железнодорожным светом. Модель была создана и экспортирована с помощью Blender.

Вот мой код:

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);
};

Я новичок в публикации кода времени выполнения на JSFiddle, поэтому полный рабочий код здесь: https://drive.google.com/open?id=0BwCG1m_fANZmb0UxYVE5OUlfYzQ

Что я получаю, запустив этот код [скриншот]: странные тени

Я пытался играть с spotLight.shadow.bias = 0.001;, но ничего не помогло.

Если у объекта нет граней внутри, он выглядит менее уродливо (верхний предел света), но если он имеет (нижний предел света), он выглядит просто ужасно.

В Blender я пытался перевернуть, пересчитать объект нормально, но все равно бесполезно.

Заранее большое спасибо, извините за код в GDrive.

0 ответов

Другие вопросы по тегам