Chrome / MacOS中Three.js影子的质量?

时间:2013-05-25 17:21:15

标签: three.js webgl antialiasing

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

我如何:

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

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

  

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

enter image description here

2 个答案:

答案 0 :(得分:24)

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

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;

答案 1 :(得分:5)

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

例如,更改此:

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

由此:

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

结果:

Pixelated Smoothed