16

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

我如何能:

1.提高阴影渲染的质量?
2.摆脱锯齿状边缘?

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

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

在此处输入图像描述

4

2 回答 2

29

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

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

然后您还可以使用以下方法增加灯光的阴影贴图大小:

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

现在 r104 版本:

light.shadow.mapSize.width = 1024;
light.shadow.mapSize.height = 1024;
于 2013-05-25T18:19:03.207 回答
10

您可以做的另一件事是增加接收阴影的对象段的宽度/高度。

例如,改变这个:

var plane = new THREE.PlaneGeometry( 1000, 1000, 10, 10);

这样:

var plane = new THREE.PlaneGeometry( 1000, 1000, 100, 100);

结果:

像素化 平滑

于 2018-10-09T18:00:52.957 回答