Three.js Mobile Crash

Questions
1

Hello!
Recently i have created portfolio with Next.js and Three.js.
I have 3D model which i compressed (Draco) and Balls which float and both rotate on demand.
I have resized 3d model from 4k to lower resolution and from 100mb now it’s 2mb max.

3D model path → app → components → canvas → statue
Ball path → app → components → canvas → Ball

Desktop is perfect.

On Safari,Chrome(iPhones) works pretty good, tested on iPhone 6 , 12 , 14, sometimes it breaks on my iPhone 14 pro.

On Android devices, portfolio opens and site breaks immediately after scrolling to the 3d model section.

Here’s my GitHub code: GitHub - Spale96/my-portfolio: my portfolio, presenting my front-end skills.

I do not want to give up on Three.js but I need someone more experienced from me to aid me in this particular matter.

Thanks in advance!

2

First thing I’d try is to remove DRACO loader, and just use uncompressed GLTF.

1 Like
3

Thanks for response,
I have removed DRACO.
File now is 5.5mb

And I am still getting on Android this error:

'Aplication error: a client-side exception has occurred (see the browser console for more information).

4

Update,

3D model was not the issue, the Ball.jsx was.

Can someone inspect Ball.jsx and see what’s i am doing wrong?

5

It’s really important to get comfortable opening your browser console and looking at the errors there, this is an unavoidable part of developing for the web. Here’s an article on how to do this for Android devices:

2 Likes
6

Hi @donmccurdy ,

I’ve done exactly what you said,
This is my first time logging code from mobile.
So I have found this →

Error on Android
Error on Android1915×1022 108 KB

Can you help me a bit with this one?
This is my Three.js for these floating Balls →

Canvas Ball
Canvas Ball545×610 40.5 KB

7

You are creating too many ball canvases. If I understand your code correctly, you’re creating a whole THREE instance / canvas for every ball.