Three.js - Почему тени отображаются только на небольшой территории

Question

Я импортировал модель и обнаружил, что тень отображается только на небольшой области (зеленая область на рисунке).Что я могу сделать, чтобы все объекты показывали свою тень.

Вот мой код.

light = new THREE.DirectionalLight( 0xffffff );
light.position.set( 1, 1, 1 );
light.castShadow = true;
light.shadow.camera.near = 0.01; // same as the camera
light.shadow.camera.far = 1000; // same as the camera
light.shadow.camera.fov = 50; // same as the camera
light.shadow.mapSize.width = 2048;
light.shadow.mapSize.height = 2048;
scene.add( light );

Спасибо !!

РЕДАКТИРОВАТЬ:

Я добавляю gui, чтобы изменить light.shadow.camera.top / light.shadow.camera.bottom / light.shadow.camera.left / light.shadow.camera.right, но ничего не происходит.

var gui = new dat.GUI();
gui.add( light.shadow.camera, 'top' ).min( 1 ).max( 100000 ).onChange( function ( value ) {
    light.shadow.camera.bottom = -value;
    light.shadow.camera.left = value;
    light.shadow.camera.right = -value;
});

Answer 1

Это происходит потому, что направленное освещение использует OrthographicCamera для рисования карты теней для отбрасывания теней. Если есть объекты вне поля зрения этой камеры, она не сможет рассчитать их тени и будет иметь эффект, который вы видите за пределами зеленой рамки. Если вы хотите расширить область, охватываемую этой камерой, вы можете изменить свойства .left .right .top .bottom этой теневой камеры, чтобы охватить всю вашу сцену. Я использую коробку из 100 единиц в приведенном ниже примере;

var side = 100;
light.shadow.camera.top = side;
light.shadow.camera.bottom = -side;
light.shadow.camera.left = side;
light.shadow.camera.right = -side;

... но вы можете изменить размеры на то, что вам нужно. Имейте в виду, что .fov ничего не делает в вашем примере кода, потому что ортокамеры не используют свойство поля зрения.

Answer 2

Хорошо, было бы здорово, если бы вы могли показать мне живой пример вашего кода, как я исправил это ранее для проекта в boxelizer.com

Проблема может быть решена путем изменения свойств light.shadow.camera.left, right, bottom и top , как предлагалось ранее, однако мы не сможем увидеть эффективную площадь нашей тени может быть, и, следовательно, мы можем быть очень близки к исправлению, но не на всех. Я предлагаю использовать помощника на мгновение только для того, чтобы увидеть эффективную область тени вашего света с:

var shadowHelper = new THREE.CameraHelper( light.shadow.camera );
scene.add( shadowHelper );

Вы также можете увидеть весь код, который я использовал в ссылке, на которую я ссылался.

Answer 3

Вот функция, которую я использую для установки размеров shadowMap и зоны покрытия:

//sz is the size in world units that the shadow should cover. (area)
// mapSize is the width,height of the texture to be used for shadowmap (resolution)
    var setShadowSize=(light1, sz, mapSz)=>{
        light1.shadow.camera.left = sz;
        light1.shadow.camera.bottom = sz;
        light1.shadow.camera.right = -sz;
        light1.shadow.camera.top = -sz;
        if(mapSz){
            light1.shadow.mapSize.set(mapSz,mapSz)
        }
    }
    setShadowSize(myLight,15.0,1024);