Loaded dae model looks pixelated with white lines n Three.js

Question

I load a dae model created in Sketctup (https://graviditetsberegner.dk/square.skp) in Three.js. I found that dae models were the best regarding texture placement and hierarchical placement of the different components when going from Sketchup to Three.js. I load the model using the below code without any modification to meshes:

var modelLoader = new THREE.ColladaLoader();

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

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

The model loads fine, but when I rotate the camera (and sometimes just when it loads), it looks really blurry and white lines appear.

Is there an option or something I can set to make it looks smooth and without the white lines? I have tried antialias for the renderer without much effect.

A fiddle can be found here: https://jsfiddle.net/35wc6myf/

It looks like this in SketchUp:

Enabling anti-aliasing and applying the device pixel ratio to the renderer makes the result more sharp, see jsfiddle.net/8eLk7b3y/1. The wrong color of the lines looks like an issue in ColladaLoader. Does it work if you convert the model to glTF? It's actually the much better option for delivering 3D assets over the web and the recommended format of three.js. — Mugen87
It looks perfect in glTF, but I had issues with the position of textures when I attempted to use a canvas texture for displaying text. Using the dae format, the texture aligns as I would expect, but using glTF, the text texture is off and it's mirrored. But if glTF is recommended, I will continue working with this and maybe create a new post here describing the issues I face with glTF. — MortenGR
Yeah, I think it's better to fix your glTF based workflow than using Collada. — Mugen87
I have described the issues I experienced with glTF here: stackoverflow.com/questions/56443872/… — MortenGR

Marquizzo Marquizzo · Accepted Answer · 2019-06-04T20:59:08

Not sure about the export settings on your Sketchup file, but it looks like it's adding quite a few LineSegments objects with their color set to white. Could be that these exist in your scene hierarchy, but their visibility has been turned off, or they get added upon export. I was able to remove the white lines in your fiddle by adding this code right after you clone your scene:

model = dae.scene.clone();

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

Result:

Loaded dae model looks pixelated with white lines n Three.js

1 Answers