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

Question

这是一个VRML文件是我试图用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);
});

这里有把小提琴与我的代码和对问题的看法。(用鼠标轮放大，拖动可旋转。)任何帮助，洞察力，方向去阅读更多的东西，或者任何其他的线索都是很棒的。

Answer 1

@收音机是正确的。你的卷曲顺序是向后的，这会使你的脸指向错误的方向。仅仅因为对象上的线程，其中一些面看起来是正确的。

这里有一个小提琴(下面的代码)演示了一种在不改变原始对象的情况下纠正缠绕顺序的方法：https://jsfiddle.net/TheJim01/3nr7rakk/

我只是添加了一个函数，该函数递归加载器返回的对象，并强制所有材料绘制三角形的背面，而不是前端。这种情况只发生一次，所以在小几何的情况下可能足够好，但是当您使用更大的几何图形集时，您会看到这种速度减慢，如果复杂的对象足够大，它们可能会抛出堆栈错误。

我没有做的一件事(作为对提问者的练习)是用最新的THREE.js测试这一点。JSFiddle使用非常的旧版本的THREE.js (JSFiddle使用r54，当前是r80)。我建议将小提琴配置为使用最新版本，然后再试一次，或者在本地使用最新版本的代码。可能会对VRML加载程序进行修复，从而解决您所看到的问题。

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

更新代码:除添加/更改以下内容外，我的代码与@75 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);
});