landing

2026-02-25 07:27:30 +00:00
parent acd7713c86
commit cf121e2fee
11 changed files with 413 additions and 21 deletions
@@ -0,0 +1,64 @@
+import { Canvas, useThree } from '@react-three/fiber';
+import { OrbitControls, useGLTF, useAnimations } from '@react-three/drei';
+import { useEffect, useState, useRef } from 'react';
+
+function DuckModel({ onLoaded }: { onLoaded: () => void }) {
+  const character = useGLTF('https://static.officer.dev/duck3D/Character_output.glb');
+  const animations = useGLTF('https://static.officer.dev/duck3D/Meshy_Merged_Animations.glb');
+  const meshRef = useRef<any>(null);
+  const { actions } = useAnimations(animations.animations, meshRef);
+
+  useEffect(() => {
+    onLoaded();
+  }, [character, animations, onLoaded]);
+
+  useEffect(() => {
+    if (!actions) return;
+    const action = actions['Walking'];
+    if (!action) return;
+    action.reset();
+    action.setLoop(2201, Infinity);
+    action.clampWhenFinished = false;
+    action.fadeIn(0.4);
+    action.play();
+  }, [actions]);
+
+  return <primitive ref={meshRef} object={character.scene} position={[0, -0.2, 0]} scale={4.5} rotation={[-0.1, (10 * Math.PI) / 180, 0]} />;
+}
+
+function Camera() {
+  const { camera } = useThree();
+  const controlsRef = useRef<any>(null);
+
+  useEffect(() => {
+    if (controlsRef.current) {
+      controlsRef.current.target.set(0.3, 3.29, -0.4);
+      camera.position.set(2.89, 5.24, 7.38);
+      controlsRef.current.update();
+    }
+  }, [camera]);
+
+  return <OrbitControls ref={controlsRef} enabled={false} target={[0.3, 3.29, -0.4]} />;
+}
+
+export function DuckAvatar() {
+  const [isLoaded, setIsLoaded] = useState(false);
+
+  return (
+    <div
+      className="fixed top-12 md:top-auto md:bottom-0 left-1/2 -translate-x-1/2 w-[60vh] h-[75vh] overflow-visible z-1 pointer-events-none"
+      style={{ background: 'transparent', opacity: isLoaded ? 1 : 0 }}
+    >
+      <div className="w-full h-full pointer-events-none overflow-visible" style={{ background: 'transparent' }}>
+        <Canvas camera={{ position: [2.89, 5.24, 7.38], fov: 65, near: 0.1, far: 1000 }} style={{ background: 'transparent' }}>
+          <ambientLight intensity={1.5} />
+          <directionalLight position={[10, 10, 5]} intensity={2} />
+          <directionalLight position={[-10, -10, -5]} intensity={1} />
+          <pointLight position={[0, 5, 0]} intensity={1.5} />
+          <Camera />
+          <DuckModel onLoaded={() => setIsLoaded(true)} />
+        </Canvas>
+      </div>
+    </div>
+  );
+}