Chrome/MacOS 中 Three.js 阴影的质量? [英] Quality of Three.js shadow in Chrome/MacOS?

问题描述

我正在试验一个简单的 Three.js 场景(这方面的新手).我正在使用 Three.js WebGLRenderer 并设置了一个平面、一个投射阴影的立方体和一个定向光源.结果如图所示.

I am experimenting with a simple Three.js scene (novice in this area). I am using the Three.js WebGLRenderer and have set up a plane, a cube that casts shadows and a directional light source. The result is shown in the image.

我该怎么做:

1.提高阴影渲染的质量?
2. 去掉锯齿边缘?

我已将抗锯齿设置为 true 但它似乎在任何浏览器中都没有帮助...

I have set the antialiasing to true but it does not seem to help in any browser ...

renderer = new THREE.WebGLRenderer({ antialias: true});

renderer = new THREE.WebGLRenderer({ antialias: true});

推荐答案

您可以做两件事.首先设置一个渲染器属性

You can do two things. First set a renderer attribute

renderer.shadowMapType = THREE.PCFSoftShadowMap; // options are THREE.BasicShadowMap | THREE.PCFShadowMap | THREE.PCFSoftShadowMap

然后您还可以通过以下方式增加灯光的阴影贴图大小:

and then you can also increase the shadowmap size of your light with:

light.shadowMapWidth = 1024; // default is 512
light.shadowMapHeight = 1024; // default is 512

现在是 r104 版本:

And now r104 version :

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

这篇关于Chrome/MacOS 中 Three.js 阴影的质量?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！