"Add a 3D model" example - Setting custom pixelRatio breaks model placement

[axekan]

Possibly related to #1953.

I'm having some major performance issues on iOS devices when running mapbox + three.js like the official example. Safari is often crashing on loading the map, displaying "A problem repeatedly occurred.." due to excessive vram usage.

Newer iPhones have a devicePixelRatio of 3, and limiting it to 1 in WebGLRenderer immediately fixes the crash. However this messes up the scene, as can be seen in the jsfiddle below. This also occurs in the threebox library which exists as an alternative example to this one.

Inspelning.2024-11-03.170439.mp4

mapbox-gl-js version: 3.7.0

browser: Chrome 130

Steps to Trigger Behavior

1. Add a three.js model following example in Mapbox docs
2. set pixel ratio of the WebGLRenderer to something other than the default (like 0.75)
3. See how model position becomes distorted and disconnected from the map.

Link to Demonstration

Rotate/pan camera to see issue with model:
https://jsfiddle.net/z3rgafcw/8/

Expected Behavior

It should handle a different pixelRatio and render at a lower resolution

Actual Behavior

Scene breaks, becomes distorted and disconnected from the map.