·three-js
</>

three-js

noklip-io/agent-skills

이 스킬은 사용자가 "3D 장면 만들기", "메시 추가", "OrbitControls 구현", "GLTF 모델 로드", "블룸 후처리 추가", "사용자 정의 셰이더 작성", "입자 효과 생성", "Three.js 성능 최적화", "WebGPU 사용", "그림자 추가", "모델 애니메이션" 또는 Three.js, threejs, WebGL을 언급합니다. WebGPU, GLTF, 레이캐스터, 셰이더 재질, PBR 재질 또는 후처리 효과. 중요: 이 스킬은 VANILLA Three.js(명령형 JavaScript)용입니다. 반응 3의 경우 Fiber(@react-3/섬유, R3F, drei)는 'r3f-best-practices' 기술을 확인하세요. R3F는 Three.js용 React 렌더러이므로 R3F로 작업할 때 three-js 기술이 도움이 됩니다. 장면 설정을 포함하여 3D 웹 그래픽에 대한 완전한 Three.js 참조를 제공합니다. 기하학, 재료, 텍스처, 조명, 카메라, 로더, 애니메이션, 컨트롤, 상호 작용, 셰이더, 후처리, 성능 최적화, TSL/노드 재료, WebGPU, 물리학 및 VR/XR 통합.

37설치·0트렌드·@noklip-io

설치

$npx skills add https://github.com/noklip-io/agent-skills --skill three-js

SKILL.md

React Three Fiber users: This reference is for vanilla Three.js. For R3F/Drei patterns, use the r3f-best-practices skill. However, understanding Three.js concepts here helps when working with R3F since R3F is a React renderer for Three.js.

| references/01-fundamentals.md | Scene setup, renderer config, Object3D hierarchy, coordinate systems | | references/02-geometry.md | Creating shapes, BufferGeometry, instancing, points, lines | | references/06-cameras.md | Camera types, frustum, viewport, projection | | references/13-math.md | Vector3, Matrix4, Quaternion, Euler, Color, MathUtils |

| references/03-materials.md | PBR materials, shader materials, all material types | | references/04-textures.md | Texture loading, UV mapping, render targets, environment maps | | references/05-lighting.md | Light types, shadows, IBL, light probes | | references/11-shaders.md | Custom GLSL shaders, uniforms, varyings, shader patterns |

원본 보기

인용 가능한 정보

AI/검색 인용용 안정적인 필드와 명령어.

설치 명령어
npx skills add https://github.com/noklip-io/agent-skills --skill three-js
카테고리
</>개발 도구
인증됨
최초 등록
2026-02-01
업데이트
2026-02-18

빠른 답변

three-js이란?

이 스킬은 사용자가 "3D 장면 만들기", "메시 추가", "OrbitControls 구현", "GLTF 모델 로드", "블룸 후처리 추가", "사용자 정의 셰이더 작성", "입자 효과 생성", "Three.js 성능 최적화", "WebGPU 사용", "그림자 추가", "모델 애니메이션" 또는 Three.js, threejs, WebGL을 언급합니다. WebGPU, GLTF, 레이캐스터, 셰이더 재질, PBR 재질 또는 후처리 효과. 중요: 이 스킬은 VANILLA Three.js(명령형 JavaScript)용입니다. 반응 3의 경우 Fiber(@react-3/섬유, R3F, drei)는 'r3f-best-practices' 기술을 확인하세요. R3F는 Three.js용 React 렌더러이므로 R3F로 작업할 때 three-js 기술이 도움이 됩니다. 장면 설정을 포함하여 3D 웹 그래픽에 대한 완전한 Three.js 참조를 제공합니다. 기하학, 재료, 텍스처, 조명, 카메라, 로더, 애니메이션, 컨트롤, 상호 작용, 셰이더, 후처리, 성능 최적화, TSL/노드 재료, WebGPU, 물리학 및 VR/XR 통합. 출처: noklip-io/agent-skills.

three-js 설치 방법은?

터미널 또는 명령줄 도구(Terminal, iTerm, Windows Terminal 등)를 엽니다 이 명령어를 복사하여 실행합니다: npx skills add https://github.com/noklip-io/agent-skills --skill three-js 설치 후 스킬은 자동으로 AI 코딩 환경에 설정되어 Claude Code나 Cursor에서 사용할 수 있습니다

소스 저장소는 어디인가요?

https://github.com/noklip-io/agent-skills

상세

카테고리
</>개발 도구
출처
skills.sh
최초 등록
2026-02-01