The Vertical Breath

상세 레시피

완성된 코드에서 거꾸로 읽어 낸 조립 과정입니다. 단계마다 어떤 데이터와 이미지, 컴퍼넌트를 조합했는지 보여 줍니다.

1. 01

   타워 치수와 낮밤 규칙 정리

   타워의 높이, 날개, 티어, 재질 색과 공정별 스크롤 구간, 스크롤에 따른 낮밤 변화를 화면 코드와 분리해 정의합니다.

   데이터

   BurjKhalifaData, setThemeProgress

   컴퍼넌트

   getDayNightState

   결과

   방문자가 보는 건물 비례와 재질 색, 낮에서 밤으로 넘어가는 흐름이 모두 이 값에서 정해집니다.

2. 02

   기초, 코어, 하부 세트백 부품

   데이터의 치수를 읽어 기초 매트와 말뚝, 육각 코어와 세 날개, 하부 티어를 각자의 스크롤 구간에서 자라는 부품으로 만듭니다.

   데이터

   BurjKhalifaData

   컴퍼넌트

   Foundation, Core, Setbacks

   결과

   스크롤을 시작하면 기초 매트와 말뚝이 자리 잡고, 코어와 Y자 날개가 솟은 뒤 아래층 티어가 차례로 올라갑니다.

3. 03

   외피, 조명, 첨탑 부품

   중부와 상부 티어에 유리와 프레임, 창문 불빛을 입히고, 마지막 구간에 결합되는 첨탑과 항공 비콘을 만듭니다.

   데이터

   BurjKhalifaData

   컴퍼넌트

   Cladding, Illumination, Spire, getDayNightState

   결과

   중반부터 유리 외피가 덮이고 밤이 되면 창문이 켜지며, 마지막에 첨탑이 위에서 내려와 결합하고 비콘이 깜박입니다.

4. 04

   타워와 하늘을 한 장면으로 조립

   여섯 공정 부품을 한 타워로 묶고, 하늘과 해, 달, 보조 조명, 카메라 줌을 같은 스크롤 진행률에 연결합니다.

   데이터

   BurjKhalifaData, setThemeProgress

   이미지

   반사용 도시 환경맵

   컴퍼넌트

   Building, DayNightCycle, Experience, getDayNightState

   결과

   건설 중에는 지금 올라가는 높이가 화면 중앙을 지나고, 끝에서는 카메라가 물러나 밤하늘 아래 타워 전체가 한 화면에 들어옵니다.

5. 05

   잡지형 해설을 얹어 페이지 완성

   공정별 제목, 설명, 수치와 일러스트를 3D 캔버스 위에 배치하고 고정 헤더와 푸터를 더해 한 페이지로 묶습니다.

   이미지

   공정별 일러스트 6장

   컴퍼넌트

   TextReveal, ImageReveal, Overlay, App

   결과

   건물이 자라는 동안 해당 공정의 해설이 좌우를 번갈아 글자 단위로 나타나고, 밤이 되면 글자 색도 밝게 바뀝니다.