# readme-2601231159

> A brief description, shown to the model to help it understand when to use this skill

- Author: sonminchan
- Repository: pabian84/lg-electronics-repair-3d
- Version: 20260203090826
- Stars: 0
- Forks: 0
- Last Updated: 2026-02-08
- Source: https://github.com/pabian84/lg-electronics-repair-3d
- Web: https://mule.run/skillshub/@@pabian84/lg-electronics-repair-3d~readme-2601231159:20260203090826

---

---
name: readme-2601231159
description: A brief description, shown to the model to help it understand when to use this skill
---

## 0. 참고 레퍼런스
- [[(Ref) 동일한 명령과 초기 위치에도 카메라가 노드를 비추는 방향이 달라지는 문제]]
- [[(Ref) 실제 카메라가 이동할 때 그 곡선을 타지 않는 현상]]
- [[(Ref) GSAP를 사용한 복잡한 이징 효과 및 카메라이동 구현]]
- [[(Ref) 카메라 이동시 의도한 궤적을 따라 이동하지 않는 문제]]
- [[(Ref) 카메라가 노드를 비출때 노드를 바라보는 방향이 일관되지 않는 문제]]
##  ■■ Description ■■
- 
## 1. 카메라 이동 고려사항
## 1-1. 주요 고려점
- **대상 객체의 크기와 위치**: 객체의 바운딩 박스를 기반으로 카메라 위치를 계산
- **카메라 시점**: 객체를 최적화된 각도에서 보여주기 위한 방향 벡터 선택
- **이동 속도**: 사용자 경험을 고려한 적절한 애니메이션 지속 시간
- **이징 효과**: 부드러운 움직임을 위한 easing 함수 적용
- **성능**: 반복적인 노드 검색을 피하기 위한 캐싱机制
- **오류 처리**: 노드 찾기 실패, 카메라 컨트롤 없음 등의 예외 상황 처리
### 1-2. 세부 사항
- **바운딩 박스 계산**: `getPreciseBoundingBox()` 함수로 객체의 정확한 크기 측정
- **카메라 거리**: FOV(시야각)와 객체 크기를 기반으로 적절한 거리 계산
- **동적 확대비율**: 객체 크기에 따라 자동으로 확대/축소 비율 조정
- **캐싱**: 노드 검색 결과를 메모이제이션하여 성능 향상
### 1-3. 단계별 상세 동작
| 순서 | 동작 단계           | 상세 내용 및 연출 (Action)                                                     | 기술적 포인트 (Technical)                       |
| ---- | ------------------- | ------------------------------------------------------------------------------ | ----------------------------------------------- |
| 01   | 객체 선택 및 강조   | 사용자가 도어 커버 클릭 시, 대상 부품군을 하이라이트 색상(Blue/Green)으로 점멸 | Raycaster 이벤트 감지 및 MeshBasicMaterial 교체 |
| 02   | 카메라 포커싱       | 커버와 힌지가 잘 보이는 최적의 뷰포트로 카메라가 부드럽게 이동                 | getPreciseBoundingBox 기반 lerp 애니메이션 이동 |
| 03   | 커버 회전 (Cover)   | 가상의 경첩 축을 기준으로 커버가 120도 회전하며 개방                           | Pivot Group 설정 및 Euler 회전값 변경           |
| 04   | 케이블 분리 (Cable) | 소켓 하우징이 분리되면서 연결된 케이블이 자연스럽게 처짐(Slack)                | Skinned Mesh의 Bones 좌표 업데이트              |
| 05   | 레버 제거 (Lever)   | 고정 레버가 수직(Y축) 방향으로 Linear하게 빠져나옴                             | GSAP Timeline을 이용한 순차적 이동 (easeOut)    |
| 06   | 힌지 이탈 (Hinge)   | 힌지 어셈블리가 뒤쪽(Z축)으로 빠지며 최종 분해 완료                            | 월드 좌표계 기준 offset 이동 및 투명도 처리     |
## 2. 카메라 이동 기능 구현시 고려 사항
### 2-1. 월드 좌표계(World Space) 를 기준으로 타겟의 위치 계산
- 카메라 이동 벡터가 **'현재 카메라의 로컬 좌표계(Local Space)'** 또는 단순 상대값에 의존하고 있어, 
  카메라가 회전되어 있을 때 '수평'의 의미가 왜곡될 수도 있다.
- 월드 좌표계(World Space) 를 기준으로 타겟의 위치를 계산하고, 
  이를 순차적(Sequential)으로 실행하는 로직이 필요하다.
### 3-2. 자동 뷰포트 정렬 (Longest Axis Awareness) 적용
- **Longest Axis Awareness(장축 인지)** 방식은 3D 부품의 형상(가로형 또는 세로형)을 실시간으로 분석하여, 
  최적의 뷰포트 정렬을 자동으로 결정하는 고급 알고리즘이다.
- 이 방법은 부품이 바뀔 때마다 코드를 수정할 필요가 없어 유지보수 효율성이 극대화된다.
### 3-3. 시네마틱한 카메라 워킹 형식으로 구현
> [!note] 
> - 초기 카메라 위치가 어느 위치에 있든, 단순히 대상을 향해 다가가는 것이 아니라 
>   1) 직선적으로 접근하다가  
>   2) 막바지에 급격히 고도를 낮춰(Drop) 
>   3) 대상을 올려다보는(Low Angle) 시네마틱한 카메라 워킹 형식으로 구현
- **비대칭 이징 (Asymmetric Easing):**
	- `Math.pow(progress, 5)`와 같은 높은 지수를 사용하면 애니메이션 후반부에 변화가 쏠리게 되어, 마지막에 '툭 떨어지는' 연출이 가능
- **직선 접근 → 급격한 하강(Drop) → 저각도(Low Angle) 응시:** 
	- `QuadraticBezierCurve3`를 사용하여 궤적을 설계하고, 시간의 흐름에 `Math.pow(progress, 5)`를 적용하여 후반부에 이동량이 급증하도록 설계
	- 카메라가 대상의 중심보다 낮은 곳에 도달하게 하여 자연스러운 **Low-Angle**을 완성
- **Control Point 최적화:** 
	- 만약 베지에 곡선을 직접 사용하신다면, 제어점(Control Point)을 이동 경로의 앞부분이 아닌 **목적지 바로 위쪽**에 배치 
	- 그러면 목적지에 도달하기 직전까지 높은 고도를 유지하다가 마지막에 수직으로 하강하는 궤적이 만들어진다.
### 3-4. `QuadraticBezierCurve3`(2차 베지에 곡선)를 활용하여 경로를 설계하고, 시간 진행률(progress)에 비대칭 이징(Asymmetric Easing)을 적용하는 방식으로 구현
- **'직선 접근 → 급격한 하강(Drop) → 올려다보기(Low Angle)'** 동작은 일반적인 선형 보간(Linear Interpolation)으로는 구현하기 어렵다. 
- 이를 위해 `QuadraticBezierCurve3`(2차 베지에 곡선)를 활용하여 경로를 설계하고, 
  시간 진행률(progress)에 비대칭 이징(Asymmetric Easing)을 적용하는 방식으로 구현해야 한다.
### 3-5. 화면 꽉참 보장
- 타겟 부품이 아무리 크거나 작더라도 카메라 화면에 잘리지 않고 전체가 들어오도록 거리를 동적으로 계산 해야 한다.
## 5. 카메라 컨트롤러를 사용할 때, 사용자가 의도한 **Bezier 곡선 궤적**과 실제 **카메라 이동**이 일치하지 않는(직선으로 움직이거나 궤적에서 벗어나는) 문제
- 이 현상의 핵심 원인은 **컨트롤러의 자체 보간(Damping/Inertia) 로직**이 프레임마다 
  강제로 주입된 좌표(`position.copy`)를 '급격한 변화'로 인식하여 
  부드럽게(직선에 가깝게) 보정하려고 시도하기 때문이다.
- 이를 해결하기 위해 시네마틱 애니메이션이 실행되는 동안 **임시로 Damping을 비활성화**하여, 
  카메라가 곡선 좌표를 그대로 따라가도록 강제하는 **Enterprise-grade 솔루션** 방식을 추천한다.