javascript - 带有大量噪点的平面阴影三防材质渲染

Question

当我用平坦的阴影材质渲染极其陡峭的面并以陡峭的角度查看它时，我遇到了三个问题。这是我机器上的样子：

此处的示例场景 ( https://codepen.io/anon/pen/dQEzmG?editors=1010 ) 演示了该问题。它由一个经过修改的平面组成，因此它有一个从z = 0到它的坡道z = -100000，并用平面阴影 phong 材料渲染。

var geometry = new THREE.PlaneBufferGeometry(10, 10, 10, 10);
var material = new THREE.MeshPhongMaterial({ side: THREE.DoubleSide, color: "#ffffff", flatShading: true });
var plane = new THREE.Mesh( geometry, material );
plane.rotation.set(Math.PI/2, 0, 0);

var posArr = geometry.attributes.position.array;
for (var i = 0; i < posArr.length / 2 - 3 * 6; i += 3) {
    posArr[i + 2] = 100000;
}
geometry.computeVertexNormals();

我只在我的 Macbook Pro 笔记本电脑上看到这个：

• 铬 70.0.3538.1210 64 位
• OSX 10.13.6
• 英特尔酷睿 i7
• Radeon Pro 560 4096 MB

我知道三中的平面阴影使用OES_standard_derivatives扩展，所以我不确定它是否与扩展中的限制有关。这是一个已知的问题？三号有问题吗？还是平台有问题？

谢谢！

标签： javascriptthree.js