feat(): Adding the new 3d object

Author: ar1603

public/IonDrive.glb

@@ -108,7 +108,7 @@ const WavyBackground = ({
 
   return (
     <div
-      className={'flex flex-col items-center justify-center mx-auto'}
+      className={'flex flex-col items-center justify-center'}
       style={{
         height: '15vh',
         zIndex: 0,
@@ -121,6 +121,7 @@ const WavyBackground = ({
         ref={canvasRef}
         id="canvas"
         style={{
+          zIndex: -1,
           height: '100vh',
           width: '100%',
           ...(isSafari ? { filter: `blur(${blur}px)` } : {}),

public/ReapTheWhirlwind.glb

@@ -1,25 +1,39 @@
 import { useState } from 'react';
 import { CoverText, Lights, MeteorsEffect } from '@components';
-import { CharacterType, RobotScene } from '../scene';
+import { CharacterType, RobotScene1, RobotScene2 } from '../scene';
 import { SocialNavigation } from '../components';
 import { useTranslation } from 'react-i18next';
 import { Box } from '@chakra-ui/react';
 
+const MusicMap: Record<CharacterType, string> = {
+  [CharacterType.ADAM]: '/music/dream.mp3',
+  [CharacterType.LIEUTENANT]: '/music/horror.mp3',
+  [CharacterType.COPERNICUS]: '/music/bg1.mp3',
+  [CharacterType.REAP]: '/music/electro.mp3',
+};
+
 const CoverContent = () => {
   const { t } = useTranslation();
-  const [characterType, setCharacterType] =
-    useState<CharacterType>('copernicus');
+  const [characterType, setCharacterType] = useState<CharacterType>(
+    CharacterType.REAP,
+  );
+
   return (
     <Box minH={'100vh'}>
       <MeteorsEffect number={30} />
-      <RobotScene type={characterType} />
+      {characterType === CharacterType.REAP ? (
+        <RobotScene2 />
+      ) : (
+        <RobotScene1 type={characterType} />
+      )}
       <CoverText
         text={t('coverText.greeting')}
         highlightedText={t('coverText.name')}
         role={t('coverText.role')}
       />
       <Lights />
       <SocialNavigation
+        audioSource={MusicMap[characterType]}
         handleCharacterClick={(type) => {
           setCharacterType(type);
         }}

public/bg.mp3 public/music/bg1.mp3public/bg.mp3 renamed to public/music/bg1.mp3

@@ -37,8 +37,10 @@ const IconProps = {
 
 const SocialNavigation = ({
   handleCharacterClick: handlerCharacterClick,
+  audioSource,
 }: {
   handleCharacterClick: (type: CharacterType) => void;
+  audioSource: string;
 }) => {
   const ref = useRef<HTMLDivElement>(null);
   const [isPlaying, setIsPlaying] = useState(false);
@@ -96,7 +98,7 @@ const SocialNavigation = ({
         onMouseEnter={onMouseEnter(musicRef, '10px')}
         onMouseLeave={onMouseLeave}
       />
-      <audio src="bg.mp3" loop hidden autoPlay>
+      <audio src={audioSource} loop hidden autoPlay>
         <p>
           If you are reading this, it is because your browser does not support
           the audio element.
@@ -129,16 +131,14 @@ const SocialNavigation = ({
               boxShadow: '0px 0px 10px 4px gray',
             }}
           >
-            {(['adam', 'lieutenant', 'copernicus'] as CharacterType[]).map(
-              (character: CharacterType) => (
-                <MenuItem
-                  key={character}
-                  onClick={() => handlerCharacterClick(character)}
-                >
-                  <Text fontSize={'xl'}>{character.toUpperCase()}</Text>
-                </MenuItem>
-              ),
-            )}
+            {Object.values(CharacterType).map((character: CharacterType) => (
+              <MenuItem
+                key={character}
+                onClick={() => handlerCharacterClick(character)}
+              >
+                <Text fontSize={'xl'}>{character.toUpperCase()}</Text>
+              </MenuItem>
+            ))}
           </MenuList>
         </Menu>
       </Box>

public/music/dream.mp3

@@ -7,10 +7,10 @@ ExporterVersion: 2.2.0
 import { useGLTF } from '@react-three/drei';
 import { forwardRef } from 'react';
 
-useGLTF.preload('adamHead.glb');
+useGLTF.preload('/adamHead.glb');
 
 const Model = forwardRef((props, ref) => {
-  const { scene } = useGLTF('adamHead.glb');
+  const { scene } = useGLTF('/adamHead.glb');
 
   scene.traverse((child) => {
     if (child.isMesh) {