Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

3D elements not loading on phone. #121

Open
responsive-we opened this issue Nov 7, 2023 · 15 comments
Open

3D elements not loading on phone. #121

responsive-we opened this issue Nov 7, 2023 · 15 comments

Comments

@responsive-we
Copy link

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
Copy link

same problem

@responsive-we
Copy link
Author

Have u found the solution?

@Akxai
Copy link

Akxai commented Nov 28, 2023

Yeah facing the same issue.

@WaniAthar
Copy link

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
Copy link

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
Copy link

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

@alistairalva
Copy link

Did anyone find any alternative for chrome mobile browser?

@responsive-we
Copy link
Author

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
Copy link

Thanks, I meant with keeping all the skills balls

@responsive-we
Copy link
Author

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

@alistairalva
Copy link

Do you know what the cutoff is?

@Akxai
Copy link

Akxai commented Jun 2, 2024

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

@characterMi
Copy link

@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
Copy link

Akxai commented Jun 2, 2024

@characterMi it looks dope 🔥, thank you.

@alistairalva
Copy link

@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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

6 participants