85 lines
2.1 KiB
TypeScript
85 lines
2.1 KiB
TypeScript
"use client";
|
|
|
|
import React, { useRef } from 'react';
|
|
import { Canvas, useFrame } from '@react-three/fiber';
|
|
import { OrbitControls, PerspectiveCamera, useTexture } from '@react-three/drei';
|
|
import * as THREE from 'three';
|
|
|
|
function RotatingCube() {
|
|
const meshRef = useRef<THREE.Mesh>(null);
|
|
|
|
// Animation loop
|
|
useFrame((state, delta) => {
|
|
if (meshRef.current) {
|
|
meshRef.current.rotation.x += delta * 0.2;
|
|
meshRef.current.rotation.y += delta * 0.3;
|
|
}
|
|
});
|
|
|
|
return (
|
|
<mesh ref={meshRef} position={[0, 0, 0]} castShadow receiveShadow>
|
|
<boxGeometry args={[2, 2, 2]} />
|
|
<meshStandardMaterial
|
|
color="#D53F8C"
|
|
metalness={0.6}
|
|
roughness={0.2}
|
|
emissive="#300020"
|
|
emissiveIntensity={0.3}
|
|
/>
|
|
</mesh>
|
|
);
|
|
}
|
|
|
|
function FloatingGlobe() {
|
|
const meshRef = useRef<THREE.Mesh>(null);
|
|
|
|
useFrame((state, delta) => {
|
|
if (meshRef.current) {
|
|
meshRef.current.rotation.y += delta * 0.1;
|
|
meshRef.current.position.y = Math.sin(state.clock.elapsedTime * 0.5) * 0.2;
|
|
}
|
|
});
|
|
|
|
return (
|
|
<mesh ref={meshRef} position={[0, 0, 0]} castShadow>
|
|
<sphereGeometry args={[1.5, 64, 64]} />
|
|
<meshStandardMaterial
|
|
color="#111111"
|
|
metalness={0.8}
|
|
roughness={0.1}
|
|
emissive="#D53F8C"
|
|
emissiveIntensity={0.2}
|
|
wireframe={true}
|
|
/>
|
|
</mesh>
|
|
);
|
|
}
|
|
|
|
export default function HeroModel() {
|
|
return (
|
|
<div className="w-full h-[300px] md:h-[400px]">
|
|
<Canvas shadows dpr={[1, 2]}>
|
|
<ambientLight intensity={0.5} />
|
|
<directionalLight
|
|
position={[10, 10, 5]}
|
|
intensity={1}
|
|
castShadow
|
|
shadow-mapSize-width={1024}
|
|
shadow-mapSize-height={1024}
|
|
/>
|
|
<pointLight position={[-10, -10, -10]} color="#D53F8C" intensity={1} />
|
|
|
|
<FloatingGlobe />
|
|
|
|
<PerspectiveCamera makeDefault position={[0, 0, 6]} fov={40} />
|
|
<OrbitControls
|
|
enableZoom={false}
|
|
enablePan={false}
|
|
rotateSpeed={0.5}
|
|
autoRotate
|
|
autoRotateSpeed={0.5}
|
|
/>
|
|
</Canvas>
|
|
</div>
|
|
);
|
|
}
|