조명 애니메이션Animated Lighting

Animated Lighting

조명 애니메이션

다른 이름Also known as · Animated scene lighting · 장면 조명 변화

555

렌더 추가 예정CLIP COMING조명 애니메이션Animated Lighting정의·파라미터·프롬프트는 아래에 있다Definition, parameters and prompts are below

도판Fig. 555. 조명 애니메이션 · Animated Lighting · power2.inOut

입체 물체를 비추는 빛의 색과 세기가 바뀌어 물체의 다른 부분이 드러나는 연출The color and intensity of light on a 3D object change, revealing different parts of it.

무엇을 전하나What it tells

전달 효과ConveysCONVEYS

형태와 분위기가 조명 하나로 바뀐다. 어둠 속에서 필요한 부분만 빛을 받아 주목 영역이 정해진다Form and mood shift with the lighting alone, and the lit areas decide where to look.

언제 쓰나Use whenUSE WHEN

제품 모델의 윤곽을 빛으로 훑어 보여 줄 때
차가운 색에서 따뜻한 색으로 분위기를 바꿀 때
어둠에서 대상을 점등하듯 공개할 때

Sweep light across a product model's contours.
Change mood from cool to warm.
Reveal a subject as if switching on a light in the dark.

과용 주의AvoidAVOID

intensity 3 초과 금지(하이라이트가 날아감)
색 전환은 2색 이내로 한다
보간은 HSL이 아니라 RGB 선형으로 한다

분류TagsTAGS

3D·깊이3D & Depth 분위기Mood 강조Emphasis 제품 시연Product demo 설명 영상Explainer video 숏폼Short-form 난이도 고급Advancedwebgl

좋은 예와 나쁜 예Good and bad use

좋은 사례GOOD

광원 세기가 0에서 3까지 1.6초 동안 올라가며 청색에서 주황으로 색이 바뀌고, 물체의 윗면 윤곽이 먼저 밝아진다

과용 · 나쁜 사례OVERUSE

세기가 갑자기 튀어 흰색으로 날아가거나, 색만 바뀌고 광원 위치가 그대로라 평평해 보인다

파라미터Parameters

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

항목PARAM	기본DEFAULT	범위RANGE	메모NOTE
시간	1.6s	1.0~2.4s	세기와 색 동시
intensity	0→3	0~3	3 초과 금지
색	#4aa3ff→#ff9a3c	2색	RGB 보간
광원 이동	x -2→2	-3~3	선택
이징	power2.inOut	sine~power3

GSAP

const c0 = new THREE.Color('#4aa3ff'), c1 = new THREE.Color('#ff9a3c');
const s = { t: 0, k: 0 };
tl.to(s, { t: 1, k: 3, duration: 1.6, ease: 'power2.inOut', onUpdate() {
  light.color.copy(c0).lerp(c1, s.t); light.intensity = s.k;
  light.position.x = -2 + 4 * s.t; } }, 0.3);

README

에이전트 프롬프트Agent prompts

그대로 붙여 넣는다Paste as is

Claude Code

Three.js와 GSAP으로 <모델>의 조명을 애니메이션해 줘. 0.3초부터 1.6초 동안 power2.inOut으로 광원 intensity를 0에서 3으로, 색을 #4aa3ff에서 #ff9a3c로 RGB 보간하고 광원 x를 -2에서 2로 옮겨. 세기는 3을 넘기지 않고 값은 객체 tween의 onUpdate로 갱신해 paused 타임라인에서 seek 가능하게 해.

Use Three.js and GSAP to animate the lighting on <model>. From 0.3 seconds over 1.6 seconds with power2.inOut, raise light intensity from 0 to 3, lerp the color from #4aa3ff to #ff9a3c in RGB, and move the light x from -2 to 2. Keep intensity at or below 3, updating values in the onUpdate of an object tween on a paused, seekable timeline.

Codex

<파일>에 animated-lighting을 적용해. 값 객체 {t,k}를 position 0.3, duration 1.6, ease power2.inOut으로 t 0→1, k 0→3 tween하고 onUpdate에서 light.color, intensity, position.x를 갱신한다. 0.3초는 어두움, 1.1초는 중간 색과 세기, 2.0초는 주황 최대 밝기이며 흰색으로 날아가지 않는지 캡처로 확인해.

Apply animated-lighting in <file>. Tween a value object {t,k} at position 0.3, duration 1.6, ease power2.inOut with t 0 to 1 and k 0 to 3, and update light.color, intensity and position.x in onUpdate. Capture 0.3s (dark), 1.1s (mid color and intensity) and 2.0s (orange at maximum, not blown out to white).