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

Question

Here's a VRML file that I'm trying to display with three.js. When I preview that file in a standalone viewer like 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 是正确的。您的缠绕顺序是向后的，这会导致面指向错误的方向。由于对象上的螺纹，看起来有些面是正确的。

这里是 fiddle（下面的代码）演示了一种在不改变原始对象的情况下更正缠绕顺序的方法：https://jsfiddle.net/TheJim01/3nr7rakk/

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

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

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

更新代码： 我的代码与@75th Trombone 的代码相同，除了我 added/changed 以下内容：

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);
});

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

Three.js coloring the wrong side of a VRML object's faces

javascript

3d

three.js

vrml