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

Question

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

https://i.st ack.imgur.com/hmzp2.png

Вот мой код

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

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

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

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

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

Answer 2

Это происходит потому, что направленное освещение использует 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 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);