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 <#161 (comment)>, 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]