Javascript 3.js为VRML对象的错误一侧着色'；脸

我试图用three.js来显示它。当我在独立查看器（如）中预览该文件时，它看起来是正确的：

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

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

我在加载文件时没有做任何花哨的事情；正如示例代码中所示：

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

---

与我的代码和问题的看法。（用鼠标滚轮放大，拖动以旋转。）任何帮助、见解、对阅读内容的指导或任何其他线索都将非常棒。

@收音机是正确的。您的缠绕顺序是向后的，这会导致面指向错误的方向。由于对象上的线程化，似乎只有部分面是正确的

这是一把小提琴（代码如下），演示了一种在不改变原始对象的情况下纠正缠绕顺序的方法：

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

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

您可以使用此页面作为一个示例，说明如何将JSFIDLE链接到最新的THREE.js：随意分叉并修改它

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

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测试这一点。jsiddle使用了THREE.js的一个非常旧的版本（jsiddle使用r54，当前版本是r80）。我建议将fiddle配置为使用最新版本并重试，或者使用最新版本在本地托管代码。VRML加载程序可能有修复程序，可以解决您看到的问题

您可以使用此页面作为一个示例，说明如何将JSFIDLE链接到最新的THREE.js：随意分叉并修改它

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

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

---

看起来你找到了答案，我正在调整小提琴。。。。问题是由于webGL中面的缠绕顺序决定了面的方向。除非另有规定，否则VRML假定所有面均为实体。WebGL不做这样的假设。谢谢！我知道2D矢量图形中的缠绕数字，不知道3D图形是类似的。可能的重复看起来你找到了答案，我正在调整小提琴。。。。问题是由于webGL中面的缠绕顺序决定了面的方向。除非另有规定，否则VRML假定所有面均为实体。WebGL不做这样的假设。谢谢！我知道2D矢量图形中的卷绕数，但不知道3D图形是类似的。谢谢！无论如何，我的fiddle从外部链接了three.js，所以这里的所有内容都应该适用于最新版本。@Jim01检查three.js中的遍历函数。它既适用于场景，也适用于对象。查看第48行：我刚刚注意到我们使用了变量名“geometry”，在本例中，这是一个误称，因为它不代表Three.js geometry类对象，而是Object3d类型。为了清晰起见，我会更改var名称。谢谢！无论如何，我的fiddle从外部链接了three.js，所以这里的所有内容都应该适用于最新版本。@Jim01检查three.js中的遍历函数。它既适用于场景，也适用于对象。查看第48行：我刚刚注意到我们使用了变量名“geometry”，在本例中，这是一个误称，因为它不代表Three.js geometry类对象，而是Object3d类型。为了清晰起见，我会更改var名称。