Three js models renders and shows fine on desktop but crashes and not showing on mobile phones

Questions
1

Hi
i have three js models included in my portfolio they load and work fine locally so when i deployed the files to netlify it works just fine on desktop but crashes and not showing on mobile phones need help plz as it’s my first time working with three js.

netlify link : https://gregarious-lily-12e225.netlify.app/
github link : GitHub - mahmoudhosnyomran97/my-3D-portfolio

2

You can check a few things:

  1. Mobile devices have really limited memory, some of them have 16 or 32 MB of VRAM, maybe something takes too much memory
  2. Maybe model or textures are too big (max texture size dimensions - not necessarily a memory)
  3. The number of textures that can be used at the same time is also limited
  4. Mobile device might not support specific webgl extensiosn

If you have the specific mobile device you can check it’s stats here: WebGL Report . In general I’d check if something is too large (filesize, texture size, model size, etc), because mobile devices have more limited resources as a rule and I’d guess that would be the case most likely. If mobile website crashes it’s usually due to the resources usage

Also you have an error in console THREE.BufferGeometry.computeBoundingSphere(): Computed radius is NaN. The "position" attribute is likely to have NaN values, so maybe you have some error somewhere

2 Likes
3

@mcharytoniuk first i wanted to thank you so much for taking out of your time and try and help me the thing is i followed a tutorial on you tube regarding the project i posted my question about and in the tutorial everything seems to be working fine at the end of the video with no problems or lags at all i also checked your advice but couldn’t solve anything or get anywhere but on my end after i developed my own it lags a bit on almost every device but at least the models are showing on almost every device pc, laptops and even iphones but android it doesn’t show or work on it so i actually give up as it’s my first time working with three js maybe it’s not the thing for me although i was so hyped about learning but anyways and i’m sorry for this long paragraph enough of it i wanted to thank you again and my best regards.

4

No problem, WebGL can be really tricky, in this case I am sure it’s the resources issue (too big textures, model size etc).

If you decide to give it another go, I think you can do a few things differently:

  1. I think it would be an interesting idea to recreate that scene (with PC, desk etc) using just THREE.js primitives (like creating a monitor, desk etc with THREE.CubeGeometry, that could be a nice excersise in THREE.js (so instead of loading 4MB model you can end up with several textured cubes)
  2. You can try simplifying the geometry, so it has less than ~1k vertices total (I think for that scene it’s doable)
  3. You can try downscaling the textures, so they are at most 512x512 pixels in size (you can be surprised with how small textures you can get away)
  4. Use just one or two light sources (like one point light, one directional light) or bake in shadows into the model, since it’s static

So primarily - limiting vertices count and texture sizes.

Also I encourage you to not give up on WebGL and THREE.js, it’s really fun and useful in the long run. :slight_smile:

1 Like
5

I think I got Solution for you

take look

Screenshot 2023-09-05 130257
Screenshot 2023-09-05 1302571049×84 3.84 KB

6

“THREE.BufferGeometry.computeBoundingSphere(): Computed radius is NaN. The “position” attribute is likely to have NaN values” i have this error And i can’t find where this error coming from can you help me?.