Balls not Displaying on Mobile Devices

[sunnypatell]

Issue Summary: When accessing the website on mobile devices, such as iPhones, the balls rendered using the BallCanvas component are not displaying. This issue affects all mobile browsers tested, including Safari and Chrome.

---

// Ball.jsx
import React from "react";
import { Canvas } from "@react-three/fiber";
import { Decal, Float, OrbitControls, Preload, useTexture } from "@react-three/drei";
import { useThree } from "@react-three/fiber";

import CanvasLoader from "../Loader";

const Ball = ({ imgUrl }) => {
  const [decal] = useTexture([imgUrl]);

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

const BallCanvas = ({ icon }) => {
  const { viewport } = useThree();
  const aspectRatio = viewport.width / viewport.height;

  return (
    <div style={{ width: "100%", height: "100%" }}>
      <Canvas frameloop='always' dpr={[1, 2]} gl={{ preserveDrawingBuffer: true }} style={{ width: "100%", height: "100%" }}>
        <OrbitControls enableZoom={false} />
        <Ball imgUrl={icon} />
        <Preload all />
      </Canvas>
    </div>
  );
};

export default BallCanvas;

//Tech.jsx
import React from "react";
import { motion } from "framer-motion";
import { styles } from "../styles";

import { BallCanvas } from "./canvas";
import { SectionWrapper } from "../hoc";
import { technologies } from "../constants";
// import { itTools } from "../constants";
// import { cybersecurityTools } from "../constants";
// import { designTools } from "../constants";
import { textVariant } from "../utils/motion";

const Tech = () => {
  return (
    <>
      <motion.div variants={textVariant()}>
        <h3 className={`${styles.sectionHeadText} text-center`}>
          Skills.
        </h3>
      </motion.div>

      <div className="hidden sm:flex">
        <div className='flex flex-row flex-wrap justify-center gap-10'>
          {technologies.map((technology) => (
            <div className='w-28 h-28' key={technology.name}>
              <BallCanvas icon={technology.icon} />
            </div>
          ))}
        </div>
      </div>

      {/* <motion.div variants={textVariant()}>
        <h3 className={`${styles.sectionHeadText} text-center`}>
          IT Tools.
        </h3>
      </motion.div>

      <div className="hidden sm:flex">
        <div className='flex flex-row flex-wrap justify-center gap-10'>
          {itTools.map((technology) => (
            <div className='w-28 h-28' key={technology.name}>
              <BallCanvas icon={technology.icon} />
            </div>
          ))}
        </div>
      </div>

      <motion.div variants={textVariant()}>
        <h3 className={`${styles.sectionHeadText} text-center`}>
          Cybersecurity/Pentesting Tools.
        </h3>
      </motion.div>

      <div className="hidden sm:flex">
        <div className='flex flex-row flex-wrap justify-center gap-10'>
          {cybersecurityTools.map((technology) => (
            <div className='w-28 h-28' key={technology.name}>
              <BallCanvas icon={technology.icon} />
            </div>
          ))}
        </div>
      </div>

      <motion.div variants={textVariant()}>
        <h3 className={`${styles.sectionHeadText} text-center`}>
          Design Tools.
        </h3>
      </motion.div>

      <div className="hidden sm:flex">
        <div className='flex flex-row flex-wrap justify-center gap-10'>
          {designTools.map((technology) => (
            <div className='w-28 h-28' key={technology.name}>
              <BallCanvas icon={technology.icon} />
            </div>
          ))}
        </div>
      </div> */}
    </>
  );
};

export default SectionWrapper(Tech, "skills");