Open olibar194 opened 1 year ago
Description: Smooth effect of transition when the mouse leaves the card
Changes:
- Adds the tailwind className 'transition-all' to the component
So I deployed my site on vercel, and its fine when the site is visited using PC. BUT, if a person using mobile/android, the COMPUTER 3d will go blank or white. Displaying a white screen. ALSO the first 5 balls are going white/blank also in mobile. I badlyyyyy need help with this as this is my first stepping stone in my developer journey. PLEASE HELP. Or advice any alternatives.
@Fan-Karwanta replace part of computer canvas with this
const ComputersCanvas = () => { const [isMobile, setIsMobile] = useState(false);
useEffect(() => { const mediaQuery = window.matchMedia("(max-width: 500px)");
setIsMobile(mediaQuery.matches);
const onMediaQueryChange = (event) => {
setIsMobile(event.matches);
};
mediaQuery.addEventListener("change", onMediaQueryChange);
return () => {
mediaQuery.removeEventListener("change", onMediaQueryChange);
};
}, []);
const [initialized, setInitialized] = useState(false);
useEffect(() => { if (!initialized) { setInitialized(true); } }, [initialized]);
if (!initialized) { return
; }return ( <Canvas frameloop="demand" shadows camera={{ position: [20, 3, 5], fov: 25 }} gl={{ preserveDrawingBuffer: true, alpha: true }}
<Suspense fallback={
}> <OrbitControls enableZoom={false} maxPolarAngle={Math.PI / 2} minPolarAngle={Math.PI / 2} /> ); };
maybe it will help.
Description: Smooth effect of transition when the mouse leaves the card
Changes: