Model not displaying properly. Can see through faces

Hello.
I’m new to three.js and started my project. I got model imported, but when i rotate, i can see through different parts of the model. I’m no expert, but feels like faces are flipped, so i see through them. I used VertexNormalsHelper to see, but normals looks ok to me. I am loading .stl model. It’s all STL models, downloaded or exported by myself. Tested in different software, model is ok.
problem

     stlLoader = new STLLoader();
            stlLoader.load(URL.createObjectURL(file), function (geometry) {

                const material = new  THREE.MeshStandardMaterial({color: 0x0ED5F1, side: THREE.DoubleSide})
                mesh = new THREE.Mesh(geometry, material);
                mesh.material.depthWrite = true;
                mesh.position.set(105, 105, 0);
                mesh.rotation.set(-180, 0, 0);
                mesh.scale.set(1, 1, 1);
                //transformControls.attach(mesh);
                const helper = new VertexNormalsHelper(mesh, 1, 0xff0000);
               // scene.add(helper);
                scene.add(mesh);

And here are the lights i am adding to scene.

const light = new THREE.AmbientLight(0x404040); 
        scene.add(light);
        const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5);
        scene.add(directionalLight);

Any help much appreciated.

What does it look like with mesh.material.depthWrite = false; ?

If you create a codepen, it may be easier to help you.

seems like depthWrite = false didn’t change anything.

Drop STL file into scene

You must enable depth in the renderer (line 212).
And keep depthWrite to true in the material (this is default, so you can simply remove the line with depthWrite):

renderer = new THREE.WebGLRenderer({
   powerPreference: "high-performance",
   antialias: true,
   stencil: false,
   depth: false, // <-- HERE
   alpha: true,
   depthBufferType: THREE.FloatType,
});
1 Like

Thanks! This was it.

1 Like