First 5 balls are going white and COMPUTER 3D going white in MOBILE!!

[Fan-Karwanta]

So I deployed my site on vercel, and its fine when the site is visited using PC. BUT, if a person using mobile/android, the COMPUTER 3d will go blank or white. Displaying a white screen. ALSO the first 5 balls are going white/blank also in mobile. I badlyyyyy need help with this as this is my first stepping stone in my developer journey. PLEASE HELP. Or advice any alternatives.

[akashkumargaur]

I am also facing this same problem. In the balls problem I tried using fewer balls. I reduce the array of tech to 6 elements which solves the problem for now but is not a permanent solution.

[Fan-Karwanta]

so you just reduced the tech of yours right? well my problem is at first the 3d model of the desktop cannot be loaded in some specific mobile devices with low specs. but in iphone and other devices like desktop its fine. For the balls problem I only have problem with the FIRST 5 balls. so reducing my techs cannot bring any solution at all as the FIRST balls are not rendered properly :(

[akashkumargaur]

I also face the same problem and reduce tech array length to 5 in constants index.js const technologies. help me render computer 3d models and balls also. According to me, errors may occur due to the limited item can render of the 3d model in the Android browser.

  const technologies = [
    {
      name: "HTML 5",
      icon: html,
    },
    {
      name: "JavaScript",
      icon: javascript,
    },
    {
      name: "React JS",
      icon: reactjs,
    },
    {
      name: "Node JS",
      icon: nodejs,
    },
    {
      name: "git",
      icon: git,
    },
  ];

I import icons git and node js etc according to my needs.

[Fan-Karwanta]

ahh so you reduced your tech balls right

I also face the same problem and reduce tech array length to 5 in constants index.js const technologies. help me render computer 3d models and balls also. According to me, errors may occur due to the limited item can render of the 3d model in the Android browser.

  const technologies = [
    {
      name: "HTML 5",
      icon: html,
    },
    {
      name: "JavaScript",
      icon: javascript,
    },
    {
      name: "React JS",
      icon: reactjs,
    },
    {
      name: "Node JS",
      icon: nodejs,
    },
    {
      name: "git",
      icon: git,
    },
  ];

I import icons git and node js etc according to my needs.

Ah I see, so you reduced the amount of techballs you have? how about the desktop 3D model?

[akashkumargaur]

desktop 3D model will work after reducing length

[anayatkhan1]

• There is a limit on the number of Canvas elements that can be used in a browser, which can vary depending on the device.

• To avoid exceeding this limit and maintain compatibility with Android or mobile devices, it is recommended to limit the number of Canvas elements.

• The maximum number of Canvas elements that could be used without causing any issues with 3D models on Android devices was determined to be 8.

• The specific elements used in the example scenario were: 1 Computer, 5 balls, 1 earth, and 1 stars.

• A discussion related to this topic can be found at the following link: https://discourse.threejs.org/t/i-have-a-problem-in-warning-too-many-active-webgl-contexts-oldest-context-will-be-lost/41300

• To implement the solution, in the "ScrapperWrapper.jsx" file, locate the element and add Viewport={0} as a parameter.

  My Portfolio, it works well in mobile device.

[Fan-Karwanta]

• There is a limit on the number of Canvas elements that can be used in a browser, which can vary depending on the device.
• To avoid exceeding this limit and maintain compatibility with Android or mobile devices, it is recommended to limit the number of Canvas elements.
• The maximum number of Canvas elements that could be used without causing any issues with 3D models on Android devices was determined to be 8.
• The specific elements used in the example scenario were: 1 Computer, 5 balls, 1 earth, and 1 stars.
• A discussion related to this topic can be found at the following link: https://discourse.threejs.org/t/i-have-a-problem-in-warning-too-many-active-webgl-contexts-oldest-context-will-be-lost/41300
• To implement the solution, in the "ScrapperWrapper.jsx" file, locate the element and add Viewport={0} as a parameter.

My Portfolio, it works well in mobile device.

Thanks for This broo !!

But if we sum it all up what I need to do is:

• Lower the size of my Computer
• Lower the quantity of balls I have to 5 balls

By doing this I will fix the issue right? because my problem is:

• Computer 3d not showing up on android low specs,
• and also only 5 balls shows up.

[Fan-Karwanta]

• There is a limit on the number of Canvas elements that can be used in a browser, which can vary depending on the device.
• To avoid exceeding this limit and maintain compatibility with Android or mobile devices, it is recommended to limit the number of Canvas elements.
• The maximum number of Canvas elements that could be used without causing any issues with 3D models on Android devices was determined to be 8.
• The specific elements used in the example scenario were: 1 Computer, 5 balls, 1 earth, and 1 stars.
• A discussion related to this topic can be found at the following link: https://discourse.threejs.org/t/i-have-a-problem-in-warning-too-many-active-webgl-contexts-oldest-context-will-be-lost/41300
• To implement the solution, in the "ScrapperWrapper.jsx" file, locate the element and add Viewport={0} as a parameter.

My Portfolio, it works well in mobile device.

how exactly or what are exactly the steps bro?

[Fan-Karwanta]

the following steps above are the steps to fix this issue, thankssss guys

[anayatkhan1]

Step 1: Go to ScrapperWrapper.jsx file which is located in Hoc folder. In <motion.section> Add viewport = { 0 }

Step 2: In index.js file, find the const technologies Array. Make sure you add only 5 balls. index.js file is located in constants folder.

Thats it.

[Singe72]

What if we want to show more than 5 balls ?