Lighting of 3D models on Mapbox using threejs.

[eNepper]

mapbox-gl-js version: <= 2.14.1
threejs version: <= 0.151.3

Question

I'm having problems setting up lighting for 3D models; more specifically, I noticed that some models get a bright hotspot when using a directional light. I suspect the problem is with Mapbox because if I load the same model in the online three.js editor and add identical lights, the model doesn't get a bright hotspot.

I have included a link to a code sandbox where I made a side by side comparisons using the same model. The model to the left is added to Mapbox, and the right one is drawn onto an HTML canvas using three.js.

The scene added to Mapbox is a clone of the scene drawn onto the HTML canvas, and I only see the "hotspot" on Mapbox.

How should I get rid of the hotspot?

Links to related documentation

Codesandbox: https://codesandbox.io/s/evpeee
Preview: https://evpeee.csb.app/

[alexcrist]

I think this is the same problem as this: #12358

Say the word if you find a solution!

[markhougaard]

@alexcrist With the exciting new built-in 3D renderer in v3-beta, there might be a completely different approach that renders this issue superfluous: #12847 (comment)