three.js3dsketchup

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


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: enter image description here


Solution

  • 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:

    Model without white lines