diff --git a/frontend/app/(page)/(needProtection)/game/component/Character.tsx b/frontend/app/(page)/(needProtection)/game/component/Character.tsx index 6ca10dd..0ce1dbe 100644 --- a/frontend/app/(page)/(needProtection)/game/component/Character.tsx +++ b/frontend/app/(page)/(needProtection)/game/component/Character.tsx @@ -1,20 +1,13 @@ // @ts-nocheck 'use client' -import { Html, useAnimations, useGLTF } from '@react-three/drei' +import { Html, Text, useAnimations, useGLTF } from '@react-three/drei' import React, { useEffect, useRef } from 'react' import { useCharacterSelectStore, useModalStore, usePlayerStore } from '../lib/store' import { teamEnum } from '../lib/store-type' import { useAuth } from '@/app/hooks/useAuth' +import { useFrame, useThree } from '@react-three/fiber' -const pathObj = { - 0: '/models/custom/custom-model0.gltf', - 1: '/models/custom/custom-model1.gltf', - 2: '/models/custom/custom-model2.gltf', - 3: '/models/custom/custom-model3.gltf', - 4: '/models/custom/custom-model4.gltf', - 5: '/models/custom/custom-model5.gltf', -} export default function Character({ pos }) { const groupRef = useRef() const { userInfo } = useAuth() @@ -33,7 +26,7 @@ export default function Character({ pos }) { // 캐릭터에 그림자 효과 scene.traverse((child) => { - if (child.isMesh) { + if (child.amIMesh) { child.castShadow = true } }) @@ -42,32 +35,40 @@ export default function Character({ pos }) { useEffect(() => { if (!actions) return - actions[playerMoveState].reset().fadeIn(0.2).play( ) + actions[playerMoveState].reset().fadeIn(0.2).play() return () => { if (!actions[playerMoveState]) return actions[playerMoveState].fadeOut(0.2) } }, [playerMoveState]) + const textRef = useRef() + const { camera } = useThree() + + useFrame(() => { + if (textRef.current) { + // 텍스트 오브젝트를 카메라 방향으로 회전 + textRef.current.lookAt(camera.position) + // Y 축을 고정하려면 아래 코드로 조정 + textRef.current.rotation.z = 0 + textRef.current.rotation.y = 0 // Y 축 회전 제거 + } + }) + return ( - {pos && ( - -
- {userInfo && userInfo.nickname} -
- - )} + + {userInfo && userInfo.nickname} +
) } diff --git a/frontend/app/(page)/(needProtection)/game/component/Other.tsx b/frontend/app/(page)/(needProtection)/game/component/Other.tsx index 252f7bd..9b2aa8d 100644 --- a/frontend/app/(page)/(needProtection)/game/component/Other.tsx +++ b/frontend/app/(page)/(needProtection)/game/component/Other.tsx @@ -45,7 +45,7 @@ export default function Character({ pos }) { // 캐릭터에 그림자 효과 scene.traverse((child) => { - if (child.isMesh) { + if (child.amIMesh) { child.castShadow = true } }) diff --git a/frontend/app/(page)/(needProtection)/game/component/gameInfoPanel/GameBoard.tsx b/frontend/app/(page)/(needProtection)/game/component/gameInfoPanel/GameBoard.tsx index 1a08ece..3a90912 100644 --- a/frontend/app/(page)/(needProtection)/game/component/gameInfoPanel/GameBoard.tsx +++ b/frontend/app/(page)/(needProtection)/game/component/gameInfoPanel/GameBoard.tsx @@ -11,9 +11,9 @@ const GameBoard = () => { countdownGame: state.countdownGame, })) - useEffect(() => { - countdownGame() - }, []) + // useEffect(() => { + // countdownGame() + // }, []) const getCurrentContent = () => { switch (gameState) { diff --git a/frontend/app/(page)/(needProtection)/game/component/gameInfoPanel/QuizResult.tsx b/frontend/app/(page)/(needProtection)/game/component/gameInfoPanel/QuizResult.tsx index 40a78ba..9c72519 100644 --- a/frontend/app/(page)/(needProtection)/game/component/gameInfoPanel/QuizResult.tsx +++ b/frontend/app/(page)/(needProtection)/game/component/gameInfoPanel/QuizResult.tsx @@ -1,5 +1,5 @@ import { useEffect, useState } from 'react' -import { rankList, teamColorToCss } from '../../lib/util' +import { rankList, teamColorToCssText } from '../../lib/util' import { wonUserList } from '../../lib/dummy' import { teamEnum } from '../../lib/store-type' @@ -61,7 +61,7 @@ const QuizResult = () => { {wonUser.time}초 {wonUser.nickname} diff --git a/frontend/app/(page)/(needProtection)/game/component/gameInfoPanel/TeamInfo.tsx b/frontend/app/(page)/(needProtection)/game/component/gameInfoPanel/TeamInfo.tsx index 7d7f614..5fe1f23 100644 --- a/frontend/app/(page)/(needProtection)/game/component/gameInfoPanel/TeamInfo.tsx +++ b/frontend/app/(page)/(needProtection)/game/component/gameInfoPanel/TeamInfo.tsx @@ -1,7 +1,7 @@ import React from 'react' import { ITeamInfoProps } from '../../lib/type' import { teamEnum } from '../../lib/store-type' -import { teamColorToCss } from '../../lib/util' +import { teamColorToCssText } from '../../lib/util' const TeamInfo = ({ teamName, @@ -18,9 +18,9 @@ const TeamInfo = ({ }`} >
-

{teamName}

+

{teamName}

{teamColor !== teamEnum.NONE && ( -

팀 점수 {teamScore}

+

팀 점수 {teamScore}

)}