Possible fix for canvases/GLTF not rendering on mobile devices

[Aminur-Application]

Hello friends, i was having problems with showing all the canvas elements on my mobile device, reading the other issues it became apparent mobile supports a certain number of canvases, the individual balls was taking up majority of those allotted canvases.

I tested this out by removing all the balls, and yeah the page does seem to render the other canvases, also has a faster page rendering

solution:
you can remove those 3D balls altogether if you have too many

or

My solution was to group all the balls in one canvas. While i lose the control of each ball, i think it looks slightly better this way. the page is much faster at rendering too.

Check out my Portfolio

Shoot an email if you like it :)

import React, { Suspense, useMemo } from "react";
import { Canvas } from "@react-three/fiber";
import {
  Decal,
  Float,
  OrbitControls,
  Preload,
  useTexture,
} from "@react-three/drei";

import CanvasLoader from "../Loader";

import * as THREE from 'three';

const Ball = ({ icon, position, rotation }) => {
  const decal = useMemo(() => new THREE.TextureLoader().load(icon), [icon]);

  return (
    <Float speed={1.75} rotationIntensity={1} floatIntensity={2}>
      <ambientLight intensity={0.03} />
      <directionalLight position={[10, 5, -5]} />
      <mesh castShadow receiveShadow scale={1} position={position}>
        <icosahedronGeometry args={[1, 10]} />
        <meshStandardMaterial
          color='#fff8eb'
          flatShading
        />
        <Decal
          position={[0, 0, 1]}
          rotation={[2 * Math.PI, 0, 6.25]}
          scale={1.2}
          map={decal}
          flatShading
        />
      </mesh>
    </Float>
  );
};

const BallCanvas = ({ icons }) => {
  return (
    <Canvas frameloop='always'
    shadows
    dpr={[1, 1]}
    camera={{ position: [0, 0, 5], fov: 75 }}
    gl={{ preserveDrawingBuffer: true }}>
      <Suspense fallback={<CanvasLoader />}>
        <OrbitControls enableZoom={false} />
        <group>
          {icons.map((icon, index) => {
            const row = Math.floor(index / 3);
            const col = index % 3;
            return (
              <Ball key={icon} icon={icon} position={[col * 3 - 4, row * 3 + -2, -9]} />
            );
          })}
        </group>
      </Suspense>

      <Preload all />
    </Canvas>
  );
};

export default BallCanvas;

Now on your Tech.jsx component create a const variable storing all the icons in an array and pass it into the BallCanvas

const icons = Object.values(technologies).map((technology) => technology.icon);

<div className='w-full h-[75vh] mx-auto'>
          <BallCanvas icons={icons} />
      </div>

Hopefully this helps you all! :)

[Julia-Alberici]

Heyy @Aminur-Application thanks for sharing your solution, i was going crazy about it 🤣. Great work with the portfolio btw! Just a heads up, idk if you seen it but on my screen the portfolio have an overflow-x

You can solve this by changing this property w-screen on the section highlighted tag to w-full 😊

[Aminur-Application]

Heyy @Aminur-Application thanks for sharing your solution, i was going crazy about it 🤣. Great work with the portfolio btw! Just a heads up, idk if you seen it but on my screen the portfolio have an overflow-x You can solve this by changing this property w-screen on the section highlighted tag to w-full 😊

Thanks @Julia-Alberici :)

[hady-dev]

hey do you mind sharing how you animated the text to get typed out because when trying to do so all the libraries that I can find are outdated for react-18 and if i force install them they type in a very laggy way.

[Aminur-Application]

@hady-dev
hey, i used a package called react-type-animation;

import { TypeAnimation } from 'react-type-animation';

<p className={`${styles.heroSubText} mt-2 text-white-100`}>
        <span>I develop</span>
        <TypeAnimation
          cursor={false} // omit the default css typing animation class, otherwise we won't be able to manipulate it manually

          className={"text-[#915eff]"} // pass custom cursor className that will be manipulated (defaults below)
          sequence={[
            ' Web Applications',
            500,
            ' Desktop Applications',
            500,
            ' User Interfaces',
            500,
            ' ',
            100,
            () => setDisplayText(true)
          ]}
          repeat={0}
        />
</p>

[hady-dev]

@hady-dev
hey, i used a package called react-type-animation;

import { TypeAnimation } from 'react-type-animation';

<p className={`${styles.heroSubText} mt-2 text-white-100`}>
        <span>I develop</span>
        <TypeAnimation
          cursor={false} // omit the default css typing animation class, otherwise we won't be able to manipulate it manually

          className={"text-[#915eff]"} // pass custom cursor className that will be manipulated (defaults below)
          sequence={[
            ' Web Applications',
            500,
            ' Desktop Applications',
            500,
            ' User Interfaces',
            500,
            ' ',
            100,
            () => setDisplayText(true)
          ]}
          repeat={0}
        />
</p>

What version of react do you have because react-type-animation does not support react-18. There is work arounds to install it without using -force but still types out glitchy text for me.

[Aminur-Application]

What version of react do you have because react-type-animation does not support react-18. There is work arounds to install it without using -force but still types out glitchy text for me.

"react": "^18.2.0"
"react-type-animation": "^3.0.1"

[ArsenKakasyan]

Hey, I saw that you kind-of reorganized the Hero component, you mind sharing what you did to it and App.jsx? @Aminur-Application

[Thebigjoe10]

What version of react do you have because react-type-animation does not support react-18. There is work arounds to install it without using -force but still types out glitchy text for me.

"react": "^18.2.0" "react-type-animation": "^3.0.1"

use npm install --legacy-peer-deps react-type-animation
this works me no glitchy