Three.js着色VRML对象面部的错误一面

Question

Here's a VRML file我试图用three.js显示。当我在view3dscene这样的独立查看器中预览该文件时，它看起来是正确的：

然而，在使用示例VRMLLoader的Three.js中，面部的内部是彩色的而不是外部的：

我很清楚，three.js正在读取正确的颜色信息，只是错误地将它应用于面部。但我对使用3D非常陌生，所以我不确定这种差异在哪里或我能做些什么来解决它。

我没有做任何花哨的加载文件;它就像在示例代码中一样：

loader.load('https://75thtrombone.com/links/stack-exchange/2016-09/' + model, function(geometry) {
    scene.add(geometry);
});

Here's a fiddle我的代码和问题的视图。 （使用鼠标滚轮放大，拖动以旋转。）任何帮助，洞察力，指向要阅读的内容的方向以及任何其他线索都将是非常棒的。

Answer 1

@Radio是对的。您的上弦顺序是向后的，这会导致面指向错误的方向。由于对象上的线程，只会出现一些面部正确。

这是一个小提琴（下面的代码），演示了一种在不改变原始物体的情况下纠正上弦顺序的方法：https://jsfiddle.net/TheJim01/3nr7rakk/

我只是添加一个函数来递归加载器返回的对象，并强制所有材质绘制三角形的背面，而不是正面。这只发生一次，因此在小几何体的情况下它可能已经足够好了，但是当你使用更大的几何体集时，你会看到这种情况变慢，如果它们足够大，复杂的对象可能会抛出堆栈错误。

我没有做的一件事（作为提问者的练习）是用最新的THREE.js测试的。 JSFiddle使用非常旧版本的THREE.js（JSFiddle使用r54，当前是r80）。我建议配置小提琴以使用最新版本并重试，或者使用最新版本在本地托管代码。 VRML加载程序可能有一些修复程序可以解决您遇到的问题。

您可以使用此页面作为如何将JSFiddle链接到最新的THREE.js的示例：http://jsfiddle.net/TheJim01/kb7e88vr/随意分叉和修改它。

更新了代码： 我的代码与@ 75th Trombone相同，只是我添加/更改了以下内容：

function sideReplacer(obj){
    if(obj.material){
        obj.material.side = THREE.DoubleSide;
    }
    if(obj.children && obj.children.length > 0){
        for(var i in obj.children){
            sideReplacer(obj.children[i]);
        }
    }
}

loader.load('https://75thtrombone.com/links/stack-exchange/2016-09/' + model, function(geometry) {
    sideReplacer(geometry);
    scene.add(geometry);
});