Export painted model from Blender to Three.js

Question

I tried to export GLTF model from Blender to Three.js. It works. But I have some artifacts on Three.js with lighting and painting. I have lines and squares in Three.js and I don't know why.

I used only Principled BSDF node in Blender to painting my model. If I set material in Three.js (MeshPhongMaterial) it works fine. But not with Principled BSDF node from Blender. Any ideas?

I'm trying to make the object cast a shadow and react to the lighting. This works well with MeshPhongMaterial and with Principled BSDF. But in the second option, I don't like these black stripes.

const INITIAL_MTL = new THREE.MeshPhongMaterial( { color: 0x575757, shininess: 10 } );
...
let theModel = gltf.scene;

        theModel.traverse((o) => {
            if (o.isMesh) {
                if (o.name == 'Foundation') {
                    o.material = INITIAL_MTL //Left part on screenshot with MeshPhongMaterial
                }
                o.castShadow = true;
                o.receiveShadow = true;
            }
        })

Mugen87 · Accepted Answer · 2022-03-14 12:12:43Z

2

The usual approach to mitigate self-shadowing artifacts is to modulate the bias property of your shadow-casting light. Try it with:

light.shadow.bias = - 0.002;

answered Mar 14, 2022 at 12:12

Mugen87

31.2k4 gold badges34 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Egettl Over a year ago

Thank you. It really solve my problem.

Collectives™ on Stack Overflow

Export painted model from Blender to Three.js

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related