Проблемы Shadows Distance в ThreeJS

В настоящее время я работаю с направленным светом для своей сцены. Маленький персонаж может передвигаться. Все тени работают. Но если я начну немного дальше работать с аватаром, тени на нем перестанут работать. Я думаю, что это может быть из-за угла света, но я не могу это изменить. Я могу нарисовать квадрат вокруг теневой/нетеневой области.

Вот мой код. Огромные числа были здесь для меня, чтобы проверить вещи

                const dirLight = new THREE.DirectionalLight( 0xffffff, 1 );
                dirLight.color.setHSL( 0.1, 1, 0.95 );
                dirLight.position.set( - 1, 1.75, 1 );
                dirLight.position.multiplyScalar( 30 );
                dirLight.distance = 1200;
                dirLight.focus = 1200;
                dirLight.angle = Math.PI / 1;
                scene.add( dirLight );

                dirLight.castShadow = true;

                dirLight.shadow.mapSize.width = 2048;
                dirLight.shadow.mapSize.height = 2048;

                const d = 100;

                dirLight.shadow.camera.left = - d;
                dirLight.shadow.camera.right = d;
                dirLight.shadow.camera.top = d;
                dirLight.shadow.camera.bottom = - d;

                dirLight.shadow.camera.far = 35000;
                dirLight.shadow.bias = - 0;

                const dirLightHelper = new THREE.DirectionalLightHelper( dirLight, 10 );
                scene.add( dirLightHelper );

Вот код земли, принимающей тени

const groundGeo = new THREE.PlaneBufferGeometry( 10000, 10000 );
                const groundMat = new THREE.MeshLambertMaterial( { color: 0xffffff } );
                groundMat.color.setHSL( 0.095, 1, 0.75 );

                const ground = new THREE.Mesh( groundGeo, groundMat );
                ground.position.y = - 33;
                ground.rotation.x = - Math.PI / 2;
                ground.receiveShadow = true;
                scene.add( ground );

Я повторно использовал огромную часть кода из примера ThreeJS с фламинго https://threejs.org/examples/?q=light#webgl_lights_hemisphere

Вот также ссылка на imgur, где я просто поместил картинку, чтобы увидеть тени https://imgur.com/a/MGrc5cw

Спасибо


light three.js shadow directional-light
person lagroumgroum    schedule 01.01.2021    source источник
comment
Я думаю, проблема не в вашем коде освещения, не могли бы вы добавить остальную часть кода, особенно поверхность, получающую тень? Я думаю, что происходит то, что ваш персонаж выходит за пределы поверхности пола, на которую попадает тень.   -  person jscastro    schedule 01.01.2021

Ответы (1)


arrow_upward
2
arrow_downward

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

Чтобы создать направленные тени, вы создаете ортогональную камеру и назначаете ее размеры с помощью .left, .right, .top, .bottom, в этом случае ваша камера имеет 100 в каждом направлении. Когда ваш персонаж выходит за эти 200 единиц, он оказывается за пределами теневой камеры и больше не получает теней.

Вы должны добавить CameraHelper к световой тени, чтобы вы могли видеть пространство в пределах ее усеченного обзора, как показано в примере кода DirectionalLightShadow

const helper = new THREE.CameraHelper( dirLight.shadow.camera );
scene.add( helper );

Может быть, вы могли бы сделать так, чтобы теневая камера следовала за персонажем, чтобы он всегда был внутри нее.

person Marquizzo    schedule 01.01.2021