0

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

螺栓的 3D 渲染

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

相同螺栓的渲染，但外部是透明的，露出凹入的背面

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

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

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

这是我的代码和对问题的看法。（用鼠标滚轮放大，拖动旋转。）任何帮助、洞察力、阅读内容以了解更多信息的方向，或任何其他线索都会很棒。

4

1 回答 1

2

@Radio 是正确的。您的缠绕顺序是向后的，这会导致面指向错误的方向。由于对象上的螺纹，似乎某些面是正确的。

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

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

我没有做的一件事（作为提问者的练习）是使用最新的 THREE.js 进行测试。JSFiddle 使用了非常老的 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);
});
于 2016-09-15T16:50:58.843 回答