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

Nobody has claimed this yet.

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.

https://github.com/user-attachments/assets/cd1fd593-570f-4435-ab02-3530f03a32b9

**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](https://docs.mapbox.com/mapbox-gl-js/example/add-3d-model/)
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.

Start with the Mapbox "add a 3D model" example and compare its rendering behavior with the linked jsfiddle when WebGLRenderer uses a pixelRatio below the default. Trace how the renderer and map camera coordinate model placement, then verify that lowering pixelRatio reduces resolution without distorting or disconnecting the model.

Written by the indexing model from the issue text.