제작자: 希彼赫
라이브 체험 프로젝트 소개
FLORA는 월드컵 참가국과 그 나라를 상징하는 꽃을 따뜻한 조명의 표본관에 모았습니다. 아르헨티나의 자카란다, 네덜란드의 튤립, 일본의 국화, 콜롬비아의 카틀레야까지 — 모든 꽃이 Tripo로 생성한 3D 모델로, 회전대 위에서 드래그하며 가까이 살펴볼 수 있습니다.
리퀴드 글라스 질감의 아카이브 카드에는 각 꽃의 학명, 과, 개화기, 상징적 의미, 문화 노트가 정리되어 있습니다. 국기 바에서 클릭 한 번으로 국가를 전환하거나 카메라를 켜고 손동작으로 넘겨 볼 수 있습니다. 에셋은 단일 납품 프로토콜(+Z 방향, 원점은 줄기 뿌리)을 따르며, 빠진 자리는 프로시저럴 대체 식물이 자동으로 채웁니다.
체험 포인트
- 드래그로 회전대 위의 표본을 돌려 보고, 더블 클릭하면 클로즈업됩니다
- 하단 국기 바에서 클릭 한 번으로 국가를 전환하거나, 카메라 앞 손동작으로 넘겨 볼 수 있습니다
- 리퀴드 글라스 질감의 아카이브 카드에 학명, 과, 개화기, 상징적 의미, 문화 노트가 정리되어 있습니다
- 에셋이 없으면 같은 프로토콜의 프로시저럴 대체 식물이 자동으로 채워져 전시대가 비는 일이 없습니다
기술 분석
3D 표본 · Tripo 텍스트 투 3D
전시관의 여섯 나라꽃 — 카틀레야, 달리아, 극락조화, 국화, 자카란다, 튤립 — 은 모두 Tripo 텍스트 투 3D의 작품입니다. GLB로 내보낸 뒤 GLTFLoader가 필요할 때마다 전시실로 불러옵니다.
모든 꽃은 같은 규약으로 출력합니다: 정면 +Z, 원점은 줄기 뿌리, 높이 약 1유닛. 어떤 표본이 잠시 빠져도 코드가 같은 규약으로 프로시저럴 대체 식물을 만들어 좌대에 올리니, 전시대가 비는 일은 없습니다.
따뜻한 조명 · RoomEnvironment IBL
전시실에는 사실 조명이 하나도 없습니다. 따뜻한 빛은 전부 Three.js의 RoomEnvironment에서 나옵니다 — 환경 맵 한 장을 생성해 Tripo 모델의 PBR 머티리얼이 하이라이트와 부드러운 확산을 자연스럽게 드러내게 하죠. 조명을 하나하나 조율할 필요 없이, 맵 한 장으로 라이팅이 끝납니다.
전시 라벨 · CSS3DRenderer
라벨에 적힌 학명·과·문화 노트는 사실 웹페이지의 진짜 DOM 요소로, CSS3DRenderer 덕분에 3D 장면과 함께 회전합니다. 장점은 아주 실용적입니다. 아무리 가까이서 봐도 글자가 또렷하고, 선택해서 복사할 수 있으며, 리퀴드 글라스 질감마저 평범한 CSS로 구현했습니다.
제스처로 넘기기 · MediaPipe Hands
아래쪽 국기 바를 클릭하는 것 말고도, 전시관은 손을 대지 않고 넘겨볼 수 있습니다. MediaPipe Hands가 카메라로 손동작을 읽어 손을 흔들면 다음 나라 부스로 넘어갑니다 — 마우스를 건드리지 않고도 전시관을 다 돌 수 있죠.
