Three.js Not Rendering Properly on Mobile in React Vite Application

I’m working on a React application using Vite and Three.js for rendering 3D elements. Everything works perfectly on desktop browsers and IOS, but when I open the application on a android mobile device, the 3D elements break and don’t display correctly. The models either look distorted, or some parts are missing entirely.

enter image description here Expected working.

enter image description here this is how it looks likes.

Not Working on mobile CHROMIUM Browsers. Project is working on IOS, all DESKTOP & LAPTOP devices, firefox(mobile).

What I’ve Tried:

I’ve checked if the issue is related to screen resolution, but changing screen size or orientation doesn’t solve the problem it working only in laptop.
Tried debugging using the mobile browser’s developer tools, but I couldn’t find anything unusual in the console logs (no errors are thrown) but there is something like ="Feature is disabled". This line appears in my every project these days, and i have not any idea about this, according to my research it is because any specific feature or function is not currently available or has been turned off and i am trying to access that. i don’t know about this thing/
Updated Three.js to the latest version and ensured all dependencies are compatible with React Vite.

Verified that I’m using a mobile-friendly canvas size and correctly handling window resizing in my Three.js setup.

// Imports
import { Suspense, useEffect, useState } from "react";
import { Canvas } from "@react-three/fiber";
import { OrbitControls, Preload, useGLTF } from "@react-three/drei";
import CanvasLoader from "../Loader";

// Computers Component
const Computers = ({ isMobile }) => {
    const computer = useGLTF("./desktop_pc/scene.gltf");
    return (
        <mesh>
            <hemisphereLight intensity={3} groundColor="black" />
            <spotLight
                position={[-20, 50, 10]}
                angle={0.12}
                penumbra={1}
                intensity={1}
                castShadow
                shadow-mapSize={1024}
            />
            <pointLight intensity={1} />
            <primitive
                object={computer.scene}
                scale={isMobile ? 0.7 : 0.75}
                position={isMobile ? [0, -3, -2.2] : [0, -3.25, -1.5]}
                rotation={[-0.01, -0.2, -0.1]}
            />
        </mesh>
    );
};

const ComputersCanvas = () => {
    const [isMobile, setIsMobile] = useState(false);

    useEffect(() => {
        const mediaQuery = window.matchMedia("(max-width: 400px)");

        setIsMobile(mediaQuery.matches);

        const handleMediaQueryChange = (event) => {
            setIsMobile(event.matches);
        };

        mediaQuery.addEventListener("change", handleMediaQueryChange);

        return () => {
            mediaQuery.removeEventListener("change", handleMediaQueryChange);
        };
    }, []);

//Rendering the Canvas
    return (
        <Canvas
            frameloop='demand'
            shadows
            dpr={[1, 2]}
            camera={{ position: [20, 3, 5], fov: 25 }}
            gl={{ preserveDrawingBuffer: true }}
        >
            <Suspense fallback={<CanvasLoader />}>
                <OrbitControls
                    enableZoom={false}
                    maxPolarAngle={Math.PI / 2}
                    minPolarAngle={Math.PI / 2}
                />
                <Computers isMobile={isMobile} />
            </Suspense>

            <Preload all />
        </Canvas>
    );
};
export default ComputersCanvas;

You need to sign in to view this answers

Related Post