我有一个使用three.js渲染3D模型的场景。我正在使用
我看到的是模型上出现了梯度步进效果,就好像模型由许多子模型组成,每个子模型都有自己轻微的阴影被投射。
下面是该效果的屏幕截图:
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 );
Material 是一个 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版本。