为什么在three.js 中我的材质上有阴影？答案

【问题标题】：Why are shadows stepping across my materials in three.js?为什么在three.js 中我的材质上有阴影？
【发布时间】：2017-09-06 11:15:12
【问题描述】：

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

我看到的是对模型的渐变步进效果，就好像模型由许多子模型组成，每个子模型都有自己的轻微阴影。

下面是效果截图：

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

一些不同的代码 sn-ps - 这个场景发生了很多事情，所以我试图只强调重要的部分：

相机和定向光源：

// 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;

我玩过各种renderer 设置，但运气不佳。

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

【问题讨论】：

这通常表示自我阴影。见this answer。如果您需要帮助，请先升级到当前的 three.js 版本。

标签： javascript 3d three.js light

【解决方案1】：

这可能是由于阴影贴图的分辨率较低，默认为512 * 512。

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

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

但是，它会大大增加计算时间，从而导致帧率下降。

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

【讨论】：