search

adrianhajdin / project_3D_developer_portfolio

The most impressive websites in the world use 3D graphics and animations to bring their content to life. Learn how to build your own ThreeJS 3D Developer Portfolio today!
https://jsmastery.pro
5.71k stars 1.26k forks source link

3D elements not loading on phone. #121

Open responsive-we opened 9 months ago

responsive-we commented 9 months ago

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 commented 9 months ago

same problem

responsive-we commented 9 months ago

Have u found the solution?

Akxai commented 9 months ago

Yeah facing the same issue.

WaniAthar commented 9 months ago

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 commented 8 months ago

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 commented 7 months ago

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

alistairalva commented 2 months ago

Did anyone find any alternative for chrome mobile browser?

responsive-we commented 2 months ago

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 commented 2 months ago

Thanks, I meant with keeping all the skills balls

responsive-we commented 2 months ago

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

alistairalva commented 2 months ago

Do you know what the cutoff is?

Akxai commented 2 months ago

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

characterMi commented 2 months ago

@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 commented 2 months ago

@characterMi it looks dope 🔥, thank you.

alistairalva commented 2 months ago

@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