search

mapbox / mapbox-gl-js

Interactive, thoroughly customizable maps in the browser, powered by vector tiles and WebGL
https://docs.mapbox.com/mapbox-gl-js/
Other
10.94k stars 2.2k forks source link

Lighting of 3D models on Mapbox using threejs. #12670

Open eNepper opened 1 year ago

eNepper commented 1 year ago

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 commented 11 months ago

I think this is the same problem as this: https://github.com/mapbox/mapbox-gl-js/issues/12358

Say the word if you find a solution!

markhougaard commented 11 months ago

@alexcrist With the exciting new built-in 3D renderer in v3-beta, there might be a completely different approach that renders this issue superfluous: https://github.com/mapbox/mapbox-gl-js/issues/12847#issue-1849187697