Use actual FBX models for parallax homepage

src/components/home/Models.tsx

@@ -0,0 +1,81 @@
+import { useRef, useMemo } from 'react';
+import { useFrame } from '@react-three/fiber';
+import { useScroll, useFBX } from '@react-three/drei';
+import * as THREE from 'three';
+
+export function Models() {
+  const scroll = useScroll();
+  
+  // Load the actual FBX models from the public folder
+  const heroFBX = useFBX('/3dmodels/MANUAL/Cavins/GEE_TIN.fbx');
+  const featureFBX = useFBX('/3dmodels/Full_AI/Indica/Indica_easy.fbx');
+  const ctaFBX = useFBX('/3dmodels/MANUAL/Fairever/Carton.fbx');
+
+  // Clone them so we don't mutate the cached originals
+  const heroModel = useMemo(() => heroFBX.clone(), [heroFBX]);
+  const featureModel = useMemo(() => featureFBX.clone(), [featureFBX]);
+  const ctaModel = useMemo(() => ctaFBX.clone(), [ctaFBX]);
+
+  const heroRef = useRef<THREE.Group>(null);
+  const featureRef = useRef<THREE.Group>(null);
+  const ctaRef = useRef<THREE.Group>(null);
+
+  useFrame((state, delta) => {
+    const offset = scroll.offset; // 0 to 1
+    
+    if (heroRef.current) {
+      heroRef.current.rotation.y += delta * 0.3;
+      // Fade out and move left as we scroll down
+      heroRef.current.position.y = THREE.MathUtils.lerp(0, 10, offset * 3);
+      heroRef.current.position.x = THREE.MathUtils.lerp(3, -5, offset * 3);
+      
+      // Auto-scale down based on typical FBX sizing
+      const scaleBase = 0.05;
+      heroRef.current.scale.setScalar(THREE.MathUtils.lerp(scaleBase, 0, offset * 3));
+    }
+
+    if (featureRef.current) {
+      featureRef.current.rotation.y += delta * 0.4;
+      
+      const featureProgress = Math.max(0, Math.min(1, (offset - 0.2) * 2));
+      featureRef.current.position.y = THREE.MathUtils.lerp(-10, 0, featureProgress);
+      featureRef.current.position.x = THREE.MathUtils.lerp(-5, -2, featureProgress);
+      
+      const scaleBase = 0.05;
+      if (offset > 0.6) {
+        const exitProgress = (offset - 0.6) * 3;
+        featureRef.current.position.y = THREE.MathUtils.lerp(0, 10, exitProgress);
+        featureRef.current.scale.setScalar(THREE.MathUtils.lerp(scaleBase, 0, exitProgress));
+      } else {
+        featureRef.current.scale.setScalar(scaleBase);
+      }
+    }
+
+    if (ctaRef.current) {
+      ctaRef.current.rotation.y -= delta * 0.3;
+      
+      const ctaProgress = Math.max(0, Math.min(1, (offset - 0.6) * 3));
+      ctaRef.current.position.y = THREE.MathUtils.lerp(-10, -1, ctaProgress);
+      ctaRef.current.position.x = THREE.MathUtils.lerp(5, 2, ctaProgress);
+      
+      const scaleBase = 0.05;
+      ctaRef.current.scale.setScalar(scaleBase);
+    }
+  });
+
+  return (
+    <group>
+      <group ref={heroRef} position={[3, 0, -2]}>
+        <primitive object={heroModel} />
+      </group>
+
+      <group ref={featureRef} position={[-5, -10, -3]}>
+        <primitive object={featureModel} />
+      </group>
+
+      <group ref={ctaRef} position={[5, -10, -2]}>
+        <primitive object={ctaModel} />
+      </group>
+    </group>
+  );
+}