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

Question

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

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

对我来说很清楚，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 使用 very 旧版本的 THREE.js（JSFiddle 使用 r54，当前是 r80）。我建议将小提琴配置为使用最新版本并重试，或者使用最新版本在本地托管代码。 VRML 加载程序可能会修复您遇到的问题。

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

更新代码： 我的代码与@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);
});