TL;DR 다른 방법도 있을 것 같은데 나는 이것도 어려우니까 이거라도 일단 받아들이자 Pivot 포인트는 오브젝트가 회전하거나 확대/축소될 때 기준이 되는 점을 의미 Pivot 포인트를 만들고 해당 포인트에 카메라를 지정한 뒤, 자동차의 위치가 이동한만큼 Pivot 포인트를 이동시키는 방법 카메라 만들기 기준이 될 Pivot 포인트를 생성하고 Pivot에 카메라를 넣고 씬에 Pivot을 넣음 처음 렌더링될 때 카메라 생성 (useFollowingCam.jsx) useThree는 기본 렌더러, 씬, 카메라, 현재 캔버스의 크기를 스크린 및 뷰포트 좌표로 제공하는 등이 포함된 상태 모델에 접근할 수 있는 훅 (단, 반드시 캔버스 내에서만 사용 가능) 카메라 사용하기 자동차 컴포넌트에서 생성한 Pivot을 불러오는 동시에 자동차의 좌표값을 가져올 벡터 객체 worldPosition 생성 생성한 좌표 객체 worldPosition을 자동차 차체를 기준으로 불러오도록 설정 useFrame 활용 Pivot의 위치를 lerp 함수를 통해 worldPosition과의 좌표를 비교하여 이동 기본적으로 lerp 함수는 중간값을 찾는데 활용 lerp 함수의 두 번째 인자는 계수로, 0에 가까울 수록 이동이 적고 1에 가까울 수록 이동이 많이 됨 우왕 잉동항당

TL;DR Box Geometry, Cylinder Geometry를 이용해서 자동차 만들려고하는데 왜케 어렵누... 사실 가장 어려운건 위치와 크기 조절이지 않을까? 그래서 Leva를 사용하는건데... 아잉 몰랑 내가 자동차를 모델링하면서 짜증났던점 useCompound useRaycastVehicle collisionFilterGroup Kinematic 티입 Car.jsx Car.jsx에는 크게 CarBody 컴포넌트와 Wheel 컴포넌트의 조합으로 구성되어있음 차 물리엔진 범위(?) 설정 여기서 가장 중요한 점이자 내가 아직도 이해하기 어려워하는 부분은 물리엔진을 적용할 범위 설정 useCompundBody를 사용하면 여러 개의 물리형상을 하나의 강체(?)로 결합될 때 사용함 아래의 코드는 차 본체의 상단과 하단을 하나의 물리엔진 범위로 묶었다고 보면됨 다음으로는 자동차 자체에 대한 물리엔진 설정 useRaycastVehicle은 차량 물리 시뮬레이션을 위한 툭수한 훅이며, 이를 기반으로 차량의 서스펜션, 바퀴 회전, 지면과의 상호작용에 대한 설정이 가능 인자로는 차체를 의미하는 chassisBody와 바퀴, 그리고 바퀴가 가질 속성들에 대한 정보를 받음 바퀴 물리엔진 범위(?) 설정 (useWheel.jsx) 자동차는 총 4개의 바퀴가 필요한데 4개 바퀴에 대한 물리엔진을 한번에 처리하기 위해 별도로 분리해서 useWheel.jsx를 생성함

Stats 패널 FPS 초당 렌더링되는 프레임의 수 높은 FPS는 부드러운 애니메이션 및 렌더링을 의미 MPF 한 프레임을 렌더링하는데 걸리는 시간을 밀리초 단위로 표현 이 값은 렌더링에 소요되는 시간을 측정하므로, 작을 수록 성능이 좋음 Megabytes Used 현재 웹페이지에서 사용중인 메모리 양을 메가바이트 단위로 표현 이 값은 현재 웹페이지의 메모리 소비를 모니터링하여 메모리 누수 및 성능 이슈를 감지하는데 도움 FPS, CPU, GPU 모두 출력하는 방법 DrawCall CPU가 GPU에게 그리라는 명령을 Draw Call이라 지칭 PC: 1000, Mobile: 100 ~ 200까지가 적당 1 mesh + 1 material = 1 Draw Calls n meshes = n Draw Calls n meshes + 1 material = n Draw Calls 1 mesh + n materials = n Draw Calls Merged

TL;DR 렌더링할 때 불필요한 변수 및 함수의 할당을 막기 위해 사용한다! useMemo: 변수 메모이제이션 useCallback: 함수 메모이제이션 Jay useMemo와 useCallback은 둘 다 메모이제이션 개념이라고 보면 되요. 변수를 딱 지정하면 컴포넌트 내 상태 변경이 될 때마다 계속 변수를 새로 지정하잖아요 예를 들어, 컴포넌트 내 상태값이 변경되면 컴포넌트를 다시 쳐 읽으면서 "a"와 "func" 이걸 또 해요. Kevin 변수 할당을 한다. 메모리를 잡아먹는다. Jay 근데 useMemo와 useCallback을 사용할 때 뒤에 배열을 받는데, 그 배열 내의 값이 "변경"될 때만 새로 할당을 해요. Kevin 그러니까 싱글톤 같은 개념인거네요. 그럼 useMemo와 useCallback의 차이는 뭔가요?