3D elements not loading on phone.

[responsive-we]

Whenever I try to open this website on my phone or tablet. It is not able to load the 3d models I used the planet the earth and the balls. I aslo have hosted these websites on two different providers. But still there is same error. But when I inspect it in my pc and make it load in screen resolution it loads up.
Here is the link of reop: portfolio
Here is the link of deployment on vercel: vercel
Here is the link of deployment on render: render

[WaniAthar]

same problem

[responsive-we]

Have u found the solution?

[Akxai]

Yeah facing the same issue.

[WaniAthar]

Solution 1: Reduce the number of 3d models (canvas) in code, because chrome mobile supports lesser number of canvasses at a time I guess it is 16 if it exceeds the first canvas will be dropped and 17th one will get added,

What I did was that i removed the sphere 3d balls which released a lot of canvasses, and my web was working fine on mobile Chrome

Solution 2: Use Firefox on Android (or safari on iOS), Firefox can handle more canvasses than chrome.

[characterMi]

remove those balls, there is a limitation for canvas elements on a browser, remove the balls and instead, return some images or whatever you want

[Python-genius900]

@characterMi working...Thanks
@WaniAthar working...Thanks