3D layers do not have same projection.

[darkojelen]

Mapbox example https://docs.mapbox.com/mapbox-gl-js/example/3d-extrusion-floorplan/ is only for polygons. When I add in that example also threebox tube layer, with different tilt, rotation and zoom, on different height, I get extrusion object from mapbox layer and tube from threebox layer unparallel. On ground level is same point but, with height, angle between objects depend on tilt, rotation and zoom of map. It is zero or more then zero, but not less then zero.

How to solve this?
http://ipegaz.si/demo/indoor-threebox-2.html

[jscastro76]

I had a similar issue, playing with the camera initial settings I discovered that there are 2 big elements influencing in this behaviour, one is the Origin value set to 28 originally in Threebox code, IMHO it's better to use 37 which is more similar to mapbox perspective.
The second element is that original proportion width/height ratio is only considering the window ratio and not the real canvas proportion (when embedded into another page, that is my case), this changes dramatically the raycasting accuracy and camera sync calculations.
So try yourself if this config matches better your perspective.
this.camera = new THREE.PerspectiveCamera(37, map.getCanvas().clientWidth / map.getCanvas().clientHeight, 1, 1000000000);

[jscastro76]

Mapbox example https://docs.mapbox.com/mapbox-gl-js/example/3d-extrusion-floorplan/ is only for polygons. When I add in that example also threebox tube layer, with different tilt, rotation and zoom, on different height, I get extrusion object from mapbox layer and tube from threebox layer unparallel. On ground level is same point but, with height, angle between objects depend on tilt, rotation and zoom of map. It is zero or more then zero, but not less then zero.
How to solve this?
http://ipegaz.si/demo/indoor-threebox-2.html

@darkojelen The exact value for the FOV to create the THREE.PerspectiveCamera is 36.86989764584402 which is Math.atan(3/4) in degrees, that corresponds with the FOV of the CameraSync object FOV config that is 0.6435011087932844 (radians).
I have included both in the constants in my fork
Your sample now looks pixel-perfect precision from any camera position and zoom level with these changes

Anyway your issue is also happening because of the order of the layers (it's better if you create the custom layer before the fill-extrusion) layer, apart from other issues with the nearest/furthest calculations in the original CameraSync. You can check the changes here and this should be solved

Here is also the code for the constants calculating always in relation FOV and FOV_DEGREES.

const WORLD_SIZE = 1024000;
const MERCATOR_A = 6378137.0;
const FOV = Math.atan(3 / 4);
module.exports = exports = {
    WORLD_SIZE: WORLD_SIZE,
    PROJECTION_WORLD_SIZE: WORLD_SIZE / (MERCATOR_A * Math.PI * 2),
    MERCATOR_A: MERCATOR_A, // 900913 projection property
    DEG2RAD: Math.PI / 180,
    RAD2DEG: 180 / Math.PI,
    EARTH_CIRCUMFERENCE: 40075000, // In meters
    FOV: FOV, // Math.atan(3/4) radians. If this value is changed, FOV_DEGREES must be calculated
    FOV_DEGREES: FOV * 360 / (Math.PI * 2), // Math.atan(3/4) in degrees
    TILE_SIZE: 512
}