我有一个渲染3D模型的three.js场景.我正在使用DirectionalLight在该模型上投射阴影.

我所看到的是对模型的渐变踩踏效果,好像模型由许多子模型组成,每个子模型都有自己的轻微阴影.

以下是效果的屏幕截图：

为什么会发生这种情况,我该如何预防呢？

一些不同的代码片段 – 在这个场景上有很多事情发生,所以我试图突出重点部分：

相机&定向光源：

// Camera
camera = new THREE.PerspectiveCamera( 30, (window.innerWidth / window.innerHeight), 1, 10000 );
camera.position.x = 1000;
camera.position.y = 50;
camera.position.z = 1500;
scene.add( camera );

// LIGHTS
var lightFront = new THREE.DirectionalLight( 0xffffff, 0.7 );
lightFront.position.x = 120;
lightFront.position.y = 120;
lightFront.position.z = 150;
lightFront.castShadow = true;

lightFront.shadow.camera.left = -6;
lightFront.shadow.camera.right = 6;
scene.add( lightFront );

材料是THREE.Mesh,有：

material.normalScale = new THREE.Vector2( 1, 1 );
material.castShadow = true;
material.receiveShadow = false;
material.shininess = 100;

渲染器具有以下内容：

renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
renderer.shadowMap.soft = true;
renderer.shadowMap.bias = 0.0039;
renderer.shadowMap.darkness = 0.5;
renderer.shadowMap.width = 1024;
renderer.shadowMap.height = 1024;

我玩过各种渲染器设置而没有太多运气.

我正在运行three.js的第82版.

解决方法:

这可能是由阴影贴图的低分辨率引起的,默认情况下为512 * 512.

您可以使用以下语法增加它：

lightFront.shadow.mapSize.width = lightFront.shadow.mapSize.height = 1024;

但是,它会大大增加计算时间,从而导致帧速率下降.

根据您的目标设备有一个上限,可以找到here.