React Three Fiber (R3F): Декларативний 3D та WebGL у дереві компонентів

'use client';

import * as React from 'react';
import { useFrame } from '@react-three/fiber';
import type { Mesh } from 'three';

export interface InteractiveMeshNodeProps {
  readonly wireframe: boolean;
  readonly baseColor: string;
}

export function InteractiveMeshNode({ wireframe, baseColor }: InteractiveMeshNodeProps) {
  // Посилання на нативний інстанс THREE.Mesh для високочастотної мутації
  const meshRef = React.useRef<Mesh>(null);
  const [isHovered, setIsHovered] = React.useState(false);

  // Цикл кадру WebGL: 60/120 FPS без виклику ререндера React
  useFrame((state, delta) => {
    if (!meshRef.current) return;

    // Обертання з урахуванням часу delta (однакова швидкість на 60 Гц та 144 Гц)
    const speedMultiplier = isHovered ? 1.2 : 0.4;
    meshRef.current.rotation.y += delta * speedMultiplier;
    meshRef.current.rotation.x += delta * (speedMultiplier * 0.5);

    // Плавне синусоїдальне погойдування по висоті
    meshRef.current.position.y = 0.5 + Math.sin(state.clock.elapsedTime * 1.5) * 0.15;
  });

  return (
    <mesh
      ref={meshRef}
      position={[0, 0.5, 0]}
      castShadow
      receiveShadow
      onPointerOver={(e) => {
        e.stopPropagation();
        setIsHovered(true);
      }}
      onPointerOut={() => setIsHovered(false)}
    >
      {/* Тороїдальний вузол високої щільності полігонів */}
      <torusKnotGeometry args={[1, 0.32, 128, 32]} />
      <meshStandardMaterial
        color={isHovered ? '#06B6D4' : baseColor}
        roughness={0.15}
        metalness={0.85}
        wireframe={wireframe}
      />
    </mesh>
  );
}

'use client';

import * as React from 'react';
import { Canvas } from '@react-three/fiber';
import { OrbitControls, ContactShadows, Environment } from '@react-three/drei';
import { InteractiveMeshNode } from './InteractiveMeshNode';

export function ProductViewer3D() {
  const [wireframe, setWireframe] = React.useState(false);
  const [color, setColor] = React.useState('#8B5CF6');

  return (
    <div className="relative w-full max-w-2xl mx-auto rounded-3xl overflow-hidden bg-[#0A0A12] border border-border shadow-2xl">
      {/* 3D Canvas Контейнер */}
      <div className="w-full h-[420px]">
        <Canvas
          shadows
          camera={{ position: [0, 1.8, 4.2], fov: 45 }}
          dpr={[1, 1.5]} // Захист GPU від тротлінгу на 4K/Retina екранах
          gl={{
            powerPreference: 'high-performance',
            antialias: true,
          }}
        >
          {/* Фоновий колір сцени */}
          <color attach="background" args={['#0A0A12']} />

          <React.Suspense fallback={null}>
            {/* Реалістичне HDR-освітлення оточення */}
            <Environment preset="city" />

            {/* Тривимірна деталь */}
            <InteractiveMeshNode wireframe={wireframe} baseColor={color} />

            {/* М'які контактні тіні під об'єктом */}
            <ContactShadows
              position={[0, -0.6, 0]}
              opacity={0.65}
              scale={8}
              blur={2.2}
              far={4}
            />
          </React.Suspense>

          {/* Інтерактивне керування камерою */}
          <OrbitControls
            enablePan={false}
            minDistance={2.5}
            maxDistance={7}
            minPolarAngle={Math.PI / 6}
            maxPolarAngle={Math.PI / 2}
          />
        </Canvas>
      </div>

      {/* Панель керування параметрами моделі */}
      <div className="p-4 bg-bg-surface/90 border-t border-border backdrop-blur-md flex items-center justify-between">
        <div className="flex items-center gap-2">
          <button
            type="button"
            onClick={() => setColor('#8B5CF6')}
            className={`w-6 h-6 rounded-full bg-[#8B5CF6] border-2 transition-transform cursor-pointer ${
              color === '#8B5CF6' ? 'scale-110 border-white' : 'border-transparent'
            }`}
            aria-label="Фіолетовий колір"
          />
          <button
            type="button"
            onClick={() => setColor('#06B6D4')}
            className={`w-6 h-6 rounded-full bg-[#06B6D4] border-2 transition-transform cursor-pointer ${
              color === '#06B6D4' ? 'scale-110 border-white' : 'border-transparent'
            }`}
            aria-label="Блакитний колір"
          />
          <button
            type="button"
            onClick={() => setColor('#10B981')}
            className={`w-6 h-6 rounded-full bg-[#10B981] border-2 transition-transform cursor-pointer ${
              color === '#10B981' ? 'scale-110 border-white' : 'border-transparent'
            }`}
            aria-label="Смарагдовий колір"
          />
        </div>

        <button
          type="button"
          onClick={() => setWireframe(!wireframe)}
          className={`px-3 py-1.5 text-xs font-mono font-semibold rounded-xl border transition-colors cursor-pointer ${
            wireframe
              ? 'bg-accent-violet text-white border-accent-violet'
              : 'bg-bg-elevated text-text-muted border-border hover:text-text-primary'
          }`}
        >
          {wireframe ? 'Каркас: УВІМК' : 'Каркас: ВИМК'}
        </button>
      </div>

      {/* Інформаційний бейдж специфікації */}
      <div className="absolute top-4 left-4 pointer-events-none text-[10px] font-mono font-bold uppercase tracking-wider text-text-muted bg-black/60 px-2.5 py-1 rounded-md border border-white/10 backdrop-blur-sm">
        R3F WebGL 2.0 | 120 FPS GPU Loop
      </div>
    </div>
  );
}