Maplibre isn't displaying custom environment and shadows using Three.js

[UzairAsadBaig]

Maplibre isn't displaying custom environment and shadows using Three.js

In my project, I'm using Maplibre to showcase 3D models on maps. I've utilized Maplibre's canvas to precisely display the models at specific positions on the maps. My goal is to replicate the appearance of models like those found at https://fly-project-phi.vercel.app/. However, the actual appearance of the models resembles what you see at https://lucent-cocada-409cb4.netlify.app/. You can interact with the animations to view the models. I've place the same script to display the models in both links but have been unable to replicate the same outcome.

[HarelM]

Can you provide a simpler example and better describe the problem, preferably in jsbin/codepen/similar tool?

[UzairAsadBaig]

In my project, I'm using Maplibre to showcase 3D models on maps. I've utilized Maplibre's canvas to precisely display the models at specific positions on the maps. But I'm unable to display shadows of models and environment map precisely. Environment maps on models you can looks weird. However same threejs script without maplibre looks appropriate as I intended. Here is the link to codesandbox: https://codesandbox.io/p/devbox/7xr6s7?file=%2Fpackage.json%3A3%2C21&layout=%257B%2522sidebarPanel%2522%253A%2522EXPLORER%2522%252C%2522rootPanelGroup%2522%253A%257B%2522direction%2522%253A%2522horizontal%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522id%2522%253A%2522ROOT_LAYOUT%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522clsnqh1hw0006356heocz1ool%2522%252C%2522sizes%2522%253A%255B100%252C0%255D%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522EDITOR%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522id%2522%253A%2522clsnqh1hv0002356hdwq5zgd1%2522%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522SHELLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522id%2522%253A%2522clsnqh1hw0003356hzevppdae%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522DEVTOOLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522id%2522%253A%2522clsnqh1hw0005356htbzq78nj%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%252C%2522sizes%2522%253A%255B50.12842599686163%252C49.87157400313837%255D%257D%252C%2522tabbedPanels%2522%253A%257B%2522clsnqh1hv0002356hdwq5zgd1%2522%253A%257B%2522id%2522%253A%2522clsnqh1hv0002356hdwq5zgd1%2522%252C%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522clsnqtf9q0002356h9l0w70i9%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522FILE%2522%252C%2522initialSelections%2522%253A%255B%257B%2522startLineNumber%2522%253A3%252C%2522startColumn%2522%253A21%252C%2522endLineNumber%2522%253A3%252C%2522endColumn%2522%253A21%257D%255D%252C%2522filepath%2522%253A%2522%252Fpackage.json%2522%252C%2522state%2522%253A%2522IDLE%2522%257D%255D%252C%2522activeTabId%2522%253A%2522clsnqtf9q0002356h9l0w70i9%2522%257D%252C%2522clsnqh1hw0005356htbzq78nj%2522%253A%257B%2522id%2522%253A%2522clsnqh1hw0005356htbzq78nj%2522%252C%2522tabs%2522%253A%255B%257B%2522type%2522%253A%2522TASK_PORT%2522%252C%2522port%2522%253A5173%252C%2522taskId%2522%253A%2522start%2522%252C%2522id%2522%253A%2522clsnqrb4200le356h0345qdh1%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522path%2522%253A%2522%252F%2522%257D%255D%252C%2522activeTabId%2522%253A%2522clsnqrb4200le356h0345qdh1%2522%257D%252C%2522clsnqh1hw0003356hzevppdae%2522%253A%257B%2522id%2522%253A%2522clsnqh1hw0003356hzevppdae%2522%252C%2522activeTabId%2522%253A%2522clsnqoyne003b356hj7e49aqb%2522%252C%2522tabs%2522%253A%255B%257B%2522type%2522%253A%2522TASK_LOG%2522%252C%2522taskId%2522%253A%2522start%2522%252C%2522id%2522%253A%2522clsnqoyne003b356hj7e49aqb%2522%252C%2522mode%2522%253A%2522permanent%2522%257D%255D%257D%257D%252C%2522showDevtools%2522%253Atrue%252C%2522showShells%2522%253Afalse%252C%2522showSidebar%2522%253Atrue%252C%2522sidebarPanelSize%2522%253A20.729166666666657%257D

[HarelM]

Sorry, but I'm not planning on trying to understand 1K lines of code. While I don't disagree there might be an issue here, if you want me to be able to help, you'll need to create a minimal reproduction. Also worth mentioning that I'm not an expert when it comes to 3D models, webgl etc which are probably in play here.