When adding new technologies, I am missing the 3d model of the computer.

[nothing9537]

The problem will lie in adding new technologies. The maximum of technologies that I managed to find out by “poking” method is 15 balls. When adding more than 15 (16 or more), my computer model turns white. I don't understand why...

The problem goes away if you keep the list of technology balls at 15.

[nothing9537]

Same thing with Earth Canvas. Seems like ThreeJS not allow to render some amount of canvases. My PC, by the way, is quite powerful. So it's problem in a code

[akarshan2602]

The reason is that chrome supports only 15 (at most 16) canvases on the desktop version, I myself am trying to figure out a way to display them on mobile as it shows just white box

[akarshan2602]

Found it, had to decrease the number of 3d models on phone

On Wed, 2 Oct 2024, 4:12 pm Munnarhh, @.***> wrote:

still no solution?

— Reply to this email directly, view it on GitHub https://github.com/adrianhajdin/project_3D_developer_portfolio/issues/161#issuecomment-2388333927, or unsubscribe https://github.com/notifications/unsubscribe-auth/AKS2NWISYQ6JKEN5D42KPITZZPE27AVCNFSM6AAAAABNMVMOWKVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDGOBYGMZTGOJSG4 . You are receiving this because you commented.Message ID: @.*** com>

[akarshan2602]

const Map = (isMobile, technologies) => { if (isMobile) { return technologies.slice(0, 4).map((technology) => ( <div className="w-28 h-28" key={technology.name}> <BallCanvas icon={technology.icon} /> <p className="flex justify-center text-white font-bold"> {technology.name} </p> </div> )); } else { return technologies.map((technology) => ( <div className="w-28 h-28" key={technology.name}> <BallCanvas icon={technology.icon} /> <p className="flex justify-center text-white font-bold"> {technology.name} </p> </div> )); } };

Link to the file-[https://github.com/akarshan2602/portfolio/blob/main/src/components/Tech.jsx]