Jin's Room Portfolio

link - https://jin-s-room.vercel.app/
github - https://github.com/Hwang-Sangjin/Jin-sRoom

3D 웹 개발을 시작하면서 개인 포트폴리오 웹을 만들고 싶었다.

많은 Three.js 웹을 구경하면서 Isometry Room 컨셉의 포트폴리오를 많이 발견하였다.

Room은 나라는 존재를 전체적으로 투영하며, 이는 내가 누구인지 소개해야하는 포트폴리오와 성격이 일치하였다.

결론적으로 Room을 컨셉으로하는 3D 웹 개발을 시작하였다.

3D model

위와 같이 Blender를 활용하여 모든 object를 직접 제작하였다.
사실 개발자 입장에서 3D 모델링까지 하기에 시간이 부족하였지만, 학부과정에서 경험한 부분과 나만의 style의 3D object를 만들어서 사용하고 싶었기 때문에 필수적인 내용이다.

Features

대표적인 기능들은

• 3D model, baked texture
• glass material
• object interaction
• gsap animation
• glsl shader
• key interaction
  으로 분류되었습니다.

전체적인 기능들로는

• 로딩 화면
  • 로딩 화면
  • 로딩 정상화
• 스크롤 기능
  • https://bluebox.design/ 처럼 카메라 이동
• 메인 방
  • 3d model
    • 의자 돌리기
    • 맨 처음 로딩 후에 밑에서 3d 모델 올라오기
    • 마우스 컨트롤 각도 한정하기
    • 키보드 키 상호작용
    • https://sbcode.net/react-three-fiber/custom-hooks/
    • 소리 추가하기
      • 의자 돌아가는 소리
      • lp 넘어가는 소리
      • lp 시작 소리
      • 컴퓨터 켜지는 소리
      • 빔프로젝터 켜지는 소리
      • 키보드 눌리는 소리
      • https://freesound.org/search/?q=computer
    • about page에 back 버튼 추가
    • 창문 bake하기
    • 빔프로젝터 하나도 따로 빼기
    • 깃헙 하나로 따로 빼기
    • 인스타 하나로 따로 빼기
    • 벨로그 하나로 따로 빼기
    • 유리창, 유리잔, 램프 유리 bake
      • 유리잔은 material 사용
      • 램프 전체적으로 다시 unwrap해서 굽기 유리도 굽기
      • 창문 유리 bake하기
    • 컴퓨터 본체 옆에 조명 끄고 다시 굽기
    • LP 컬렉션 지우고 plane geometry로 만들기
      • Christmas
      • Ghibli
      • raging sea
      • animated galaxy
      • coffee smoke
      • hologram
      • fireworks
      • lights shading
      • halftone shading
      • earth
      • particle morphing
      • gpgpu
      • wobbly sphere
      • sliced model
      • procedural terrain
      • portal scene
    • 클릭 시 반응하도록 설정
    • 마우스 움직이면 마우스 이동
    • 책 클릭 시 velog 책 게시글
      • 책 분리시키기
      • onclick 함수 설정
  • 노래 재생
    • This is how i feels - d4vd
    • Complicated - matt maltese
    • no surprises - radiohead
    • all i’ve ever known - bahamas is afie
    • breakeven - the script
    • Dancing in the moonlight - toploader
  • 깃헙 페이지, 인스타 페이지, 블로그 페이지
  • 여행 및 데이트 사진
    • 이미지 planegeometry에 올리기
    • 파티션 클릭 시, 카메라 이동
    • 이미지 마우스에 over하면 타이틀 뜨기
    • 클릭 시, 인스타 페이지로 이동
  • 컴퓨터 iframe 활용해서 velog 보기
• 포트폴리오
  • LP 에서 선택
  • LP 하나씩 위로 이동
  • 옆에 html로 설명
• about me

  • React Router로 새로운 페이지 이동

  • 배경 색 설정

  • 빔프로젝터 클릭 시 spot light

  • 검은 화면 생성

  • 빔 프로젝터 켜지면서 검은 화면

  • 사진 파티클 활용

  • full screen scroll 활용하기

  • section 바뀌면 particle 사진 변경

    • 이름 자기 소개 한줄
    • 기술 스택
    • 관심사
    • Contact
      • 인스타 연결

  • https://didierchifan.com/about-me

    위와 같습니다.

그리고 피드백 받은 내용으로는

• glass 효과 조정
• 책상 컴퓨터 받침대 texture 수정
• lp 애니메이션 더 빠르게
• clickable cursor로 변경
• 커튼 shading 추가
• 효과음 추가

위와 같습니다.

제작 기간

• 24/12/05~ 25/01/15

약 한달 정도 걸렸습니다.

문제 및 해결

• 3D 모델 texture 사용 후, 회색 선 보임

  mingFilter, magFilter 변경
  bakedTexture.minFilter = THREE.LinearFilter;
  bakedTexture.magFilter = THREE.NearestFilter;

• glass material 적용

  MeshTransmissionMaterial를 적용하려면 3D 모델의 normal값이 있어야한다.

• gsap animation

• audio setting

• R3F에서 GLSL 세팅 및 canvas 세팅

소감

한달 동안 만들면서 결과물에 대한 의구심으로 잠식된 자신을 점점 찾아가는 과저이었다.
이 프로젝트로 개발자 취업을 성공할 수 없을 지는 모르지만, 결과적으로는 내 삶의 방향성을 다시 찾아노는 기간이며 행위였다.

앞으로도 계속 이러한 것들을 만들 것이다.