r3f-mobile-patterns

React Three Fiber Mobile Patterns

When to Use

Use this skill when:

• Building mobile-first R3F games
• Implementing touch-based 3D controls
• Adapting quality for mobile devices
• Optimizing battery life
• Creating responsive 3D layouts

Core Principles

1. Mobile First: Design for mobile, enhance for desktop
2. Touch Optimized: Gestures over mouse events
3. Adaptive Quality: Scale based on device capabilities
4. Battery Aware: Reduce work when battery is low
5. Responsive: Adapt to screen size and orientation
6. Progressive Enhancement: Core experience on all devices

Implementation

1. Device Detection Hook

// hooks/useDeviceCapabilities.ts
import { useState, useEffect } from 'react';

export interface DeviceCapabilities {
  isMobile: boolean;
  isTablet: boolean;
  isLowEnd: boolean;
  hasTouchScreen: boolean;
  pixelRatio: number;
  gpuTier: 'low' | 'medium' | 'high';
  maxTextureSize: number;
  screenWidth: number;
  screenHeight: number;
  orientation: 'portrait' | 'landscape';
  batteryLevel?: number;
  isCharging?: boolean;
}

export function useDeviceCapabilities(): DeviceCapabilities {
  const [capabilities, setCapabilities] = useState<DeviceCapabilities>(() => ({
    isMobile: /iPhone|iPad|iPod|Android/i.test(navigator.userAgent),
    isTablet: /iPad|Android/i.test(navigator.userAgent) && window.innerWidth >= 768,
    isLowEnd: navigator.hardwareConcurrency ? navigator.hardwareConcurrency <= 4 : true,
    hasTouchScreen: 'ontouchstart' in window || navigator.maxTouchPoints > 0,
    pixelRatio: Math.min(window.devicePixelRatio || 1, 2),
    gpuTier: 'medium',
    maxTextureSize: 2048,
    screenWidth: window.innerWidth,
    screenHeight: window.innerHeight,
    orientation: window.innerWidth > window.innerHeight ? 'landscape' : 'portrait',
  }));

  useEffect(() => {
    // Detect GPU tier (simplified)
    const canvas = document.createElement('canvas');
    const gl = canvas.getContext('webgl') || canvas.getContext('experimental-webgl');

    if (gl) {
      const debugInfo = gl.getExtension('WEBGL_debug_renderer_info');
      const renderer = debugInfo
        ? gl.getParameter(debugInfo.UNMASKED_RENDERER_WEBGL)
        : '';

      const maxTexSize = gl.getParameter(gl.MAX_TEXTURE_SIZE);

      let gpuTier: 'low' | 'medium' | 'high' = 'medium';

      if (/Mali-4|Adreno \(TM\) 3|PowerVR SGX/i.test(renderer)) {
        gpuTier = 'low';
      } else if (/Apple A1[2-9]|Adreno \(TM\) [67]|Mali-G7/i.test(renderer)) {
        gpuTier = 'high';
      }

      setCapabilities((prev) => ({
        ...prev,
        gpuTier,
        maxTextureSize: maxTexSize,
      }));
    }

    // Battery API
    if ('getBattery' in navigator) {
      (navigator as any).getBattery().then((battery: any) => {
        const updateBattery = () => {
          setCapabilities((prev) => ({
            ...prev,
            batteryLevel: battery.level,
            isCharging: battery.charging,
          }));
        };

        updateBattery();
        battery.addEventListener('levelchange', updateBattery);
        battery.addEventListener('chargingchange', updateBattery);
      });
    }

    // Orientation changes
    const handleResize = () => {
      setCapabilities((prev) => ({
        ...prev,
        screenWidth: window.innerWidth,
        screenHeight: window.innerHeight,
        orientation: window.innerWidth > window.innerHeight ? 'landscape' : 'portrait',
      }));
    };

    window.addEventListener('resize', handleResize);
    window.addEventListener('orientationchange', handleResize);

    return () => {
      window.removeEventListener('resize', handleResize);
      window.removeEventListener('orientationchange', handleResize);
    };
  }, []);

  return capabilities;
}