threejs-skills
Three.js 로 3D 그래픽 및 인터랙티브 씬 만들기
3D 웹 경험을 구축하려면 씬 설정, 조명 및 렌더링 패턴에 대한 이해가 필요합니다. 이 스킬은 성능이 우수한 인터랙티브 3D 콘텐츠를 만들기 위한 체계적인 Three.js 패턴을 제공합니다.
تنزيل ZIP المهارة
رفع في Claude
اذهب إلى Settings → Capabilities → Skills → Upload skill
فعّل وابدأ الاستخدام
اختبرها
استخدام "threejs-skills". 클릭 시 색상이 변경되는 회전하는 구체가 있는 3D 씬 만들기
النتيجة المتوقعة:
- Three.js r128 CDN 임포트가 포함된 완전한 HTML 파일
- z=5 에 포지셔닝된 카메라가 있는 씬 초기화
- 부드러운 외관을 위한 32 세그먼트의 SphereGeometry
- 초기 색상이 있는 MeshStandardMaterial
- 앰비언트 및 디렉셔널 조명 설정
- x 및 y 축에서 구체를 회전시키는 애니메이션 루프
- 클릭 감지를 위한 레이캐스팅 구현
- 인터섹션 시 머티리얼 색상을 변경하는 이벤트 리스너
- 반응형 캔버스를 위한 윈도우 리사이즈 핸들러
استخدام "threejs-skills". 카메라 방향으로 흐르는 파티클 필드 구축
النتيجة المتوقعة:
- Float32Array 를 사용한 2000 개 파티클의 BufferGeometry
- 3D 공간에 퍼진 무작위 초기 포지션
- 흰색과 크기 0.02 의 PointsMaterial
- 각 프레임마다 z 포지션을 업데이트하는 애니메이션 루프
- 파티클이 카메라 임계값을 통과할 때 포지션 리셋
- 정리를 위한 적절한 dispose 패턴
- 부드러운 60fps 성능 최적화
التدقيق الأمني
آمنThis skill contains documentation-only content (SKILL.md) teaching Three.js 3D graphics development. All 82 static analysis findings are false positives: backtick characters are Markdown code block delimiters, not shell execution; URLs are CDN resource references for the Three.js library; cryptographic warnings are pattern mismatches on version numbers and documentation text. No executable code, no network calls, no command injection vectors exist in this educational content.
درجة الجودة
ماذا يمكنك بناءه
인터랙티브 제품 시각화
사용자가 브라우저에서 직접 회전, 확대 및 탐색할 수 있는 3D 제품 디스플레이를 만듭니다.
데이터 시각화 대시보드
복잡한 데이터셋을 몰입형 3D 차트, 그래프 및 공간 표현으로 변환합니다.
교육용 3D 콘텐츠
해부학, 천문학, 건축학 또는 공학 개념을 가르치기 위한 인터랙티브 모델을 구축합니다.
جرّب هذه الموجهات
회전하는 큐브가 있는 기본 Three.js 씬을 만드세요. 씬 설정, 카메라, 안티앨리어싱이 포함된 렌더러, 색상이 있는 큐브 지오메트리, 조명 및 애니메이션 루프를 포함하세요. 윈도우 리사이즈 처리를 추가하세요.
마우스 움직임에 반응하는 인터랙티브 3D 구체를 구축하세요. OrbitControls 없이 커스텀 카메라 컨트롤 (드래그하여 회전, 스크롤하여 확대/축소) 을 구현하세요. 적절한 조명을 사용하여 MeshStandardMaterial 을 사용하세요.
BufferGeometry 를 사용하여 1000 개 이상의 파티클로 파티클 시스템을 생성하세요. 파티클이 시간이 지남에 따라 이동하거나 회전하도록 애니메이션을 추가하세요. 지오메트리 및 머티리얼 처분과 같은 적절한 성능 관행을 포함하세요.
레이캐스팅을 구현하여 3D 오브젝트에서 마우스 클릭 및 호버를 감지하세요. 호버할 때 오브젝트를 스케일링하고 커서 스타일을 변경하세요. 클릭할 때 오브젝트 색상을 변경하세요. 클릭 가능한 오브젝트 배열을 포함하세요.
أفضل الممارسات
- 항상 아티팩트 호환성을 위해 Three.js r128 CDN 을 사용하고 기능 가용성을 확인하세요
- 카메라의 종횡비와 렌더러 치수를 업데이트하기 위해 윈도우 리사이즈 핸들러를 추가하세요
- 메모리 누수를 방지하기 위해 오브젝트를 제거할 때 지오메트리, 머티리얼 및 텍스처를 처분하세요
تجنب
- r128 CDN 에서 사용할 수 없는 OrbitControls 또는 애드온 임포트 사용
- r142 이상 버전이 필요한 CapsuleGeometry 사용
- MeshStandardMaterial 과 같은 조명 기반 머티리얼을 사용할 때 조명 추가를 잊는 것