feat(): Adding the characters

ar1603 · ar1603 · commit 1bf22315351b · 2025-01-17T04:28:10.000+05:30
diff --git a/.env b/.env
@@ -0,0 +1,2 @@
+GENERATE_SOURCEMAP=false
+
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -8,15 +8,15 @@
     "eslint:recommended",
     "plugin:@typescript-eslint/recommended",
     "plugin:react/recommended",
+    "plugin:@react-three/recommended",
     "react-app"
-    // "prettier" // prettier
   ],
   "parserOptions": {
     "ecmaVersion": "latest",
     "sourceType": "module",
     "project": ["./tsconfig.json"]
   },
-  "plugins": ["react"],
+  "plugins": ["react", "@react-three"],
   "rules": {
     "react/react-in-jsx-scope": "off",
     "no-unused-vars": "off",
diff --git a/package.json b/package.json
@@ -26,6 +26,9 @@
     "@chakra-ui/react": "^2.8.2",
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.5",
+    "@react-three/drei": "^9.121.2",
+    "@react-three/fiber": "^8.17.12",
+    "@react-three/postprocessing": "^2.16.6",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
@@ -35,6 +38,7 @@
     "@types/react-dom": "^18.2.22",
     "framer-motion": "^11.1.9",
     "fuse.js": "^7.0.0",
+    "gsap": "^3.12.7",
     "i18next": "^23.11.2",
     "i18next-browser-languagedetector": "^7.2.1",
     "immer": "^10.0.4",
@@ -47,6 +51,7 @@
     "react-scripts": "5.0.1",
     "react-social-icons": "^6.16.0",
     "react-type-animation": "^3.2.0",
+    "three": "^0.172.0",
     "typescript": "^4.9.5",
     "web-vitals": "^2.1.4",
     "zustand": "^4.5.2"
@@ -77,11 +82,13 @@
     "@craco/craco": "^7.1.0",
     "@craco/types": "^7.1.0",
     "@jest/globals": "^29.7.0",
+    "@react-three/eslint-plugin": "^0.1.2",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
     "@types/jest": "^29.5.12",
     "@types/react-test-renderer": "^18.3.0",
+    "@types/three": "^0.172.0",
     "babel-jest": "^29.7.0",
     "cypress": "^13.8.1",
     "eslint": "^8.0.1",
diff --git a/public/adamHead.glb b/public/adamHead.glb
diff --git a/public/lieutenantHead.glb b/public/lieutenantHead.glb
diff --git a/src/components/Cursor/Cursor.tsx b/src/components/Cursor/Cursor.tsx
@@ -1,5 +1,5 @@
 import { motion } from 'framer-motion';
-import { useRef } from 'react';
+import { useEffect, useRef } from 'react';
 import { useSpringMousePosition } from '../../hooks';
 import { useCursor } from './CursorProvider';
 
@@ -23,6 +23,12 @@ const FollowCursor = () => {
     borderRadius: insets ? borderRadius ?? '5px' : '50%',
   };
 
+  useEffect(() => {
+    // Initial position
+
+    ref.current!.style.transform = `translate(${x}px, ${y}px)`;
+  }, [x, y, insets]);
+
   return (
     <motion.div
       className="cursor"
diff --git a/src/components/Lights/Lights.tsx b/src/components/Lights/Lights.tsx
@@ -6,13 +6,13 @@ const Lights = () => {
       <Box
         position={'absolute'}
         top={0}
-        left={0}
+        right={0}
         boxShadow={'0 0 40px 10px violet, 0 0 100px 40px violet'}
       />
       <Box
         position={'absolute'}
-        top={'50%'}
-        right={-10}
+        top={'30%'}
+        left={-10}
         boxShadow={
           '0 0 40px 10px violet, 0 0 100px 20px violet, 0 0 140px 30px violet, 0 0 200px 40px violet, 0 0 300px 60px violet'
         }
diff --git a/src/screens/mainFlow/MainScreen.tsx b/src/screens/mainFlow/MainScreen.tsx
@@ -1,8 +1,13 @@
 import { Text } from '@chakra-ui/react';
 import { TitleBoxContainer, Lights } from '@components';
 import { NavigationBar, SocialNavigation } from './components';
+import { RobotScene } from './scene';
+import { useState } from 'react';
 
 const MainScreen = () => {
+  const [characterType, setCharacterType] = useState<'adam' | 'lieutenant'>(
+    'lieutenant',
+  );
   return (
     <TitleBoxContainer
       title={'Amit Raikwar | Portfolio'}
@@ -11,19 +16,14 @@ const MainScreen = () => {
       minW={'100vw'}
       display={'flex'}
     >
+      <RobotScene type={characterType} />
       <Lights />
-      <NavigationBar />
+      <NavigationBar
+        handleCharacterClick={(type: 'adam' | 'lieutenant') => {
+          setCharacterType(type);
+        }}
+      />
       <SocialNavigation />
-      <Text
-        fontSize={'4xl'}
-        color={'white'}
-        position={'absolute'}
-        top={'50%'}
-        left={'50%'}
-        transform={'translate(-50%, -50%)'}
-      >
-        AMIT Raikwar
-      </Text>
     </TitleBoxContainer>
   );
 };
diff --git a/src/screens/mainFlow/components/NavigationBar.tsx b/src/screens/mainFlow/components/NavigationBar.tsx
@@ -1,7 +1,19 @@
-import { HStack } from '@chakra-ui/react';
+import {
+  Button,
+  HStack,
+  Menu,
+  MenuButton,
+  MenuItem,
+  MenuList,
+  Text,
+} from '@chakra-ui/react';
 import { LinkButton } from '@components';
 
-const NavigationBar = () => {
+const NavigationBar = ({
+  handleCharacterClick: handlerCharacterClick,
+}: {
+  handleCharacterClick: (type: 'adam' | 'lieutenant') => void;
+}) => {
   return (
     <HStack
       position={'fixed'}
@@ -40,6 +52,36 @@ const NavigationBar = () => {
           fontSize={'xl'}
           animationOnHover
         />
+        <Menu>
+          <MenuButton>
+            <LinkButton
+              key={'more'}
+              text={'Character'}
+              href={'#more'}
+              fontSize={'xl'}
+              withUnderline
+            />
+          </MenuButton>
+          <MenuList
+            style={{
+              backgroundColor: 'transparent',
+              color: 'violet',
+              padding: '0px',
+              boxShadow: '0px 0px 20px 8px violet',
+            }}
+          >
+            <MenuItem onClick={() => handlerCharacterClick('adam')}>
+              <Text key={'adam'} fontSize={'xl'}>
+                Adam
+              </Text>
+            </MenuItem>
+            <MenuItem onClick={() => handlerCharacterClick('lieutenant')}>
+              <Text key={'Lieutenant'} fontSize={'xl'}>
+                Lieutenant
+              </Text>
+            </MenuItem>
+          </MenuList>
+        </Menu>
       </HStack>
     </HStack>
   );
diff --git a/src/screens/mainFlow/components/SocialNavigation.tsx b/src/screens/mainFlow/components/SocialNavigation.tsx
@@ -43,7 +43,7 @@ const SocialNavigation = () => {
       ref={ref}
       position={'fixed'}
       bottom={20}
-      left={10}
+      right={10}
       px={2}
       py={5}
       border={'1px solid white'}
diff --git a/src/screens/mainFlow/scene/AdamHead.jsx b/src/screens/mainFlow/scene/AdamHead.jsx
@@ -0,0 +1,32 @@
+/* eslint-disable react/no-unknown-property */
+/*
+Auto-generated by: https://github.com/pmndrs/gltfjsx
+ExporterVersion: 2.2.0
+*/
+
+import { useGLTF } from '@react-three/drei';
+import { forwardRef } from 'react';
+
+useGLTF.preload('adamHead.glb');
+
+const Model = forwardRef((props, ref) => {
+  const { scene } = useGLTF('adamHead.glb');
+
+  scene.traverse((child) => {
+    if (child.isMesh) {
+      child.castShadow = true;
+      child.receiveShadow = true;
+      child.material.metalness = 0.7;
+      child.material.roughness = 0.2;
+      child.material.envMapIntensity = 1;
+    }
+  });
+  return (
+    <group ref={ref} position={[0, -1, -2]}>
+      <primitive object={scene} {...props} />
+    </group>
+  );
+});
+Model.displayName = 'Model';
+
+export default Model;
diff --git a/src/screens/mainFlow/scene/LieutenantHead.jsx b/src/screens/mainFlow/scene/LieutenantHead.jsx
@@ -0,0 +1,32 @@
+/* eslint-disable react/no-unknown-property */
+/*
+Auto-generated by: https://github.com/pmndrs/gltfjsx
+ExporterVersion: 2.2.0
+*/
+
+import { useGLTF } from '@react-three/drei';
+import { forwardRef } from 'react';
+
+useGLTF.preload('lieutenantHead.glb');
+
+const Model = forwardRef((props, ref) => {
+  const { scene } = useGLTF('lieutenantHead.glb');
+
+  scene.traverse((child) => {
+    if (child.isMesh) {
+      child.castShadow = true;
+      child.receiveShadow = true;
+      child.material.metalness = 0.5;
+      child.material.roughness = 0.2;
+      child.material.envMapIntensity = 1;
+    }
+  });
+  return (
+    <group ref={ref} position={[0, 0, -1]}>
+      <primitive object={scene} {...props} />
+    </group>
+  );
+});
+Model.displayName = 'Model';
+
+export default Model;
diff --git a/src/screens/mainFlow/scene/RobotScene.tsx b/src/screens/mainFlow/scene/RobotScene.tsx
@@ -0,0 +1,91 @@
+/* eslint-disable react/no-unknown-property */
+import { Canvas, ThreeElements } from '@react-three/fiber';
+import { lazy, Suspense, useEffect, useRef } from 'react';
+
+import {
+  Environment,
+  Html,
+  ScrollControls,
+  useProgress,
+  useScroll,
+} from '@react-three/drei';
+import { Box, Progress } from '@chakra-ui/react';
+import { useMousePositions, useSpringMousePosition } from '@hooks';
+import gsap from 'gsap';
+import { useAnimate } from 'framer-motion';
+import { has } from 'lodash';
+import { Mesh } from 'three';
+
+const LoaderComponent = () => {
+  const { progress } = useProgress();
+  return (
+    <Html center>
+      <Box width="100vw" height="100vh">
+        <Progress width={300} value={progress} max={100} />
+      </Box>
+    </Html>
+  );
+};
+
+const AdamHead = lazy(() => import('./AdamHead'));
+const LieutenantHead = lazy(() => import('./LieutenantHead'));
+
+const RobotScene = ({
+  type = 'lieutenant',
+}: {
+  type: 'adam' | 'lieutenant';
+}) => {
+  const { x, y } = useMousePositions();
+  const ref = useRef<Mesh | null>(null);
+  const tl = useRef<gsap.core.Timeline>();
+
+  useEffect(() => {
+    tl.current = gsap.timeline({
+      defaults: {
+        ease: 'power3.out',
+      },
+    });
+    if (!ref.current) return;
+    tl.current.to(ref.current.rotation, {
+      y: x !== 0 ? x / 2500 - 0.25 : -0.25,
+      x: y !== 0 ? -y / 2500 - 0.2 : -0.2,
+      duration: 1.5,
+    });
+
+    tl.current?.play();
+  }, [x, y]);
+
+  return (
+    <Canvas
+      flat
+      shadows
+      style={{
+        height: '100vh',
+        width: '100vw',
+        backgroundColor: 'transparent',
+      }}
+      gl={{ antialias: true }}
+      dpr={[1, 2]}
+      performance={{ min: 0.1, max: 1 }}
+      camera={{
+        position: [0, -5, -20],
+        fov: 10,
+      }}
+    >
+      <ambientLight intensity={0.5} color={'violet'} />
+      <spotLight position={[10, 10, 10]} angle={0.15} penumbra={1} />
+      <Suspense fallback={<LoaderComponent />}>
+        <ScrollControls pages={3} damping={10}>
+          {type === 'adam' ? (
+            <AdamHead ref={ref} />
+          ) : (
+            <LieutenantHead ref={ref} />
+          )}
+        </ScrollControls>
+      </Suspense>
+      <Environment preset="dawn" blur={0.2} />
+    </Canvas>
+  );
+};
+
+export default RobotScene;
diff --git a/src/screens/mainFlow/scene/index.ts b/src/screens/mainFlow/scene/index.ts
@@ -0,0 +1 @@
+export { default as RobotScene } from './RobotScene';
diff --git a/tsconfig.json b/tsconfig.json
@@ -22,6 +22,7 @@
     "cypress",
     "cypress.config.ts",
     "__mocks__",
-    "src/screens/mainFlow/Contact/Contact.tsx"
-  ]
+    "src/screens/mainFlow/Contact/Contact.tsx",
+    "src/screens/mainFlow/scene/AdamHead.tsx"
+, "src/screens/mainFlow/scene/LieutenantHead.jsx"  ]
 }
diff --git a/yarn.lock b/yarn.lock
