Lighting of 3D models on Mapbox using threejs.

**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/

Start with the linked CodeSandbox and compare the Mapbox scene with the HTML canvas scene using the stated Mapbox GL JS and three.js versions. Trace the identical model and directional-light setup in the reproduction, then confirm the hotspot can be explained and removed without changing the intended model lighting.

Written by the indexing model from the issue text.