프런트엔드 & UI
WebGL 3D Object
PBR 머티리얼과 진짜 그림자를 갖춘, 빛을 받는 Three.js 히어로 메시.
무엇인가
면이 각진 히어로 오브젝트 하나를 위한 Three.js 레시피. 정이십면체 지오메트리, MeshStandardMaterial, 원근 카메라, 키 라이트와 림 라이트, 그림자 평면, 느린 부유 회전.
Create a real 3D WebGL object with geometric mesh depth, physically based material, directional and ambient lighting, perspective camera, subtle rotation, and floating motion. Use when a page needs a faceted 3D hero obje
디자인에 왜 중요한가
- 진짜 지오메트리와 조명이 CSS 트랜스폼으로는 흉내 낼 수 없는 모서리, 하이라이트, 그림자를 만듭니다.
- 머티리얼 프리셋이 고급스러운 메탈, 부드러운 세라믹, 발광 색이 밴 테크 룩을 아우릅니다.
- 움직임을 느린 회전과 작은 위아래 흔들림으로 제한해 카피가 주역으로 남습니다.
다루는 내용
- Rules
- HTML and CSS
- Three.js object recipe
- Material defaults
- Lighting defaults
- Quick checks
설치 방법
WebGL 3D Object
-
저장소를 클론하세요.
git clone https://github.com/MengTo/Skills -
Codex에 스킬 파일 경로를 지정하세요.
agent-skills/web-design/webgl-3d-object/SKILL.md -
그다음 원하는 UI를 설명하세요. Codex가 스킬을 따릅니다.
Codex로 실행하는 법
-
정사각 캔버스 셸을 추가한 뒤 그 위에 Three.js 초기화기를 실행하세요.
-
브랜드 무드에 맞춰 color, metalness, roughness, emissive를 설정하세요.
-
리사이즈 처리와 지오메트리, 머티리얼, 렌더러의 정리를 확인하세요.
여기 모인 플러그인은 모두 무료 오픈소스이며, 실제 업스트림 출처로 연결됩니다.
codex-design 목록에서 더 보기 ↗다른 Codex 디자인 플러그인
프런트엔드 & UI 무엇을 하나 gpt-taste GSAP 스크롤 모션과 빈틈없는 벤토 그리드로 수상작급 랜딩 페이지를 만듭니다. 
디자인 시스템 무엇을 하나 Stitch Design Taste Google Stitch가 흔해 빠진 화면 대신 개성 있는 화면을 내놓도록 DESIGN.md를 작성합니다. 
프런트엔드 & UI 무엇을 하나 image-to-code 디자인 이미지를 먼저 생성하고 분석한 뒤, 그에 맞는 프런트엔드 코드를 만듭니다. 
프런트엔드 & UI 무엇을 하나 imagegen-frontend-mobile 프리미엄 모바일 앱 화면 플로우를 코드가 아니라 이미지로 생성합니다. 다음 단계
세팅 없이, Open Design으로 디자인하기
이 플러그인을 직접 설치해도 되고, Open Design으로 Codex 주위에 잘 정돈된 디자인 레이어를 통째로 두를 수도 있습니다. 키는 직접 가져오고, 산출물도 직접 소유하세요.