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

[alistairalva]

Did anyone find any alternative for chrome mobile browser?

[responsive-we]

Yes you can remove the skills balls and your code will be working fine.
you can see my portfolio for example:
https://mdayan.onrender.com/

[alistairalva]

Thanks, I meant with keeping all the skills balls

[responsive-we]

Nope, then your website can only be opened on safari or firefox in mobile phones

[alistairalva]

Do you know what the cutoff is?

[Akxai]

Yeah but the contact form's 3d model isn't appearing even after removing the skill balls.

[characterMi]

@Akxai @alistairalva that's true, it's because u r rendering 3 canvases and as i said u can only render 2, so here is what i did, i simply moved the stars component inside of the EarthCanvas component, and it worked.

here is the link to the live site: https://charactermi.github.io/second-portfolio

and the source code: https://github.com/charactermi/second-portfolio

[Akxai]

@characterMi it looks dope 🔥, thank you.

[alistairalva]

@Akxai @alistairalva that's true, it's because u r rendering 3 canvases and as i said u can only render 2, so here is what i did, i simply moved the stars component inside of the EarthCanvas component, and it worked.

here is the link to the live site: https://charactermi.github.io/second-portfolio

and the source code: https://github.com/charactermi/second-portfolio

Thanks I added a check to render static elements when in mobile view and the 3d balls when in desktop view