3DPro셰이더새 카드
스크롤이 카메라를 움직이는 3D 쇼케이스
화면을 내리면 카메라가 따라 움직이며 여섯 장면을 지나간다. 배경색까지 장면마다 바뀌고, 오브젝트는 실제 재질로 계산해 그린다. 3D 라이브러리는 쓰지 않는다.
마지막 수정
여는 방법 보기카카오 로그인만 하면 전체가 열립니다
로그인하면 전체가 열립니다
붙일 프롬프트
스크롤에 3D 를 붙여 달라고 하면 AI 는 보통 오브젝트를 제자리에서 돌린다. 이 팩은 스크롤 위치를 장면의 시각으로 직접 바꿔, 내린 만큼 카메라가 이동하고 배경색까지 함께 넘어가게 만든다.
로그인하면 보이는 본문
카카오 로그인하면 바로 열립니다
Pro 카드는 얼리액세스라 로그인한 분에게만 열어 두었습니다. 돈은 받지 않고, 로그인 한 번이면 본문 전체와 완성 미리보기가 그대로 보입니다.
얼리액세스 안내 보기붙이기 전에 한 번
언제 쓰고, 뭐가 필요한가
언제 쓰나
제품을 형태로 보여 줘야 하는 곳에 쓴다. 가구·조명·주문 제작 오브젝트처럼 사진 한 장으로는 부족하고 돌려 봐야 아는 것들이다. 스크롤 길이가 곧 이야기 길이라, 장면을 더 붙이면 페이지가 길어지고 빼면 짧아진다.
준비물
- 새 프로젝트다. Next.js 는 1번 뼈대가 깔려 있고, HTML 은 빈 index.html 에서 시작한다
- 장면마다 넣을 문구가 있다. 각 장면에 라벨 한 줄, 제목 두 줄, 설명 한 문장
- 첫 화면 문구가 따로 있다. 라벨·제목 두 줄·설명 한 문단·버튼 하나
- WebGL2 를 쓴다. 지원하지 않는 브라우저에서는 배경 그라디언트로 대체하고 글만 보여 준다
같이 쓰면 좋습니다