이동 함수 훅으로 분리 및 2가지 방법 모두 남기기

바퀴가 작을경우 몸체가 진행시에 바닥에 부딛혀서 감속됨
힘 부족으로 언덕 못 올라가서 엔진 힘 추가..

전복되었을 때를 위한 일으키기 기능 추가

배경 대장간 느낌 이미지 --> 우주 느낌으로

• 칼을 가운데 이미지로
• 성공 실패를 어떻게 알리냐? .. sound는 추후 작업
• 성공시 : 노란색 빛? -->
• 실패 시 : 검이 까맣게?

아래 반짞이는건 sparkles인데 안 예쁜듯.. 제거예정

#80 연관

https://github.com/pmndrs/drei/blob/master/src/core/SpotLight.tsx

빛이 주변에 퍼지게 할려면 빛이 반사될 물체도 필요함.. 이를 위의 코드 보고 추후 반영

현재로직 : 바라보고 있는 방향으로 전진
문제점 : 오르막길을 제대로 전진하지 못함. --> 경사 문제였음.

튜토리얼 메뉴얼 발전시키기
완성

가이드 내용 추가
만약 다시 보지 않기 클릭 되었을 경우 메뉴얼 생략

#92 에서 테스트 용으로 바꿨떤 이벤트 시간도 돌리기

가장 최근 20개의 강화내역 기록하기

• 성공시 : 노란색 빛? -->
• 실패 시 : 검이 까맣게?
• sound는 추후 작업

1. 훅을 사용하니깐 클라이언트 컴퍼넌트
2. 모델 glb파일 로딩하기
3. 렌더링 확인

3d 요소 초기 렌더링 걸릴 떄 로딩처리

[feat] 확률 입력 및 성공 여부 알려주는 기능 추가 ( 기본 값은 60퍼)

필기합격^_^

#80

위치를 통해서 감지를 하는데, 강 위에 떠 있는 경우가 애매함.

해결방법 : 점프 와 착지 상태를 나눈다..
점프 중일 때는 이벤트가 발생하지 않도록
착지 이후 부터 발생하도록

그런데 착지라는 정의가 애매함.. -> 충돌하였을 때를 착지로 고려..

전체 이벤트 중 미획득 획득 구별하기

5월1일 초기화

이벤트 생성하기

좌표를 통한 구분
문제점 : 점프를 한 다음에 이벤트가 발생되는 상황이 애매함. 충돌을 통해 착지를 감지해야하나??

모달을 통해 우선 이벤트가 나오게 했음.
관련 이미지, 확률 태그를 통해 모달 디자인 하기

문제점 : 각도가 죄측 90도 이동시 -파이/2 우측 90도 이동시 + 파이/2 로 회전값을 가진다.
그렇기 때문에 경계점에서 반대로 계산을 하지 않으면, 90도 이상 회전을 안함.

해결방법 :

      rx >= 0 ? (ry -= delta) : (ry += delta);

경계점에서 rx의 부호가 음과 양으로 달라짐을 확인하고 이를 통해서 조건ㅁ누을 통해 계산

이동

강화 firebase 설정하기
client side 컴퍼넌트에서도 유저 정보 가져오기

vercel/next.js#22388

이슈를 확인해보니 chrome extension과 충돌이 일으켜서 그런 것이었다. 해당 extension오류로 extension삭제시 정상작동

1. google console 앱생성
2. next-auth를 이용한 로그인 구현

공용 컴퍼넌트 모달 생성

1차 완료

값, 계산, 액션으로 관심사 분리하기

https://ungumungum.tistory.com/115

1. 폴더 명 대문자 -> 소문자
2. 반응형 크기 var로 사용하기

nextauthjs/next-auth#3061

1. 캐시 삭제 - 실패
2. custom Sessionprovider Layout에 적용
3. client 컴퍼넌트에서 사용하기 등등

TODO : 컴퍼넌트 분리 성공 여부를 반영한3d효과 CSS작업

현재 상황

1. 좌측 상단에 링크들로 페이지 이동 가능
2. 우측 상단의 버튼으로 로그인 및 마이페이지 이동할 버튼 UI

1. 개인 강화 내역 요청
2. 권한 설정 (미로그인 시 /으로 redirect) --> middleware활용
3. Firestore 데이터 관리로직 개선 (20개 초과시 삭제)

구상)
각각의 구역마다 성공확률 차별화
shiba가 돌아다니면서 event를 발생

useCannon 활용하기

움직일 경우 이벤트 적용하기 (2번 채택)

1. 구상 충돌할 경우에 이벤트 타입 변경
   각각의 충돌체는 충돌 그룹이 있으므로 이를 통해구별
   ex) 문제점 : 경계선에서 충돌이 애매함. 만약에 바닥에 붙은 상태에서 다른 그룹과 충돌이 된 경우

 const handleCollision = (e) => {
    if (e.collisionFilters.bodyFilterGroup === 5) {
       //code
    }
  };

2. 좌표를 통한 구분
   강의 경우에는 높이가 일정 이하
   그 외에는 좌우를 통해서 구별함

 const checkMapType = () => {
    const chassisPosition = new Vector3().setFromMatrixPosition(
      chassisBody.current!.matrixWorld
    );
    // 강 y가 1보다 작은경우 그 중에서 x가 10.5보다 크고 z가 3.5가 큰 경우는 언덕
    // x가 2.5보다크면 언덕 작으면 집
  };

zustand를 활용하여 이벤트 여부 전역변수 관리

로더가 현재 캔버스가 랜더링된 후에 작동함 --> 캔버스거 렌더링 과정을 로딩 처리할 필요가 있음

SSR되는 부분까지 loader가 덮음(화면 전체 로딩처리라서)

전체적 레이아웃 마무리하고 재수정 ( 헤더를 캔버스 안에 넣을지 말지에 대한 고민,, )

시바 캐릭터 회전이동..

시바 이벤트 firestore에 저장

언덕, 집, 계단, 다리 다시 만들기 (혼합체로)

1. 팝업 닫을 시 event 가능하게
2. 간단한 사이트 소개
3. localStorage를 활용해서 다음에 볼지 여부 선택

로고 칸바에서 무료 샘플

[x] 집에 충돌체 만들기
[x] 언덕 만들기
[x] 투명 바닥만들기
[x] 투명 벽으로 감싸기
[x] 다리
62-4 버그 픽스
schteppe/cannon.js#149

1. 음수 요소가 버그를 낼 수 있다는 이슈가 있어서 양수로 수정
   
2. normal가 내부를 향해서 오류가 발생

  function calculateNormal(v0, v1, v2) {
    const vector1 = [v1[0] - v0[0], v1[1] - v0[1], v1[2] - v0[2]];

    const vector2 = [v2[0] - v0[0], v2[1] - v0[1], v2[2] - v0[2]];

    const normal = [
      vector1[1] * vector2[2] - vector1[2] * vector2[1],
      vector1[2] * vector2[0] - vector1[0] * vector2[2],
      vector1[0] * vector2[1] - vector1[1] * vector2[0],
    ];

    const length = Math.sqrt(
      normal[0] * normal[0] + normal[1] * normal[1] + normal[2] * normal[2]
    );

    return [normal[0] / length, normal[1] / length, normal[2] / length];
  }

  const normals = faces.map((face) => {
    const [v0, v1, v2] = face.map((index) => vertices[index]);
    return calculateNormal(v0, v1, v2);
  });

  console.log(normals, 'normals');

해당 값을 반영했지만 충돌이 제대로 안됨

1. 키조작 및 간단한 가이드라인 만들기
   바닥에 글자로 wasd space 알려주기

2. 카메라가 캐릭터 따라다닐떄 orbit조정가능하게|
   ref의 타입 참고

css 작업 남음, 모달 닫히는 기능 남음