AWESOME AI MOTION
효과Effects / 가상 카메라Camera / Nº 226

카메라 오빗Camera Orbit

Camera Orbit
카메라 오빗
다른 이름Also known as · Turntable Orbit · 턴테이블 오빗 · camera-orbit-turntable · 카메라 공전 · Orbital camera · Globe destination rotation · 지구 목적지 회전
226
렌더 추가 예정CLIP COMING카메라 오빗Camera Orbit정의·파라미터·프롬프트는 아래에 있다Definition, parameters and prompts are below
도판Fig. 226. 카메라 오빗 · Camera Orbit · power2.inOut

대상이 중앙에 머무는 동안 시점이 주변을 돌아 옆면과 배경 관계가 바뀐다. 구형 지도는 회전으로 목적지를 정면에 맞출 수 있다.Orbit a centered subject to reveal its shape and changing background relationships.

01

무엇을 전하나What it tells

전달 효과ConveysCONVEYS
같은 대상의 입체 형태와 공간상의 방향을 보여준다.Conveys three-dimensional form and orientation.
언제 쓰나Use whenUSE WHEN
  • 제품의 앞면과 옆면을 이어 보여줄 때
  • 구형 지도의 목적지를 정면에 맞출 때
  • Reveal the front and side of a product.
  • Bring a globe destination to the front.
과용 주의AvoidAVOID
  • 중심점과 반경을 먼저 고정한다.
분류TagsTAGS
가상 카메라Camera설명Explain순서·흐름Sequence설명 영상Explainer video스크롤덱Scroll deck제품 시연Product demo난이도 고급Advancedwebgl
02

좋은 예와 나쁜 예Good and bad use

좋은 사례GOOD

반경 600px를 유지하며 2.4초 동안 60도 돌아 제품 옆면을 보여준다.

과용 · 나쁜 사례OVERUSE

반경이 흔들려 공전 도중 제품 크기가 달라진다.

03

파라미터Parameters

기본값은 클립에 쓴 값Defaults are the values used in the clip

항목PARAM기본DEFAULT범위RANGE메모NOTE
지속2400ms1600~3600ms측면을 읽을 시간
방위각 변화60deg30~120deg중심 주위 이동
고도20deg10~35deg위에서 보는 각도
반경600px400~900px대상과 거리
GSAP
const tl = gsap.timeline({paused:true}), s = {a:0};
const r = 600, h = 20*Math.PI/180;
camera.fov = 45; camera.updateProjectionMatrix();
tl.to(s, {a:Math.PI/3, duration:2.4, ease:'power2.inOut', onUpdate:()=>{
  camera.position.set(r*Math.cos(h)*Math.sin(s.a),r*Math.sin(h),r*Math.cos(h)*Math.cos(s.a));
  camera.lookAt(0,0,0);
}});
README
04

에이전트 프롬프트Agent prompts

그대로 붙여 넣는다Paste as is

Claude Code

<파일>의 <대상>에 카메라 오빗를 적용해. WebGL에서 구면 좌표로 카메라 위치를 계산해 대상을 바라보게 하거나 CSS 객체와 SVG 구면 투영을 반대로 회전한다. 지속 2400ms; 방위각 변화 60deg; 고도 20deg; 반경 600px. 이징은 power2.inOut로 하고 GSAP 코어 paused 타임라인으로 역방향 seek도 같은 상태를 만들게 해.

Apply Camera Orbit to <target> in <file>. Orbit 60 degrees over 2400ms at a 600px radius and 20-degree elevation while looking at the fixed center. Use power2.inOut and a paused GSAP core timeline that produces identical states when seeking backward.

Codex

<파일>의 대상 장면에 카메라 오빗를 적용해. WebGL에서 구면 좌표로 카메라 위치를 계산해 대상을 바라보게 하거나 CSS 객체와 SVG 구면 투영을 반대로 회전한다. 지속 2400ms; 방위각 변화 60deg; 고도 20deg; 반경 600px. 이징은 power2.inOut를 사용해. 0초·1.2초·2.4초 시점을 캡처하고 시작 상태, 중간 변화, 끝 상태가 정의와 일치하는지 확인해. 같은 시점을 역방향 seek해서도 같은 화면인지 검증해.

Apply Camera Orbit to the target scene in <file>. Orbit 60 degrees over 2400ms at a 600px radius and 20-degree elevation while looking at the fixed center. Use power2.inOut. Capture at 0, 1.2, and 2.4 seconds to verify the initial state, the defining intermediate change, and the final state. Seek backward to the same times and compare the images.

05

도구별로 쓰기In your tools

HyperFrames · ReelForge · Scrolline

HyperFramesVIDEO · GSAP
paused 타임라인에서 2.4초 진행값을 구동하고 seek마다 좌표와 렌더 상태를 다시 계산한다.
ReelForgeBRIEF TO VIDEO
씬 워커 브리프에 지속 2400ms; 방위각 변화 60deg; 고도 20deg; 반경 600px를 싣고 대상 좌표계와 도착 상태를 명시한다.
Scrolline DeckSCROLL SCRUB
진행률 0~1을 2.4초 타임라인에 매핑하고 scrub에서는 스프링 대신 ease-out 또는 선형 진행을 쓴다.
06

잘 맞는 조합Pairs well with

렌더 추가 예정CLIP COMING
오브젝트 턴테이블Object Turntable
550
Nº 550오브젝트 턴테이블Object TurntableObject Turntable
렌더 추가 예정CLIP COMING
조명 애니메이션Animated Lighting
555
Nº 555조명 애니메이션Animated LightingAnimated Lighting
07

출처Sources

개념 출처와 라이선스. 구현은 이 레포에서 새로 씀Concept sources and licenses. Implementations are original to this repo