Question

我有一个网格，我从3d studio max加载到three.js。我修改了three.js来为binormal数据保存另一个类型化数组。这一切似乎都很好，花花公子，直到涉及阴影。出于某种原因，阴影贴图是错误的，似乎它渲染了带有面的网格被翻转。

在此示例中，阴影正在地板上正确显示，因为渲染器具有

.shadowMapCullFace = THREE.CullFaceBack

http://dusanbosnjak.com/test/webGL/new/StojadinCeo/stojadinCeo.html

我可以在我的着色器上显示其他阴影，但是自我阴影会导致可怕的伪影，并且我的网格在其他网格上投射的阴影总是反转。

我已经尝试颠倒面部凹凸进入的顺序，（acb而不是abc），它会翻转面部。这会创建正确的阴影投射，但网格显示翻转。

我现在想做的是导出一个翻转的网格，并在shaderMaterial中反转剔除顺序，但是很好地找出为什么会发生这种情况。

我基本上将phong和shadow贴图着色器块与我所拥有的相关联。

修改的

这是一个更新的场景，其中包含一些阴影脚轮并在导入的网格上接收阴影

http://dusanbosnjak.com/test/webGL/new/StojadinCeo/stojadinCeo2.html

light = new THREE.SpotLight(0xaaaaaa);
light.position.set(10,10,10);

light.shadowCameraVisible = true;
light.shadowDarkness = .5;
light.castShadow = true; 
light.shadowCameraNear = 1;
light.shadowCameraFar = 250;
light.shadowCameraFov = 57;  
light.shadowMapWidth = 2048;
light.shadowMapHeight = 2048;  
scene.add(light);

其余网格只有receiveShadow和castShadow设置为true

阴影显示在shaderMaterial上（我复制了shadowfrag chunk）带有THREE.CubeGeometry（）的THREE.Mesh（）既可以投射阴影，也可以正确接收阴影，但是shaderMaterial网格投射的阴影会被反转。

我无法将此行隔离为50行代码，因为它是max的整个导入/导出过程。

我不明白为什么影子相机会将这个特定的网格渲染为倒置，而普通相机会正确渲染它，如果发生了什么？

您可以使用wasd缩小并移动汽车

Answer 1

除非您更改了three.js中的默认设置，否则只有背面投射阴影。解决方法是设置：

renderer.shadowMapCullFace = THREE.CullFaceBack;

或

renderer.shadowMapCullFace = THREE.CullFaceNone;

但这些选项可能导致其他问题。

最好的方法是确保每个网格都有深度。避免飞机，如汽车车顶。例如，您可以在车顶添加内衬以增加深度。

WebGL中的阴影映射可能很棘手，因此请尽可能地了解它，以便您熟悉所涉及的问题。

three.js r.66

THREE.ShaderMaterial被阴影相机看到倒置

1 个答案: