53 lines
1.8 KiB
TypeScript
53 lines
1.8 KiB
TypeScript
'use client';
|
|
|
|
import { Canvas, useFrame } from '@react-three/fiber';
|
|
import { Float, Box, Sphere } from '@react-three/drei';
|
|
import { useRef } from 'react';
|
|
import * as THREE from 'three';
|
|
|
|
function RotatingLogo({ isScrolled }: { isScrolled: boolean }) {
|
|
const group = useRef<THREE.Group>(null);
|
|
|
|
useFrame((state, delta) => {
|
|
if (group.current) {
|
|
group.current.rotation.y += delta;
|
|
group.current.rotation.x = Math.sin(state.clock.elapsedTime * 2) * 0.1;
|
|
}
|
|
});
|
|
|
|
const color = isScrolled ? '#00bc84' : '#10b981';
|
|
|
|
return (
|
|
<Float speed={3} rotationIntensity={0.5} floatIntensity={2}>
|
|
<group ref={group} scale={1.2}>
|
|
{/* Abstract "J" shape for Jaiben */}
|
|
<Box args={[0.25, 1.2, 0.25]} position={[0.2, 0, 0]}>
|
|
<meshStandardMaterial color={color} roughness={0.1} metalness={0.8} />
|
|
</Box>
|
|
<Box args={[0.8, 0.25, 0.25]} position={[-0.075, -0.475, 0]}>
|
|
<meshStandardMaterial color={color} roughness={0.1} metalness={0.8} />
|
|
</Box>
|
|
<Sphere args={[0.2, 32, 32]} position={[-0.3, 0.5, 0]}>
|
|
<meshStandardMaterial color="#f97316" roughness={0.2} metalness={0.5} emissive="#f97316" emissiveIntensity={0.2} />
|
|
</Sphere>
|
|
</group>
|
|
</Float>
|
|
);
|
|
}
|
|
|
|
export default function Logo3D({ scrolled = false, className = "w-12 h-12" }: { scrolled?: boolean, className?: string }) {
|
|
return (
|
|
<div className={`${className} pointer-events-none relative z-10 flex-shrink-0`}>
|
|
<Canvas
|
|
camera={{ position: [0, 0, 3.5], fov: 50 }}
|
|
gl={{ alpha: true, antialias: true }}
|
|
>
|
|
<ambientLight intensity={0.6} />
|
|
<directionalLight position={[2, 5, 2]} intensity={1.5} />
|
|
<directionalLight position={[-2, -2, 2]} intensity={0.5} color="#00bc84" />
|
|
<RotatingLogo isScrolled={scrolled} />
|
|
</Canvas>
|
|
</div>
|
|
);
|
|
}
|