在ThreeJS中阴影的奇怪行为 [英] Strange behaviour of shadowing in ThreeJS

查看:917
本文介绍了在ThreeJS中阴影的奇怪行为的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

所以我有一个threeJS场景,我添加了一些球体(多材质)。我还添加了一个方向灯:

so I have a threeJS scene, and I have some spheres (multimaterial) added. I have also a directional light added :

this.light = new THREE.DirectionalLight( 0xFFFFFF, 1 );
this.light.position.set( 2, 10, 2 );  
this.light.castShadow = true;
this.light.shadowMapSoft = true;
this.light.shadowCameraVisible = true;
this.light.shadowCameraNear = 1;
this.light.shadowCameraFar = 10; 
this.light.shadowBias = 0.0009;
this.light.shadowDarkness = 0.3;
this.light.shadowMapWidth = 1024;
this.light.shadowMapHeight = 1024;
this.light.shadowCameraLeft = -8;
this.light.shadowCameraRight = 8;
this.light.shadowCameraTop = 8;
this.light.shadowCameraBottom = -8;

因此,当用户添加或删除球体时,执行改造阴影相机视锥体的功能就像这个:

So when the user adds or removes spheres, a function which executes "reforms" the shadow camera frustum like this :

    this.light.position.set( posV.x, posV.y, posV.z); 

    this.light.shadowCamera.far = l2*3;
    this.light.shadowCamera.left = -l2;
    this.light.shadowCamera.right = l2;
    this.light.shadowCamera.bottom = -l2;
    this.light.shadowCamera.top = l2;           
    this.light.shadowCamera.updateProjectionMatrix(); 

以上代码的可能结果如下:

and a possible result of the above code is this :

上述确切情况的另一个方面:

an other aspect of the exact situation of above :

我已设置相机的视锥,能够看到它,所以就是这样。问题是无缘无故产生的阴影(由红色箭头指出)。当时场景中没有其他物体,并且球体完全位于相机平截头体内。

I have set the camera's frustum visibility to on, so there it is. The problem is the shadowing that is generated for no reason (pointed out by the red arrows). No other objects are in the scene at that moment and the spheres are fully inside the camera frustum.

更新球体后,这些阴影中的问题很常见(添加/删除),有没有人知道它?

Problems in shadowing like these are common after updating the spheres (add/remove), does anybody have any idea about it?

我使用 three.js r72
谢谢!

I use three.js r72 , thanks!

推荐答案

根据您的评论,您看到的是自阴影文物。

Based on your comments, what you are seeing is self-shadowing artifacts.

您需要调整 shadowBias (现在称为 shadow.bias )参数。

You need to adjust the shadowBias ( now called shadow.bias ) parameter.

改变阴影偏差导致 peter-panning (过多的正面偏见)和自我遮蔽的文物(过多的负面偏见)。

Varying the shadow bias results in a trade-off between "peter-panning" (too much positive bias) and self-shadowing artifacts (too much negative bias).

three.js r.73

three.js r.73

这篇关于在ThreeJS中阴影的奇怪行为的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆