Model not displaying properly. Can see through faces

Questions
, ,
1

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.

2

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

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

3

seems like depthWrite = false didn’t change anything.

4

Drop STL file into scene

5

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
6

Thanks! This was it.

1 Like