FrontEnd/React
-
[React] Blender 모델링, Bake Texture + R3F 적용FrontEnd/React 2024. 1. 11. 17:35
0. R3F 프로젝트에 모델 적용 과정 1. 모델링 작업 - Blender 2. 모델링 배치, 조명 설정 - Blender 3. Texture (모델의 표면 속성 예-광택, 재질 색상등 외관을 표현하기 위한 부분) 작업 - Blender 4. glb를 jsx 컴포넌트로 변환하여 화면에 로드 - R3F 5. 모델에 Bake한 Texture 적용하기 - R3F Texture를 Bake 한다는 의미 : 모델의 Texture를 미리 렌더링해서 입혀 놓은 상태를 만들어 놓는다는 것 ( 단 렌더링된 상태이기에 그림자가 있는경우 R3F 상의 조명으로 그림자가 변경 되지 않음) Texture를 Bake하는 이유 : 미리 Texture 이미지를 구워놓지 않으면 .glb 모델링 사이즈가 엄청 커진다 예시로 처음 모델링하고..
-
[리액트] EsLint, Prettier 설정 + 저장시 자동 적용FrontEnd/React 2023. 11. 10. 10:04
1. 툴 설명 Eslint 자바 스크립트의 문법에 오류가 있는 부분을 체크해서 알려주는 도구 Prettier 코드 포맷을 정해주어 코드 컨벤션을 유지시키는 도구 2. VsCode 플러그인 설치 VsCode -> 좌측 네비게이션에서 플러그인 클릭 -> eslint 검색 -> eslint 설치 플러그인 prettier 검색 -> 설치 3. eslint, prettier 패키지 설치 리액트 프로젝트 이동 -> 명령어 입력 // 패캐지 설치 npm install eslint prettier eslint-config-prettier eslint-plugin-prettier --save-dev // eslint init npx eslint --init eslint --int 과정에서 설정은 아래와 같이 진행하였는데..