3D 스크롤 랜딩 (모든 오브젝트 대상)
이 스킬은 3D 오브젝트가 주인공인 단일 페이지 랜딩 페이지를 구축하는 데 사용됩니다. 오브젝트는 콘텐츠 뒤에 고정되어 있으며, 사용자가 스크롤함에 따라 포즈, 렌더 스타일, 배경이 변경됩니다. 와인 병, 헤드폰, 의자, 기타, 시계, 자동차, 건축 모형, 조각품, 빈티지 카메라, 향수병, 도구, 장난감 등 어떤 오브젝트든 표시할 수 있습니다.
참고 사례는 toppervenom.com(Evil Rabbit 제작, 원본 게시글)이며, 이 프로젝트에서 이 스킬의 아이디어가 나왔습니다. 이 사이트는 90년대 Topper 농구화를 보여줍니다. 이 3D 모델은 스캔이 아니라, 아카이브 자료와 모든 각도에서 생성된 이미지를 바탕으로 AI를 사용하여 재구성되었습니다. 페이지는 기술 청사진(파란색 그리드 위의 흰색 와이어프레임)으로 시작하여 실제 재질로 '채워지고', 치수와 부품을 표시하고, 색상이 변경되며, 회전하며 마무리됩니다. 운동화는 예시일 뿐입니다. 실제로 재현하는 것은 페이지 구축 방식과 품질 수준입니다. 각 프로젝트는 고유한 시각적 콘셉트, 액트 시퀀스, 그리고 오브젝트에 가장 잘 어울리는 리빌 효과를 선택합니다 (아래 '오브젝트에 맞게 조정' 참조).
이런 웹사이트가 괜찮아 보이는 이유 (시작 전에 읽어보세요)
품질은 스택에서 오지 않습니다. toppervenom.com은 약 90KB의 HTML/CSS/JS와 Three.js(저자에 따르면, 페이지를 AI가 한 번에 생성함)로 구성되어 있습니다. 프레임워크, GSAP, 번들러가 없습니다. 품질은 다섯 가지에서 비롯되며, 프로젝트의 모든 결정은 이 중 하나에 기여해야 합니다.
- 실제이고 잘 준비된 3D 에셋. 사진 텍스처가 있는 스캔, 잘 다듬어진 AI 재구성(toppervenom의 경우처럼), 또는 실제 디테일이 있고 깨끗하며 가볍고 실제 스케일이 적용된 모델. 모델이 나쁘면 다른 어떤 것으로도 구제할 수 없습니다. →
references/3d-capture.md,references/3d-alternatives.md - 사진적 기준으로 렌더링. 3점 조명, 환경 맵, 중립 톤 매핑, 접촉 그림자, 보정된 재질(스캔의 경우 가죽을 플라스틱처럼 보이게 하는 거짓 메탈니스가 자주 포함됩니다). →
references/rendering.md - 마지막 디테일까지 구현된 아트 디렉션 콘셉트. toppervenom의 '기술 청사진': 그리드, 치수, 고정폭 타이포그래피, 로더는 "PLOTTING DRAWING Nº 01"이라고 표시되고, 레일은 "REV. 0 — BLUEPRINT"라고 표시됩니다. 모든 것이 동일한 이야기를 전달합니다. →
references/art-direction.md - 키프레임이 아닌 물리 기반 움직임. 포즈가 섹션별로 선언되고, JS가 smoothstep으로 보간하며 각 값을 지수적 감쇠로 완화합니다. 이는 무게감과 관성을 제공합니다. →
references/choreography.md - 3D를 정당화하는 셰이더 효과. 평면이 오브젝트를 쓸어내리는 와이어프레임→솔리드 리빌, 프레넬이 있는 유령 표면, 휘도 기반 재색칠. 이는 비디오로는 할 수 없는 것들입니다. →
references/shaders.md
사용자가 '이런 것'을 요청하면 실제 작업은 좋은 모델 확보 + 콘셉트 선택 + 인내심을 가지고 조정입니다. 템플릿이 엔지니어링을 해결합니다.
오브젝트에 맞게 조정 (운동화를 복사하지 마세요)
템플릿에는 예시 시퀀스(청사진 → 치수 → 부품 → 리빌 → 숫자 → 원점 → 마무리)가 포함되어 있지만, 오브젝트의 형태와 스토리가 구성, 효과 및 액트를 결정합니다. 포즈를 작성하기 전에 이 표에서 오브젝트를 찾아보세요.
| 오브젝트 형태 | 예시 | 구성 | 가장 잘 작동하는 리빌 효과 | 일반적인 액트 |
|---|---|---|---|---|
| 가로로 긴 형태 | 운동화, 자동차, 기타, 칼, 펜, 기차 | 오브젝트는 한쪽에, 텍스트는 반대쪽에; 순수한 프로필을 위한 치수 | 길이 방향 쓸기 (앞 → 뒤) | 기술 프로필, 부품 디테일, 속도 또는 사용 |
| 수직 / 회전체 | 병, 향수, 램프, 꽃병, 트로피, 건물 | 오브젝트는 중앙 또는 1/3 지점에, 텍스트는 양쪽 두 열로; 클라이맥스는 앵글업 샷 | 아래에서 위로 쓸기 ("채워짐") 또는 횡단면 | 실루엣, 재질 또는 내용, 원점, 사용 의례 |
| 컴팩트 / 박스형 | 헤드폰, 카메라, 스피커, 시계, 콘솔, 보석 | 커다란 클로즈업 (scale 1.4–2)이 오브젝트를 매크로처럼 훑음 | 분해도(폭발 분해도) 또는 대각선 쓸기 | 디자인, 내부/구성 요소, 재질, 사양 |
| 평면 / 정면 판독형 | 책, 레코드, 그림, 회로 기판, 카드, 태블릿 | 짧은 회전(±0.4 rad)으로 두께 표시; 오래 측면을 보여주지 않음 | 응축되는 점, 또는 "나타나는" 페인트 | 앞면, 뒷면, 텍스처 디테일, 맥락 |
| 유기적 / 조각적 | 조각품, 음식, 식물, 화석, 장난감 | 느리고 넓은 회전, 많은 윤곽 조명 | 점 구름 → 표면, 또는 프레넬이 있는 유령 | 형태, 텍스처, 이야기, 인간의 규모 |
| 조립된 부품 | 가구, 기계, 모형, 모듈식 제품 | 높은 3/4 뷰, 전체 세트가 화면 안에 | 스크롤별 분해: 각 부품이 축을 따라 분리되었다가 돌아옴 | 세트 → 분해 → 부품별 → 조립 |
| 대규모 | 주택, 건물, 부지, 선박 | 더 먼 카메라, 테이블 위의 "모형" 회전 | 층별 수직 쓸기, 단면 절단 | 위치, 평면도, 단면도, 재질 |
또한 기본값이 아닌 오브젝트에 따라 시각적 콘셉트를 선택하세요. "기술 청사진"은 설계되거나 제조된 모든 것에 적합합니다. 와인은 "와이너리 카드"를 요구할 수 있고, 조각품은 "박물관 카탈로그", 가젯은 "실험실", 빈티지 품목은 "시대 카탈로그"가 적합할 수 있습니다. 전체 메뉴는 references/art-direction.md에 있으며, 대체 효과(분해, 포인트, 절단, 채움)는 references/shaders.md에 있습니다.
워크플로우
다음 단계를 순서대로 따르세요. 코드를 작성하기 전에 사용자와 1단계와 2단계의 결정 사항을 확인하세요. 이 결정 사항은 이후 모든 것을 변경하기 때문입니다.
1단계 — 브리프 및 콘셉트 (사용자와 5분)
묻거나 추론하세요.
- 어떤 오브젝트이며 재질은 무엇인지(가죽, 유리, 금속, 무광 플라스틱, 천). 재질은 캡처 방법과 조명 방법을 결정합니다.
- 5-8개 액트의 스토리. 각 액트는 섹션이자 오브젝트의 포즈입니다. 일반적인 예: 소개 → 청사진/치수 → 해부학(부품) → 리빌 → 숫자 → 원점/이야기 → 마무리.
- 시각적 콘셉트, 즉 모든 것을 통합하는 은유. 기본값으로 "청사진"을 복사하지 마세요. 해당 제품에 적합한 은유를 선택하세요.
references/art-direction.md에는 콘셉트 메뉴(기술 청사진, 박물관 카드, 실험실, 90년대 카탈로그, 패션 에디토리얼, 산업 분해도)와 해당 팔레트, 타이포그래피, 각각이 3D로 변환되는 방법이 있습니다. - 실제 콘텐츠. 데이터, 치수, 재질, 스토리, 크레딧. 참조 웹사이트는 원본 카탈로그와 스캔의 실제 데이터를 사용하기 때문에 진정성 있게 느껴집니다. 데이터가 없으면 요청하세요. 실제 제품의 사양을 지어내지 마세요.
- 언어 (es/en) 및 색상 변형 여부.
2단계 — 3D 모델 확보
이 단계가 최종 품질에 가장 큰 영향을 미칩니다. 이 결정 트리를 사용하고 해당 참고 자료를 읽으세요.
사용자가 실제 오브젝트를 가지고 있습니까?
├─ 예 → 스캔 (references/3d-capture.md)
│ ├─ 무광/텍스처 오브젝트 (운동화, 음식, 돌, 나무, 천) → 휴대폰 또는 카메라로 사진측량
│ ├─ 광택, 검정 또는 투명 → 일시적 매트 스프레이 + 사진측량, 또는 모델링
│ └─ 매우 작음/가늠 (보석, 케이블) → 매크로 사진측량 또는 모델링
└─ 아니오 → 대안 (references/3d-alternatives.md)
├─ 제조업체의 CAD/STEP 파일 있음 → 변환 및 텍스처링
├─ 여러 각도에서 좋은 사진 있음 → AI image-to-3D (Meshy, Tripo, Rodin, Hunyuan3D, TRELLIS) + 정리
├─ 기하학적 형태 (병, 캔, 램프, 가구) → Blender에서 모델링 (회전/돌출), 1-4시간
├─ 일반 제품 → 라이선스로 구매 또는 다운로드 (Fab, Sketchfab, CGTrader, Poly Haven)
└─ 모델 불가능 → 절차적/양식화된 오브젝트 (lathe, SVG 돌출, 점, 선 아트)
출처와 관계없이 모델은 최적화 파이프라인 (references/asset-pipeline.md)을 거칩니다: 정리, 10만-30만 삼각형으로 데시메이션, 2048-4096 크기 WebP 텍스처, Meshopt 압축, 실제 스케일, 올바른 원점 및 방향, 그리고 와이어프레임용으로 매우 데시메이트된 별도 메쉬. 이 디테일은 매우 중요합니다. 밀도가 높은 메쉬의 와이어프레임은 회색 노이즈처럼 보이고 그림처럼 보이지 않습니다.
이 단계를 위한 준비된 스크립트가 있습니다: scripts/prepare-model.sh <input.glb|.obj|.fbx> <name>. 최적화된 models/<name>.glb와 라인용 models/<name>-wire.glb를 생성합니다. 예시 Stratocaster의 경우 22.2MB에서 1.8MB로 줄었습니다.
스캔 또는 수제 모델. 데시메이트된 와이어 메쉬는 스캔을 위한 것입니다. 여기서 가장자리는 노이즈입니다. 수제 모델(CAD, Sketchfab, Blender)의 경우 데시메이트된 메쉬는 표면을 가로지르는 긴 삼각형이 되어 메쉬처럼 읽히고 그림처럼 읽히지 않습니다. 이 경우 기본 메쉬에 wireMode: 'edges'를 사용하고 wireModel: null로 설정하여 wire를 생성하지 마세요. 기술 도면처럼 읽히며 파일 하나를 절약할 수 있습니다.
Sketchfab 다운로드: 로그인 필요 (무료 계정). 통합 브라우저를 사용하는 경우 사용자에게 로그인을 요청하고 다운로드 전에 이름, 크기, 형식(GLB)을 확인하세요. 원본은 별도의 source/ 폴더에 저장하고 저자(CC BY)를 바닥글에 표시하세요.
3단계 — 템플릿에서 프로젝트 구성
assets/template/를 프로젝트 폴더에 복사하세요. 포함된 내용은 다음과 같습니다.
| 파일 | 기능 |
|---|---|
index.html | 구조: 고정 배경(그리드 + 종이), 고정 <canvas>, 오버레이 <svg>, 로더, 탐색, 진행 레일, 컬러웨이 선택기, 포즈 속성이 있는 섹션(data-ry, data-x, data-reveal 등). |
styles.css | 시각적 시스템: 토큰, clamp()를 사용한 유동 타이포그래피, CSS 그리드, 종이 배경, 블러 리빌, 이징 곡선, 모바일. |
main.js | 엔진: 렌더러, 조명, 진행률 로딩, 리빌 및 컬러웨이 셰이더, 와이어프레임 및 유령, 그림자, 스크롤 연출, 스프링 드래그, SVG 오버레이 (치수 및 콜아웃), 카운터, 컬러웨이. 파일 시작 부분의 CONFIG에서 모두 설정 가능. |
빌드가 필요 없습니다. 모든 정적 서버(npx serve, python -m http.server)로 제공됩니다. ES 모듈 때문에 file://에서는 작동하지 않습니다. Three.js는 importmap에서 고정 버전으로 jsDelivr에서 가져옵니다. 프로덕션의 경우 vendor/에 복사하고 modulepreload를 추가하는 것이 좋습니다 (references/performance.md 참조).
모델 없이 테스트: index.html?model=<.glb URL> 또는 매개변수 없이 대체 절차적 오브젝트를 확인합니다. 좋은 테스트용 glb는 KhronosGroup/glTF-Sample-Assets의 MaterialsVariantsShoe.glb입니다.
4단계 — 씬에 모델 조정
main.js → CONFIG에서:
orient: Y축이 위를 향하고 길이가 X축을 따라 오도록 회전시킵니다(예: 서 있는 기타를 눕히려면[0, 0, -Math.PI/2]). 방향은 모델을 측정하기 전에 적용되므로 경계 상자, 치수,sweepDir, 콜아웃 및 분해는 항상 이미 방향이 지정된 공간에서 표현됩니다. 축을 확인하려면?debug를 사용하세요.realSizeCm: 가장 긴 변의 실제 길이(cm). 여기에서 표시되는 모든 치수가 계산됩니다.sweepDir: 리빌 스윕 방향. 오브젝트의 자연스러운 "판독" 방향을 따라야 합니다. 긴 오브젝트는 길이 방향([1,0,0]또는[0,0,1]), 병이나 건물은 아래에서 위로([0,1,0]), 컴팩트 오브젝트는 대각선([0.3,0.3,1]).callouts: 부품 위치를 경계 상자의 비율(f, 0..1) 또는 모델의 정확한 좌표(p, 자체 단위)로 표시합니다. 코드는 이를 가장 가까운 정점에 고정합니다. 선이 교차하지 않도록 위에서 아래로 정렬하세요.?debug를 사용하여 모델을 클릭하면 콘솔이 해당 지점의 정확한 비율을 출력합니다.colorways: 변형별로 어둡게/밝게 정의합니다(또는 오브젝트에 변형이 없으면 선택기를 제거). 셰이더는 휘도로 재색칠하고 채도가 높은 디테일을 유지합니다. 오브젝트 자체가 채도가 높은 색상이면keepSaturated: 0으로 설정하세요.- 섹션:
<section>을 자유롭게 추가, 제거 또는 재정렬하세요. 엔진은 임의 개수의 섹션에서 포즈를 순서에 관계없이 읽습니다. - 특수 사례를 위한 엔진 옵션:
procedural: () => Object3D는 glb를 로드하는 대신 코드로 오브젝트를 구성합니다.wireMode: 'edges'는 그리기 가장자리만 그립니다. 하드 오브젝트, CAD 또는 절차적 오브젝트에 가장 적합합니다.extraKeys: ['screen']+onFrame(cur, dt, t)는 섹션별로 제어되는 사용자 정의 효과(data-screen)에 사용됩니다. 예를 들어, 켜지는 화면, 조명 또는 열리는 뚜껑.data-explode가 있는 분해: 각 부품은userData.explode = [x,y,z]에 따라 이동합니다(또는 없는 경우 중심에서 멀어짐).- 부품별:
userData.noRecolor(컬러웨이 무시),userData.noWire(청사진에 표시 안 됨),userData.keepPbr(엔진이 재질을 건드리지 않음). recolorOnly: ['BodyMaterial']: 해당 재질(glb 이름 기준)만 컬러웨이를 적용합니다. 기타의 경우 본체만 칠해지고 픽가드, 넥, 하드웨어는 그대로 유지됩니다.keepPbr: true는 수제 모델의 PBR을 존중합니다(실제 금속, 클리어코트 바니시). 기본적으로 엔진은 스캔 및 AI의 거짓 메탈니스를 수정하며, 이는 잘 만들어진 모델을 망칩니다.wireColors: [종이 0이 있는 색상, 종이 1이 있는 색상]및edgeColor는 청사진을 모든 콘셉트에 맞게 조정합니다. 예를 들어 파란색 배경의 흰색 대신 특허 종이의 잉크. 배경의 두 상태(backdrop__grid및backdrop__paper)는 이름일 뿐입니다. 시트 → 무대, 진열장 → 밤 등으로 스타일을 지정할 수 있습니다.data-rz(롤)은 기타를 받침대에 놓는 것과 같이 긴 오브젝트를 세우는 데 사용됩니다. 바닥 그림자는 오브젝트를 세울 때 자동으로 꺼집니다.
...
[번역을 위해 잘림]