icon.tsx

'use client'
import { useGLTF } from '@react-three/drei'
import { useFrame } from '@react-three/fiber'
import { easing } from 'maath'
import { useRef } from 'react'
import { useMousePosition } from 'shared-ui'
import * as THREE from 'three'
import type { GLTF } from 'three-stdlib'

type GLTFResult = GLTF & {
  nodes: {
    0: THREE.Mesh
    1: THREE.Mesh
  }
  materials: {}
}

const ROTATION_MULTIPLIER = 0.2

export function ZOGIcon(props: JSX.IntrinsicElements['group']) {
  const { nodes } = useGLTF('/images/3d-icon.gltf') as GLTFResult
  const groupRef = useRef<THREE.Group>(null)
  const mousePosition = useMousePosition()

  useFrame(() => {
    if (groupRef.current) {
      const targetRotationX = -mousePosition.y * ROTATION_MULTIPLIER * 0.5
      const targetRotationY = mousePosition.x * ROTATION_MULTIPLIER * 0.5
      easing.damp(groupRef.current.rotation, 'x', targetRotationX, 0.5)
      easing.damp(groupRef.current.rotation, 'y', targetRotationY, 0.5)
    }
  })

  return (
    <>
      {/* <Environment preset="city" /> */}
      <group {...props} ref={groupRef} scale={0.009} position={[0, 0, 0]}>
        <ambientLight intensity={0.5} />
        <directionalLight position={[5, 5, 5]} intensity={0.6} />{' '}
        <group rotation={[0, 0, 0]}>
          <mesh geometry={nodes['1'].geometry} position={[200, 0, 0]} scale={[1, 1, 3]}>
            <meshPhysicalMaterial
              transparent
              opacity={1}
              transmission={1}
              thickness={0.8}
              roughness={0.4}
              clearcoat={1}
              ior={5}
              metalness={0.5}
            />
          </mesh>
          <mesh geometry={nodes['0'].geometry} position={[-310, 0, 0]} scale={[1, 1, 3]}>
            <meshPhysicalMaterial
              transparent
              opacity={1}
              transmission={1}
              thickness={0.8}
              roughness={0.4}
              clearcoat={1}
              ior={5}
              metalness={0.5}
            />
          </mesh>
        </group>
      </group>
    </>
  )
}

useGLTF.preload('/images/3d-icon.gltf')