Matiss/Mati.ss
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Implement dark mode and mobile optimizations

Browse Source 
This commit introduces dark mode support by defining CSS variables and applies optimizations for mobile devices by reducing polygon counts in 3D models.

Co-authored-by: matissjurevics <matissjurevics@gmail.com>
This commit is contained in:
Cursor Agent
2025-12-17 18:26:16 +00:00
parent 9e22da569c
commit ea2fc6a090
5 changed files with 74 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
src/canvas/Globe.jsx
View File

@@ -19,6 +19,12 @@ const GlobeMesh = () => {
const groupRef = useRef();
const [bordersTexture, setBordersTexture] = useState(null);
// Detect mobile device and reduce polygon count accordingly
const isMobile = useMemo(() => {
return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ||
(window.innerWidth <= 768);
}, []);
// Generate Borders Texture using D3
useEffect(() => {
const generateTexture = async () => {
@@ -69,17 +75,23 @@ const GlobeMesh = () => {
}
});
// Reduce segment counts for mobile devices
const baseSphereSegments = isMobile ? 24 : 64; // Reduce from 64x64 to 24x24 on mobile
const wireframeSegments = isMobile ? 16 : 32; // Reduce from 32x32 to 16x16 on mobile
const markerSegments = isMobile ? 8 : 16; // Reduce from 16x16 to 8x8 on mobile
const ringSegments = isMobile ? 16 : 32; // Reduce from 32 to 16 on mobile
return (
<group ref={groupRef}>
{/* 1. Base Dark Sphere (blocks background stars/wireframe from showing through backface) */}
<mesh>
<sphereGeometry args={[1.95, 64, 64]} />
<sphereGeometry args={[1.95, baseSphereSegments, baseSphereSegments]} />
<meshBasicMaterial color="#000000" />
</mesh>
{/* 2. Light Wireframe Sphere - Outer Cage */}
<mesh>
<sphereGeometry args={[2.0, 32, 32]} />
<sphereGeometry args={[2.0, wireframeSegments, wireframeSegments]} />
<meshBasicMaterial
color="#444"
wireframe={true}
@@ -91,7 +103,7 @@ const GlobeMesh = () => {
{/* 3. Borders Sphere (Texture) */}
{bordersTexture && (
<mesh>
<sphereGeometry args={[2.01, 64, 64]} />
<sphereGeometry args={[2.01, baseSphereSegments, baseSphereSegments]} />
<meshBasicMaterial
map={bordersTexture}
transparent={true}
@@ -105,11 +117,11 @@ const GlobeMesh = () => {
{/* Ireland Marker */}
<mesh position={irelandPos}>
<sphereGeometry args={[0.04, 16, 16]} />
<sphereGeometry args={[0.04, markerSegments, markerSegments]} />
<meshBasicMaterial color="#ff4d00" />
</mesh>
<mesh position={irelandPos}>
<ringGeometry args={[0.06, 0.09, 32]} />
<ringGeometry args={[0.06, 0.09, ringSegments]} />
<meshBasicMaterial color="#ff4d00" side={THREE.DoubleSide} transparent opacity={0.6} />
</mesh>
</group>

19
src/canvas/HeroModel.jsx
View File

@@ -8,8 +8,15 @@ const Terrain = () => {
const materialRef = useRef();
const noise3D = useMemo(() => createNoise3D(), []);
// Create geometry with HIGHER segment count for smoother, denser wave like the reference
const geometry = useMemo(() => new THREE.PlaneGeometry(20, 20, 100, 100), []);
// Detect mobile device and reduce polygon count accordingly
const isMobile = useMemo(() => {
return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ||
(window.innerWidth <= 768);
}, []);
// Create geometry with reduced segment count for mobile devices
const segments = isMobile ? 40 : 100; // Reduce from 100x100 to 40x40 on mobile (84% reduction)
const geometry = useMemo(() => new THREE.PlaneGeometry(20, 20, segments, segments), [segments]);
useFrame((state) => {
if (mesh.current) {
@@ -52,6 +59,12 @@ const Terrain = () => {
};
const HeroModel = () => {
// Detect dark mode for fog color
const fogColor = useMemo(() => {
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
return prefersDark ? '#0a0a0a' : '#e4e4e4';
}, []);
return (
<div style={{ width: '100%', height: '100vh', position: 'absolute', top: 0, left: 0, zIndex: 0 }}>
<Canvas
@@ -66,7 +79,7 @@ const HeroModel = () => {
<Terrain />
{/* Fog to fade edges into background color */}
<fog attach="fog" args={['#e4e4e4', 5, 20]} />
<fog attach="fog" args={[fogColor, 5, 20]} />
</Suspense>
</Canvas>
</div>