加载的 dae 模型看起来带有白线 n Three.js 像素化答案

【问题标题】：Loaded dae model looks pixelated with white lines n Three.js加载的 dae 模型看起来带有白线 n Three.js 像素化
【发布时间】：2019-10-19 19:41:14
【问题描述】：

我在 Three.js 中加载在 Sketctup (https://graviditetsberegner.dk/square.skp) 中创建的 dae 模型。我发现当从 Sketchup 到 Three.js 时，dae 模型在不同组件的纹理放置和分层放置方面是最好的。我使用以下代码加载模型，而不对网格进行任何修改：

var modelLoader = new THREE.ColladaLoader();

modelLoader.load("https://www.graviditetsberegner.dk/square.dae", function (dae)         {

    model = dae.scene.clone();
    scene.add(model);
    ...

模型加载正常，但是当我旋转相机时（有时只是在加载时），它看起来真的很模糊并且出现白线。

我可以设置一个选项或其他东西以使其看起来平滑且没有白线吗？我已经为渲染器尝试了抗锯齿，但效果不佳。

可以在这里找到小提琴：https://jsfiddle.net/35wc6myf/

在 SketchUp 中看起来像这样：

【问题讨论】：

启用抗锯齿并将设备像素比应用于渲染器会使结果更加清晰，请参阅jsfiddle.net/8eLk7b3y/1。线条的错误颜色在ColladaLoader 中看起来像是一个问题。如果将模型转换为glTF 是否有效？它实际上是通过网络交付 3D 资产的更好选择，推荐格式为 three.js。
它在 glTF 中看起来很完美，但是当我尝试使用画布纹理来显示文本时，我遇到了纹理的位置问题。使用 dae 格式，纹理会像我预期的那样对齐，但是使用 glTF，文本纹理会关闭并且是镜像的。但如果推荐使用 glTF，我将继续处理此问题，并可能在此处创建一个新帖子来描述我在使用 glTF 时遇到的问题。
是的，我认为修复基于glTF 的工作流比使用Collada 更好。
我在这里描述了我在使用 glTF 时遇到的问题：stackoverflow.com/questions/56443872/…

标签： three.js 3d sketchup

【解决方案1】：

不确定 Sketchup 文件上的导出设置，但看起来它添加了很多 LineSegments 对象，它们的颜色设置为白色。可能是这些存在于您的场景层次结构中，但它们的可见性已被关闭，或者它们在导出时被添加。在您克隆场景后，我可以通过添加以下代码删除小提琴中的白线：

model = dae.scene.clone();

model.children[0].children.forEach(child => {
    if (child.type == "LineSegments") {
        child.visible = false;
    }
});

结果：

【讨论】：

ColladaLoader 实际上对线段应用了错误的材质（因此它们的颜色是白色而不是黑色）。所以这是加载器中的一个问题......