Re-examining Mapbox's native SDK, it's clear that loading 3D models isn't as easy as Mapbox GL JS.
I was able to show 3D buildings by adding layers from this example, as well as a 3D model using SceneKit.
My goal is to add them into one layer to my 3D object so they're hidden behind the building. (Not below or above the building layers).
As of now, I'm adding custom layers for 3D object.
try! mapView.mapboxMap.style.addCustomLayer(
withId: "Custom",
layerHost: SceneKitExampleCustomLayerHost(
modelOrigin: modelOrigin,
renderingWillEndHandler: { [weak self] in self?.finish() }),
layerPosition: .default)
and updated the same layer with 3D buildings.
try mapView.mapboxMap.style.updateLayer(withId: layerID, type: FillExtrusionLayer.self) { layer in
// Update layer properties
layer.source = "composite"
layer.minZoom = 15
layer.sourceLayer = "building"
layer.fillExtrusionColor = .constant(StyleColor(.darkGray))
layer.fillExtrusionOpacity = .constant(0.8)
...
The problem here is because there's a 3D model in this layer, it stops the building from being 3D. It's easy to see this by zooming in and seeing the building geometry on the map ground, which means they're there but not rising up.
If there's any way to achieve dynamic 3D model placing on map, counting 3D buildings within the same layer, I'm open to suggestions and discussions about possibilities and limitations in Mapbox native SDK.