即使属性设置为true，在Three.js中加载的OBJ也不接收阴影

Question

I'm currently diving into Three.js and came across my first real issue when switching from native primitives to imported OBJ objects.

I have a simple model of a dodecahedron that I UV-mapped in Cinema4D r15 and exported as OBJ file. When using this model over a DodecahedronGeometry, the geometry is not lit by my directional light anymore, but it is if I use the primitive.

See this JSFiddle: https://jsfiddle.net/xm3ttmxw/1/

See desired result here (using a primitive): https://jsfiddle.net/84hbs7ed/1/

As you can see, I'm setting the receiveShadow property to true for all meshes in the OBJ. I activated shadow maps for the light and renderer. The directional light is following the camera and pointing towards the origin (center of the dodecahedron). The ambient light seems to work fine.

Any idea? Thanks in advance

Answer 1

After some more research, it appears that the problem comes from a lack of vertex normals (OBJLoader doesn't compute those). The solution is to compute the vertex normals on the fly like shown here: https://stackoverflow.com/a/28568522/3446439

object.traverse( function( child ) {
    if ( child instanceof THREE.Mesh ) {
        child.geometry.computeVertexNormals(); //add this
    }
} );

Thanks Sebastian Baltes!