{"id":"70cf5ece-8eda-495b-9727-ad71302d2341","shortId":"ST4LVU","kind":"skill","title":"threejs-skills","tagline":"Create 3D scenes, interactive experiences, and visual effects using Three.js. Use when user requests 3D graphics, WebGL experiences, 3D visualizations, animations, or interactive 3D elements.","description":"# Three.js Skills\n\nSystematically create high-quality 3D scenes and interactive experiences using Three.js best practices.\n\n## When to Use\n- Requests 3D visualizations or graphics (\"create a 3D model\", \"show in 3D\")\n- Wants interactive 3D experiences (\"rotating cube\", \"explorable scene\")\n- Needs WebGL or canvas-based rendering\n- Asks for animations, particles, or visual effects\n- Mentions Three.js, WebGL, or 3D rendering\n- Wants to visualize data in 3D space\n\n## Core Setup Pattern\n\n### 1. Essential Three.js Imports\n\nUse ES module import maps for modern Three.js (r183+):\n\n```html\n<script type=\"importmap\">\n{\n  \"imports\": {\n    \"three\": \"https://cdn.jsdelivr.net/npm/three@0.183.0/build/three.module.js\",\n    \"three/addons/\": \"https://cdn.jsdelivr.net/npm/three@0.183.0/examples/jsm/\"\n  }\n}\n</script>\n<script type=\"module\">\nimport * as THREE from \"three\";\nimport { OrbitControls } from \"three/addons/controls/OrbitControls.js\";\n</script>\n```\n\nFor production with npm/vite/webpack:\n\n```javascript\nimport * as THREE from \"three\";\nimport { OrbitControls } from \"three/addons/controls/OrbitControls.js\";\n```\n\n### 2. Scene Initialization\n\nEvery Three.js artifact needs these core components:\n\n```javascript\n// Scene - contains all 3D objects\nconst scene = new THREE.Scene();\n\n// Camera - defines viewing perspective\nconst camera = new THREE.PerspectiveCamera(\n  75, // Field of view\n  window.innerWidth / window.innerHeight, // Aspect ratio\n  0.1, // Near clipping plane\n  1000, // Far clipping plane\n);\ncamera.position.z = 5;\n\n// Renderer - draws the scene\nconst renderer = new THREE.WebGLRenderer({ antialias: true });\nrenderer.setSize(window.innerWidth, window.innerHeight);\ndocument.body.appendChild(renderer.domElement);\n```\n\n### 3. Animation Loop\n\nUse `renderer.setAnimationLoop()` (preferred) or `requestAnimationFrame`:\n\n```javascript\n// Preferred: setAnimationLoop (handles WebXR compatibility)\nrenderer.setAnimationLoop(() => {\n  mesh.rotation.x += 0.01;\n  mesh.rotation.y += 0.01;\n  renderer.render(scene, camera);\n});\n\n// Alternative: manual requestAnimationFrame\nfunction animate() {\n  requestAnimationFrame(animate);\n  mesh.rotation.x += 0.01;\n  mesh.rotation.y += 0.01;\n  renderer.render(scene, camera);\n}\nanimate();\n```\n\n## Systematic Development Process\n\n### 1. Define the Scene\n\nStart by identifying:\n\n- **What objects** need to be rendered\n- **Camera position** and field of view\n- **Lighting setup** required\n- **Interaction model** (static, rotating, user-controlled)\n\n### 2. Build Geometry\n\nChoose appropriate geometry types:\n\n**Basic Shapes:**\n\n- `BoxGeometry` - cubes, rectangular prisms\n- `SphereGeometry` - spheres, planets\n- `CylinderGeometry` - cylinders, tubes\n- `PlaneGeometry` - flat surfaces, ground planes\n- `TorusGeometry` - donuts, rings\n\n**CapsuleGeometry** is available (stable since r142):\n\n```javascript\nnew THREE.CapsuleGeometry(0.5, 1, 4, 8); // radius, length, capSegments, radialSegments\n```\n\n### 3. Apply Materials\n\nChoose materials based on visual needs:\n\n**Common Materials:**\n\n- `MeshBasicMaterial` - unlit, flat colors (no lighting needed)\n- `MeshStandardMaterial` - physically-based, realistic (needs lighting)\n- `MeshPhongMaterial` - shiny surfaces with specular highlights\n- `MeshLambertMaterial` - matte surfaces, diffuse reflection\n\n```javascript\nconst material = new THREE.MeshStandardMaterial({\n  color: 0x00ff00,\n  metalness: 0.5,\n  roughness: 0.5,\n});\n```\n\n### 4. Add Lighting\n\n**If using lit materials** (Standard, Phong, Lambert), add lights:\n\n```javascript\n// Ambient light - general illumination\nconst ambientLight = new THREE.AmbientLight(0xffffff, 0.5);\nscene.add(ambientLight);\n\n// Directional light - like sunlight\nconst directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);\ndirectionalLight.position.set(5, 5, 5);\nscene.add(directionalLight);\n```\n\n**Skip lighting** if using `MeshBasicMaterial` - it's unlit by design.\n\n### 5. Handle Responsiveness\n\nAlways add window resize handling:\n\n```javascript\nwindow.addEventListener(\"resize\", () => {\n  camera.aspect = window.innerWidth / window.innerHeight;\n  camera.updateProjectionMatrix();\n  renderer.setSize(window.innerWidth, window.innerHeight);\n});\n```\n\n## Common Patterns\n\n### Rotating Object\n\n```javascript\nfunction animate() {\n  requestAnimationFrame(animate);\n  mesh.rotation.x += 0.01;\n  mesh.rotation.y += 0.01;\n  renderer.render(scene, camera);\n}\n```\n\n### OrbitControls\n\nWith import maps or build tools, OrbitControls works directly:\n\n```javascript\nimport { OrbitControls } from \"three/addons/controls/OrbitControls.js\";\n\nconst controls = new OrbitControls(camera, renderer.domElement);\ncontrols.enableDamping = true;\n\n// Update in animation loop\nrenderer.setAnimationLoop(() => {\n  controls.update();\n  renderer.render(scene, camera);\n});\n```\n\n### Custom Camera Controls (Alternative)\n\nFor lightweight custom controls without importing OrbitControls:\n\n```javascript\nlet isDragging = false;\nlet previousMousePosition = { x: 0, y: 0 };\n\nrenderer.domElement.addEventListener(\"mousedown\", () => {\n  isDragging = true;\n});\n\nrenderer.domElement.addEventListener(\"mouseup\", () => {\n  isDragging = false;\n});\n\nrenderer.domElement.addEventListener(\"mousemove\", (event) => {\n  if (isDragging) {\n    const deltaX = event.clientX - previousMousePosition.x;\n    const deltaY = event.clientY - previousMousePosition.y;\n\n    // Rotate camera around scene\n    const rotationSpeed = 0.005;\n    camera.position.x += deltaX * rotationSpeed;\n    camera.position.y -= deltaY * rotationSpeed;\n    camera.lookAt(scene.position);\n  }\n\n  previousMousePosition = { x: event.clientX, y: event.clientY };\n});\n\n// Zoom with mouse wheel\nrenderer.domElement.addEventListener(\"wheel\", (event) => {\n  event.preventDefault();\n  camera.position.z += event.deltaY * 0.01;\n  camera.position.z = Math.max(2, Math.min(20, camera.position.z)); // Clamp\n});\n```\n\n### Raycasting for Object Selection\n\nDetect mouse clicks and hovers on 3D objects:\n\n```javascript\nconst raycaster = new THREE.Raycaster();\nconst mouse = new THREE.Vector2();\nconst clickableObjects = []; // Array of meshes that can be clicked\n\n// Update mouse position\nwindow.addEventListener(\"mousemove\", (event) => {\n  mouse.x = (event.clientX / window.innerWidth) * 2 - 1;\n  mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;\n});\n\n// Detect clicks\nwindow.addEventListener(\"click\", () => {\n  raycaster.setFromCamera(mouse, camera);\n  const intersects = raycaster.intersectObjects(clickableObjects);\n\n  if (intersects.length > 0) {\n    const clickedObject = intersects[0].object;\n    // Handle click - change color, scale, etc.\n    clickedObject.material.color.set(0xff0000);\n  }\n});\n\n// Hover effect in animation loop\nfunction animate() {\n  requestAnimationFrame(animate);\n\n  raycaster.setFromCamera(mouse, camera);\n  const intersects = raycaster.intersectObjects(clickableObjects);\n\n  // Reset all objects\n  clickableObjects.forEach((obj) => {\n    obj.scale.set(1, 1, 1);\n  });\n\n  // Highlight hovered object\n  if (intersects.length > 0) {\n    intersects[0].object.scale.set(1.2, 1.2, 1.2);\n    document.body.style.cursor = \"pointer\";\n  } else {\n    document.body.style.cursor = \"default\";\n  }\n\n  renderer.render(scene, camera);\n}\n```\n\n### Particle System\n\n```javascript\nconst particlesGeometry = new THREE.BufferGeometry();\nconst particlesCount = 1000;\nconst posArray = new Float32Array(particlesCount * 3);\n\nfor (let i = 0; i < particlesCount * 3; i++) {\n  posArray[i] = (Math.random() - 0.5) * 10;\n}\n\nparticlesGeometry.setAttribute(\n  \"position\",\n  new THREE.BufferAttribute(posArray, 3),\n);\n\nconst particlesMaterial = new THREE.PointsMaterial({\n  size: 0.02,\n  color: 0xffffff,\n});\n\nconst particlesMesh = new THREE.Points(particlesGeometry, particlesMaterial);\nscene.add(particlesMesh);\n```\n\n### User Interaction (Mouse Movement)\n\n```javascript\nlet mouseX = 0;\nlet mouseY = 0;\n\ndocument.addEventListener(\"mousemove\", (event) => {\n  mouseX = (event.clientX / window.innerWidth) * 2 - 1;\n  mouseY = -(event.clientY / window.innerHeight) * 2 + 1;\n});\n\nfunction animate() {\n  requestAnimationFrame(animate);\n  camera.position.x = mouseX * 2;\n  camera.position.y = mouseY * 2;\n  camera.lookAt(scene.position);\n  renderer.render(scene, camera);\n}\n```\n\n### Loading Textures\n\n```javascript\nconst textureLoader = new THREE.TextureLoader();\nconst texture = textureLoader.load(\"texture-url.jpg\");\n\nconst material = new THREE.MeshStandardMaterial({\n  map: texture,\n});\n```\n\n## Best Practices\n\n### Performance\n\n- **Reuse geometries and materials** when creating multiple similar objects\n- **Use `BufferGeometry`** for custom shapes (more efficient)\n- **Limit particle counts** to maintain 60fps (start with 1000-5000)\n- **Dispose of resources** when removing objects:\n  ```javascript\n  geometry.dispose();\n  material.dispose();\n  texture.dispose();\n  ```\n\n### Visual Quality\n\n- Always set `antialias: true` on renderer for smooth edges\n- Use appropriate camera FOV (45-75 degrees typical)\n- Position lights thoughtfully - avoid overlapping multiple bright lights\n- Add ambient + directional lighting for realistic scenes\n\n### Code Organization\n\n- Initialize scene, camera, renderer at the top\n- Group related objects (e.g., all particles in one group)\n- Keep animation logic in the animate function\n- Separate object creation into functions for complex scenes\n\n### Common Pitfalls to Avoid\n\n- ❌ Using `outputEncoding` instead of `outputColorSpace` (renamed in r152)\n- ❌ Forgetting to add objects to scene with `scene.add()`\n- ❌ Using lit materials without adding lights\n- ❌ Not handling window resize\n- ❌ Forgetting to call `renderer.render()` in animation loop\n- ❌ Using `THREE.Clock` without considering `THREE.Timer` (recommended in r183)\n\n## Example Workflow\n\nUser: \"Create an interactive 3D sphere that responds to mouse movement\"\n\n1. **Setup**: Import Three.js, create scene/camera/renderer\n2. **Geometry**: Create `SphereGeometry(1, 32, 32)` for smooth sphere\n3. **Material**: Use `MeshStandardMaterial` for realistic look\n4. **Lighting**: Add ambient + directional lights\n5. **Interaction**: Track mouse position, update camera\n6. **Animation**: Rotate sphere, render continuously\n7. **Responsive**: Add window resize handler\n8. **Result**: Smooth, interactive 3D sphere ✓\n\n## Troubleshooting\n\n**Black screen / Nothing renders:**\n\n- Check if objects added to scene\n- Verify camera position isn't inside objects\n- Ensure renderer.render() is called\n- Add lights if using lit materials\n\n**Poor performance:**\n\n- Reduce particle count\n- Lower geometry detail (segments)\n- Reuse materials/geometries\n- Check browser console for errors\n\n**Objects not visible:**\n\n- Check object position vs camera position\n- Verify material has visible color/properties\n- Ensure camera far plane includes objects\n- Add lighting if needed\n\n## Advanced Techniques\n\n### Visual Polish for Portfolio-Grade Rendering\n\n**Shadows:**\n\n```javascript\n// Enable shadows on renderer\nrenderer.shadowMap.enabled = true;\nrenderer.shadowMap.type = THREE.PCFSoftShadowMap; // Soft shadows\n\n// Light that casts shadows\nconst directionalLight = new THREE.DirectionalLight(0xffffff, 1);\ndirectionalLight.position.set(5, 10, 5);\ndirectionalLight.castShadow = true;\n\n// Configure shadow quality\ndirectionalLight.shadow.mapSize.width = 2048;\ndirectionalLight.shadow.mapSize.height = 2048;\ndirectionalLight.shadow.camera.near = 0.5;\ndirectionalLight.shadow.camera.far = 50;\n\nscene.add(directionalLight);\n\n// Objects cast and receive shadows\nmesh.castShadow = true;\nmesh.receiveShadow = true;\n\n// Ground plane receives shadows\nconst groundGeometry = new THREE.PlaneGeometry(20, 20);\nconst groundMaterial = new THREE.MeshStandardMaterial({ color: 0x808080 });\nconst ground = new THREE.Mesh(groundGeometry, groundMaterial);\nground.rotation.x = -Math.PI / 2;\nground.receiveShadow = true;\nscene.add(ground);\n```\n\n**Environment Maps & Reflections:**\n\n```javascript\n// Create environment map from cubemap\nconst loader = new THREE.CubeTextureLoader();\nconst envMap = loader.load([\n  \"px.jpg\",\n  \"nx.jpg\", // positive x, negative x\n  \"py.jpg\",\n  \"ny.jpg\", // positive y, negative y\n  \"pz.jpg\",\n  \"nz.jpg\", // positive z, negative z\n]);\n\nscene.environment = envMap; // Affects all PBR materials\nscene.background = envMap; // Optional: use as skybox\n\n// Or apply to specific materials\nconst material = new THREE.MeshStandardMaterial({\n  metalness: 1.0,\n  roughness: 0.1,\n  envMap: envMap,\n});\n```\n\n**Tone Mapping & Output Encoding:**\n\n```javascript\n// Improve color accuracy and HDR rendering\nrenderer.toneMapping = THREE.ACESFilmicToneMapping;\nrenderer.toneMappingExposure = 1.0;\nrenderer.outputColorSpace = THREE.SRGBColorSpace; // Was outputEncoding in older versions\n\n// Makes colors more vibrant and realistic\n```\n\n**Fog for Depth:**\n\n```javascript\n// Linear fog\nscene.fog = new THREE.Fog(0xcccccc, 10, 50); // color, near, far\n\n// Or exponential fog (more realistic)\nscene.fog = new THREE.FogExp2(0xcccccc, 0.02); // color, density\n```\n\n### Custom Geometry from Vertices\n\n```javascript\nconst geometry = new THREE.BufferGeometry();\nconst vertices = new Float32Array([-1, -1, 0, 1, -1, 0, 1, 1, 0]);\ngeometry.setAttribute(\"position\", new THREE.BufferAttribute(vertices, 3));\n```\n\n### Post-Processing Effects\n\nPost-processing effects are available via import maps or build tools. See `threejs-postprocessing` skill for EffectComposer, bloom, DOF, and more.\n\n### Group Objects\n\n```javascript\nconst group = new THREE.Group();\ngroup.add(mesh1);\ngroup.add(mesh2);\ngroup.rotation.y = Math.PI / 4;\nscene.add(group);\n```\n\n## Summary\n\nThree.js artifacts require systematic setup:\n\n1. Import Three.js via import maps or build tools\n2. Initialize scene, camera, renderer\n3. Create geometry + material = mesh\n4. Add lighting if using lit materials\n5. Implement animation loop (prefer `setAnimationLoop`)\n6. Handle window resize\n7. Set `renderer.outputColorSpace = THREE.SRGBColorSpace`\n\nFollow these patterns for reliable, performant 3D experiences.\n\n## Modern Three.js Practices (r183)\n\n### Modular Imports\n\n```javascript\n// With npm/vite/webpack:\nimport * as THREE from \"three\";\nimport { OrbitControls } from \"three/addons/controls/OrbitControls.js\";\nimport { GLTFLoader } from \"three/addons/loaders/GLTFLoader.js\";\nimport { EffectComposer } from \"three/addons/postprocessing/EffectComposer.js\";\n```\n\n### WebGPU Renderer (Alternative)\n\nThree.js r183 includes a WebGPU renderer as an alternative to WebGL:\n\n```javascript\nimport { WebGPURenderer } from \"three/addons/renderers/webgpu/WebGPURenderer.js\";\n\nconst renderer = new WebGPURenderer({ antialias: true });\nawait renderer.init();\nrenderer.setSize(window.innerWidth, window.innerHeight);\n```\n\nWebGPU uses TSL (Three.js Shading Language) instead of GLSL for custom shaders. See `threejs-shaders` for details.\n\n### Timer (r183 Recommended)\n\n`THREE.Timer` is recommended over `THREE.Clock` as of r183:\n\n```javascript\nconst timer = new THREE.Timer();\n\nrenderer.setAnimationLoop(() => {\n  timer.update();\n  const delta = timer.getDelta();\n  const elapsed = timer.getElapsed();\n\n  mesh.rotation.y += delta;\n  renderer.render(scene, camera);\n});\n```\n\n**Benefits over Clock:**\n\n- Not affected by page visibility (pauses when tab is hidden)\n- Cleaner API design\n- Better integration with `setAnimationLoop`\n\n### Animation Libraries (GSAP Integration)\n\n```javascript\n// Smooth timeline-based animations\nimport gsap from \"gsap\";\n\n// Instead of manual animation loops:\ngsap.to(mesh.position, {\n  x: 5,\n  duration: 2,\n  ease: \"power2.inOut\",\n});\n\n// Complex sequences:\nconst timeline = gsap.timeline();\ntimeline\n  .to(mesh.rotation, { y: Math.PI * 2, duration: 2 })\n  .to(mesh.scale, { x: 2, y: 2, z: 2, duration: 1 }, \"-=1\");\n```\n\n**Why GSAP:**\n\n- Professional easing functions\n- Timeline control (pause, reverse, scrub)\n- Better than manual lerping for complex animations\n\n### Scroll-Based Interactions\n\n```javascript\n// Sync 3D animations with page scroll\nlet scrollY = window.scrollY;\n\nwindow.addEventListener(\"scroll\", () => {\n  scrollY = window.scrollY;\n});\n\nfunction animate() {\n  requestAnimationFrame(animate);\n\n  // Rotate based on scroll position\n  mesh.rotation.y = scrollY * 0.001;\n\n  // Move camera through scene\n  camera.position.y = -(scrollY / window.innerHeight) * 10;\n\n  renderer.render(scene, camera);\n}\n```\n\n**Advanced scroll libraries:**\n\n- ScrollTrigger (GSAP plugin)\n- Locomotive Scroll\n- Lenis smooth scroll\n\n### Performance Optimization in Production\n\n```javascript\n// Level of Detail (LOD)\nconst lod = new THREE.LOD();\nlod.addLevel(highDetailMesh, 0); // Close up\nlod.addLevel(mediumDetailMesh, 10); // Medium distance\nlod.addLevel(lowDetailMesh, 50); // Far away\nscene.add(lod);\n\n// Instanced meshes for many identical objects\nconst geometry = new THREE.BoxGeometry();\nconst material = new THREE.MeshStandardMaterial();\nconst instancedMesh = new THREE.InstancedMesh(geometry, material, 1000);\n\n// Set transforms for each instance\nconst matrix = new THREE.Matrix4();\nfor (let i = 0; i < 1000; i++) {\n  matrix.setPosition(\n    Math.random() * 100,\n    Math.random() * 100,\n    Math.random() * 100,\n  );\n  instancedMesh.setMatrixAt(i, matrix);\n}\n```\n\n### Modern Loading Patterns\n\n```javascript\n// In production, load 3D models:\nimport { GLTFLoader } from \"three/examples/jsm/loaders/GLTFLoader\";\n\nconst loader = new GLTFLoader();\nloader.load(\"model.gltf\", (gltf) => {\n  scene.add(gltf.scene);\n\n  // Traverse and setup materials\n  gltf.scene.traverse((child) => {\n    if (child.isMesh) {\n      child.castShadow = true;\n      child.receiveShadow = true;\n    }\n  });\n});\n```\n\n### When to Use What\n\n**Import Map Approach:**\n\n- Quick prototypes and demos\n- Educational content\n- Artifacts and embedded experiences\n- No build step required\n\n**Production Build Approach:**\n\n- Client projects and portfolios\n- Complex applications\n- Performance-critical applications\n- Team collaboration with version control\n\n### Recommended Production Stack\n\n```\nThree.js r183 + Vite\n├── GSAP (animations)\n├── React Three Fiber (optional - React integration)\n├── Drei (helper components)\n├── Leva (debug GUI)\n└── Post-processing effects\n```\n\n## Limitations\n- Use this skill only when the task clearly matches the scope described above.\n- Do not treat the output as a substitute for environment-specific validation, testing, or expert review.\n- Stop and ask for clarification if required inputs, permissions, safety boundaries, or success criteria are missing.","tags":["threejs","skills","antigravity","awesome","sickn33","agent-skills","agentic-skills","ai-agent-skills","ai-agents","ai-coding","ai-workflows","antigravity-skills"],"capabilities":["skill","source-sickn33","skill-threejs-skills","topic-agent-skills","topic-agentic-skills","topic-ai-agent-skills","topic-ai-agents","topic-ai-coding","topic-ai-workflows","topic-antigravity","topic-antigravity-skills","topic-claude-code","topic-claude-code-skills","topic-codex-cli","topic-codex-skills"],"categories":["antigravity-awesome-skills"],"synonyms":[],"warnings":[],"endpointUrl":"https://skills.sh/sickn33/antigravity-awesome-skills/threejs-skills","protocol":"skill","transport":"skills-sh","auth":{"type":"none","details":{"cli":"npx skills add sickn33/antigravity-awesome-skills","source_repo":"https://github.com/sickn33/antigravity-awesome-skills","install_from":"skills.sh"}},"qualityScore":"0.700","qualityRationale":"deterministic score 0.70 from registry signals: · indexed on github topic:agent-skills · 34460 github stars · SKILL.md body (18,397 chars)","verified":false,"liveness":"unknown","lastLivenessCheck":null,"agentReviews":{"count":0,"score_avg":null,"cost_usd_avg":null,"success_rate":null,"latency_p50_ms":null,"narrative_summary":null,"summary_updated_at":null},"enrichmentModel":"deterministic:skill-github:v1","enrichmentVersion":1,"enrichedAt":"2026-04-22T06:52:01.888Z","embedding":null,"createdAt":"2026-04-18T21:46:23.056Z","updatedAt":"2026-04-22T06:52:01.888Z","lastSeenAt":"2026-04-22T06:52:01.888Z","tsv":"'-1':1287,1288,1291 '-5000':811 '-75':838 '0':489,491,615,619,659,661,693,732,735,1289,1292,1295,1661,1709 '0.001':1622 '0.005':519 '0.01':205,208,221,224,432,435,546 '0.02':714,1271 '0.1':162,1216 '0.5':297,349,351,374,701,1114 '0.8':386 '0x00ff00':347 '0x808080':1143 '0xcccccc':1256,1270 '0xff0000':628 '0xffffff':373,385,716,1098 '1':98,232,298,596,601,651,652,653,743,748,947,957,1099,1290,1293,1294,1352,1573,1574 '1.0':1214,1233 '1.2':663,664,665 '10':702,1102,1257,1631,1666 '100':1715,1717,1719 '1000':166,683,810,1696,1711 '2':126,261,550,595,600,742,747,756,760,953,1153,1361,1548,1561,1563,1567,1569,1571 '20':552,1136,1137 '2048':1110,1112 '3':188,305,689,696,708,963,1301,1366 '32':958,959 '3d':5,18,22,27,36,49,55,59,62,86,93,140,566,940,999,1398,1598,1730 '4':299,352,970,1343,1371 '45':837 '5':172,388,389,390,403,976,1101,1103,1378,1546 '50':1116,1258,1671 '6':983,1384 '60fps':807 '7':989,1388 '75':154 '8':300,995 'accuraci':1226 'ad':913,1009 'add':353,362,407,849,903,972,991,1023,1065,1372 'advanc':1069,1635 'affect':1194,1508 'altern':212,474,1428,1437 'alway':406,824 'ambient':365,850,973 'ambientlight':370,376 'anim':24,77,189,216,218,228,427,429,464,632,635,637,750,752,875,879,924,984,1380,1524,1533,1541,1591,1599,1611,1613,1803 'antialia':181,826,1449 'api':1518 'appli':306,1205 'applic':1786,1790 'approach':1763,1780 'appropri':265,834 'around':515 'array':579 'artifact':131,1348,1770 'ask':75,1853 'aspect':160 'avail':290,1311 'avoid':844,892 'await':1451 'away':1673 'base':73,310,326,1532,1594,1615 'basic':268 'benefit':1504 'best':43,783 'better':1520,1585 'black':1002 'bloom':1325 'boundari':1861 'boxgeometri':270 'bright':847 'browser':1041 'buffergeometri':796 'build':262,444,1316,1359,1775,1779 'call':921,1022 'camera':146,151,211,227,245,438,458,470,472,514,608,640,673,765,835,860,982,1013,1052,1060,1364,1503,1624,1634 'camera.aspect':414 'camera.lookat':528,761 'camera.position':170,520,524,543,547,553,753,757,1627 'camera.updateprojectionmatrix':417 'canva':72 'canvas-bas':71 'capseg':303 'capsulegeometri':288 'cast':1092,1120 'chang':623 'check':1006,1040,1048 'child':1750 'child.castshadow':1753 'child.ismesh':1752 'child.receiveshadow':1755 'choos':264,308 'clamp':555 'clarif':1855 'cleaner':1517 'clear':1828 'click':562,585,603,605,622 'clickableobject':578,612,644 'clickableobjects.foreach':648 'clickedobject':617 'clickedobject.material.color.set':627 'client':1781 'clip':164,168 'clock':1506 'close':1662 'code':856 'collabor':1792 'color':319,346,624,715,1142,1225,1242,1259,1272 'color/properties':1058 'common':314,421,889 'compat':201 'complex':887,1551,1590,1785 'compon':135,1812 'configur':1106 'consid':929 'consol':1042 'const':142,150,177,342,369,381,454,505,509,517,569,573,577,609,616,641,677,681,684,709,717,769,773,777,1094,1132,1138,1144,1167,1171,1209,1279,1283,1332,1445,1486,1492,1495,1553,1655,1682,1686,1690,1702,1736 'contain':138 'content':1769 'continu':988 'control':260,455,473,478,1581,1795 'controls.enabledamping':460 'controls.update':467 'core':95,134 'count':804,1033 'creat':4,32,53,791,937,951,955,1162,1367 'creation':883 'criteria':1864 'critic':1789 'cube':65,271 'cubemap':1166 'custom':471,477,798,1274,1466 'cylind':278 'cylindergeometri':277 'data':91 'debug':1814 'default':670 'defin':147,233 'degre':839 'delta':1493,1500 'deltax':506,522 'deltay':510,526 'demo':1767 'densiti':1273 'depth':1249 'describ':1832 'design':402,1519 'detail':1036,1473,1653 'detect':560,602 'develop':230 'diffus':339 'direct':377,448,851,974 'directionallight':382,392,1095,1118 'directionallight.castshadow':1104 'directionallight.position.set':387,1100 'directionallight.shadow.camera.far':1115 'directionallight.shadow.camera.near':1113 'directionallight.shadow.mapsize.height':1111 'directionallight.shadow.mapsize.width':1109 'dispos':812 'distanc':1668 'document.addeventlistener':736 'document.body.appendchild':186 'document.body.style.cursor':666,669 'dof':1326 'donut':286 'draw':174 'drei':1810 'durat':1547,1562,1572 'e.g':868 'eas':1549,1578 'edg':832 'educ':1768 'effect':11,81,630,1305,1309,1819 'effectcompos':1324,1423 'effici':801 'elaps':1496 'element':28 'els':668 'embed':1772 'enabl':1080 'encod':1222 'ensur':1019,1059 'environ':1158,1163,1844 'environment-specif':1843 'envmap':1172,1193,1199,1217,1218 'error':1044 'es':103 'essenti':99 'etc':626 'event':502,541,591,738 'event.clientx':507,532,593,740 'event.clienty':511,534,598,745 'event.deltay':545 'event.preventdefault':542 'everi':129 'exampl':934 'experi':8,21,40,63,1399,1773 'expert':1849 'explor':66 'exponenti':1263 'fals':485,499 'far':167,1061,1261,1672 'fiber':1806 'field':155,248 'flat':281,318 'float32array':687,1286 'fog':1247,1252,1264 'follow':1392 'forget':901,919 'fov':836 'function':215,426,634,749,880,885,1579,1610 'general':367 'geometri':263,266,787,954,1035,1275,1280,1368,1683,1694 'geometry.dispose':819 'geometry.setattribute':1296 'glsl':1464 'gltf':1742 'gltf.scene':1744 'gltf.scene.traverse':1749 'gltfloader':1419,1733,1739 'grade':1076 'graphic':19,52 'ground':283,1128,1145,1157 'ground.receiveshadow':1154 'ground.rotation':1150 'groundgeometri':1133,1148 'groundmateri':1139,1149 'group':865,873,1329,1333,1345 'group.add':1336,1338 'group.rotation':1340 'gsap':1526,1535,1537,1576,1639,1802 'gsap.timeline':1555 'gsap.to':1543 'gui':1815 'handl':199,404,410,621,916,1385 'handler':994 'hdr':1228 'helper':1811 'hidden':1516 'high':34 'high-qual':33 'highdetailmesh':1660 'highlight':335,654 'hover':564,629,655 'html':111 'ident':1680 'identifi':238 'illumin':368 'implement':1379 'import':101,105,117,122,441,450,480,949,1313,1353,1356,1405,1409,1414,1418,1422,1441,1534,1732,1761 'improv':1224 'includ':1063,1431 'initi':128,858,1362 'input':1858 'insid':1017 'instanc':1676,1701 'instancedmesh':1691 'instancedmesh.setmatrixat':1720 'instead':895,1462,1538 'integr':1521,1527,1809 'interact':7,26,39,61,254,726,939,977,998,1595 'intersect':610,618,642,660 'intersects.length':614,658 'isdrag':484,494,498,504 'isn':1015 'javascript':116,136,196,294,341,364,411,425,449,482,568,676,729,768,818,1079,1161,1223,1250,1278,1331,1406,1440,1485,1528,1596,1650,1726 'keep':874 'lambert':361 'languag':1461 'length':302 'leni':1643 'lerp':1588 'let':483,486,691,730,733,1603,1707 'leva':1813 'level':1651 'librari':1525,1637 'light':251,321,329,354,363,366,378,394,842,848,852,914,971,975,1024,1066,1090,1373 'lightweight':476 'like':379 'limit':802,1820 'linear':1251 'lit':357,910,1027,1376 'load':766,1724,1729 'loader':1168,1737 'loader.load':1173,1740 'locomot':1641 'lod':1654,1656,1675 'lod.addlevel':1659,1664,1669 'logic':876 'look':969 'loop':190,465,633,925,1381,1542 'lowdetailmesh':1670 'lower':1034 'maintain':806 'make':1241 'mani':1679 'manual':213,1540,1587 'map':106,442,781,1159,1164,1220,1314,1357,1762 'match':1829 'materi':307,309,315,343,358,778,789,911,964,1028,1055,1197,1208,1210,1369,1377,1687,1695,1748 'material.dispose':820 'materials/geometries':1039 'math.max':549 'math.min':551 'math.pi':1152,1342,1560 'math.random':700,1714,1716,1718 'matrix':1703,1722 'matrix.setposition':1713 'matt':337 'medium':1667 'mediumdetailmesh':1665 'mention':82 'mesh':581,1370,1677 'mesh.castshadow':1124 'mesh.position':1544 'mesh.receiveshadow':1126 'mesh.rotation':203,206,219,222,430,433,1498,1558,1619 'mesh.scale':1565 'mesh1':1337 'mesh2':1339 'meshbasicmateri':316,397 'meshlambertmateri':336 'meshphongmateri':330 'meshstandardmateri':323,966 'metal':348,1213 'miss':1866 'model':56,255,1731 'model.gltf':1741 'modern':108,1400,1723 'modul':104 'modular':1404 'mous':537,561,574,587,607,639,727,945,979 'mouse.x':592 'mouse.y':597 'mousedown':493 'mousemov':501,590,737 'mouseup':497 'mousex':731,739,755 'mousey':734,744,759 'move':1623 'movement':728,946 'multipl':792,846 'near':163,1260 'need':68,132,241,313,322,328,1068 'negat':1178,1184,1190 'new':144,152,179,295,344,371,383,456,571,575,679,686,705,711,719,771,779,1096,1134,1140,1146,1169,1211,1254,1268,1281,1285,1298,1334,1447,1488,1657,1684,1688,1692,1704,1738 'noth':1004 'npm/vite/webpack':115,1408 'nx.jpg':1175 'ny.jpg':1181 'nz.jpg':1187 'obj':649 'obj.scale.set':650 'object':141,240,424,558,567,620,647,656,794,817,867,882,904,1008,1018,1045,1049,1064,1119,1330,1681 'object.scale.set':662 'older':1239 'one':872 'optim':1647 'option':1200,1807 'orbitcontrol':123,439,446,451,457,481,1415 'organ':857 'output':1221,1838 'outputcolorspac':897 'outputencod':894,1237 'overlap':845 'page':1510,1601 'particl':78,674,803,870,1032 'particlescount':682,688,695 'particlesgeometri':678,721 'particlesgeometry.setattribute':703 'particlesmateri':710,722 'particlesmesh':718,724 'pattern':97,422,1394,1725 'paus':1512,1582 'pbr':1196 'perform':785,1030,1397,1646,1788 'performance-crit':1787 'permiss':1859 'perspect':149 'phong':360 'physic':325 'physically-bas':324 'pitfal':890 'plane':165,169,284,1062,1129 'planegeometri':280 'planet':276 'plugin':1640 'pointer':667 'polish':1072 'poor':1029 'portfolio':1075,1784 'portfolio-grad':1074 'posarray':685,698,707 'posit':246,588,704,841,980,1014,1050,1053,1176,1182,1188,1297,1618 'post':1303,1307,1817 'post-process':1302,1306,1816 'postprocess':1321 'power2.inout':1550 'practic':44,784,1402 'prefer':193,197,1382 'previousmouseposit':487,530 'previousmouseposition.x':508 'previousmouseposition.y':512 'prism':273 'process':231,1304,1308,1818 'product':113,1649,1728,1778,1797 'profession':1577 'project':1782 'prototyp':1765 'px.jpg':1174 'py.jpg':1180 'pz.jpg':1186 'qualiti':35,823,1108 'quick':1764 'r142':293 'r152':900 'r183':110,933,1403,1430,1475,1484,1800 'radialseg':304 'radius':301 'ratio':161 'raycast':556,570 'raycaster.intersectobjects':611,643 'raycaster.setfromcamera':606,638 'react':1804,1808 'realist':327,854,968,1246,1266 'receiv':1122,1130 'recommend':931,1476,1479,1796 'rectangular':272 'reduc':1031 'reflect':340,1160 'relat':866 'reliabl':1396 'remov':816 'renam':898 'render':74,87,173,178,244,829,861,987,1005,1077,1083,1229,1365,1427,1434,1446 'renderer.domelement':187,459 'renderer.domelement.addeventlistener':492,496,500,539 'renderer.init':1452 'renderer.outputcolorspace':1234,1390 'renderer.render':209,225,436,468,671,763,922,1020,1501,1632 'renderer.setanimationloop':192,202,466,1490 'renderer.setsize':183,418,1453 'renderer.shadowmap.enabled':1084 'renderer.shadowmap.type':1086 'renderer.tonemapping':1230 'renderer.tonemappingexposure':1232 'request':17,48 'requestanimationfram':195,214,217,428,636,751,1612 'requir':253,1349,1777,1857 'reset':645 'resiz':409,413,918,993,1387 'resourc':814 'respond':943 'respons':405,990 'result':996 'reus':786,1038 'revers':1583 'review':1850 'ring':287 'rotat':64,257,423,513,985,1614 'rotationspe':518,523,527 'rough':350,1215 'safeti':1860 'scale':625 'scene':6,37,67,127,137,143,176,210,226,235,437,469,516,672,764,855,859,888,906,1011,1363,1502,1626,1633 'scene.add':375,391,723,908,1117,1156,1344,1674,1743 'scene.background':1198 'scene.environment':1192 'scene.fog':1253,1267 'scene.position':529,762 'scene/camera/renderer':952 'scope':1831 'screen':1003 'scroll':1593,1602,1607,1617,1636,1642,1645 'scroll-bas':1592 'scrolli':1604,1608,1621,1629 'scrolltrigg':1638 'scrub':1584 'see':1318,1468 'segment':1037 'select':559 'separ':881 'sequenc':1552 'set':825,1389,1697 'setanimationloop':198,1383,1523 'setup':96,252,948,1351,1747 'shade':1460 'shader':1467,1471 'shadow':1078,1081,1089,1093,1107,1123,1131 'shape':269,799 'shini':331 'show':57 'similar':793 'sinc':292 'size':713 'skill':3,30,1322,1823 'skill-threejs-skills' 'skip':393 'skybox':1203 'smooth':831,961,997,1529,1644 'soft':1088 'source-sickn33' 'space':94 'specif':1207,1845 'specular':334 'sphere':275,941,962,986,1000 'spheregeometri':274,956 'stabl':291 'stack':1798 'standard':359 'start':236,808 'static':256 'step':1776 'stop':1851 'substitut':1841 'success':1863 'summari':1346 'sunlight':380 'surfac':282,332,338 'sync':1597 'system':675 'systemat':31,229,1350 'tab':1514 'task':1827 'team':1791 'techniqu':1070 'test':1847 'textur':767,774,782 'texture-url.jpg':776 'texture.dispose':821 'textureload':770 'textureloader.load':775 'thought':843 'three':119,121,1411,1413,1805 'three.acesfilmictonemapping':1231 'three.ambientlight':372 'three.boxgeometry':1685 'three.bufferattribute':706,1299 'three.buffergeometry':680,1282 'three.capsulegeometry':296 'three.clock':927,1481 'three.cubetextureloader':1170 'three.directionallight':384,1097 'three.fog':1255 'three.fogexp2':1269 'three.group':1335 'three.instancedmesh':1693 'three.js':13,29,42,83,100,109,130,950,1347,1354,1401,1429,1459,1799 'three.lod':1658 'three.matrix4':1705 'three.mesh':1147 'three.meshstandardmaterial':345,780,1141,1212,1689 'three.pcfsoftshadowmap':1087 'three.perspectivecamera':153 'three.planegeometry':1135 'three.points':720 'three.pointsmaterial':712 'three.raycaster':572 'three.scene':145 'three.srgbcolorspace':1235,1391 'three.textureloader':772 'three.timer':930,1477,1489 'three.vector2':576 'three.webglrenderer':180 'three/addons/controls/orbitcontrols.js':125,453,1417 'three/addons/loaders/gltfloader.js':1421 'three/addons/postprocessing/effectcomposer.js':1425 'three/addons/renderers/webgpu/webgpurenderer.js':1444 'three/examples/jsm/loaders/gltfloader':1735 'threej':2,1320,1470 'threejs-postprocess':1319 'threejs-shad':1469 'threejs-skil':1 'timelin':1531,1554,1556,1580 'timeline-bas':1530 'timer':1474,1487 'timer.getdelta':1494 'timer.getelapsed':1497 'timer.update':1491 'tone':1219 'tool':445,1317,1360 'top':864 'topic-agent-skills' 'topic-agentic-skills' 'topic-ai-agent-skills' 'topic-ai-agents' 'topic-ai-coding' 'topic-ai-workflows' 'topic-antigravity' 'topic-antigravity-skills' 'topic-claude-code' 'topic-claude-code-skills' 'topic-codex-cli' 'topic-codex-skills' 'torusgeometri':285 'track':978 'transform':1698 'travers':1745 'treat':1836 'troubleshoot':1001 'true':182,461,495,827,1085,1105,1125,1127,1155,1450,1754,1756 'tsl':1458 'tube':279 'type':267 'typic':840 'unlit':317,400 'updat':462,586,981 'use':12,14,41,47,102,191,356,396,795,833,893,909,926,965,1026,1201,1375,1457,1759,1821 'user':16,259,725,936 'user-control':258 'valid':1846 'verifi':1012,1054 'version':1240,1794 'vertic':1277,1284,1300 'via':1312,1355 'vibrant':1244 'view':148,157,250 'visibl':1047,1057,1511 'visual':10,23,50,80,90,312,822,1071 'vite':1801 'vs':1051 'want':60,88 'webgl':20,69,84,1439 'webgpu':1426,1433,1456 'webgpurender':1442,1448 'webxr':200 'wheel':538,540 'window':408,917,992,1386 'window.addeventlistener':412,589,604,1606 'window.innerheight':159,185,416,420,599,746,1455,1630 'window.innerwidth':158,184,415,419,594,741,1454 'window.scrolly':1605,1609 'without':479,912,928 'work':447 'workflow':935 'x':204,220,431,488,521,531,754,1151,1177,1179,1545,1566 'y':207,223,434,490,525,533,758,1183,1185,1341,1499,1559,1568,1620,1628 'z':171,544,548,554,1189,1191,1570 'zoom':535","prices":[{"id":"c31e9fc5-baa8-4a1d-b79e-e6a062a4f220","listingId":"70cf5ece-8eda-495b-9727-ad71302d2341","amountUsd":"0","unit":"free","nativeCurrency":null,"nativeAmount":null,"chain":null,"payTo":null,"paymentMethod":"skill-free","isPrimary":true,"details":{"org":"sickn33","category":"antigravity-awesome-skills","install_from":"skills.sh"},"createdAt":"2026-04-18T21:46:23.056Z"}],"sources":[{"listingId":"70cf5ece-8eda-495b-9727-ad71302d2341","source":"github","sourceId":"sickn33/antigravity-awesome-skills/threejs-skills","sourceUrl":"https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/threejs-skills","isPrimary":false,"firstSeenAt":"2026-04-18T21:46:23.056Z","lastSeenAt":"2026-04-22T06:52:01.888Z"}],"details":{"listingId":"70cf5ece-8eda-495b-9727-ad71302d2341","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"sickn33","slug":"threejs-skills","github":{"repo":"sickn33/antigravity-awesome-skills","stars":34460,"topics":["agent-skills","agentic-skills","ai-agent-skills","ai-agents","ai-coding","ai-workflows","antigravity","antigravity-skills","claude-code","claude-code-skills","codex-cli","codex-skills","cursor","cursor-skills","developer-tools","gemini-cli","gemini-skills","kiro","mcp","skill-library"],"license":"mit","html_url":"https://github.com/sickn33/antigravity-awesome-skills","pushed_at":"2026-04-22T06:40:00Z","description":"Installable GitHub library of 1,400+ agentic skills for Claude Code, Cursor, Codex CLI, Gemini CLI, Antigravity, and more. Includes installer CLI, bundles, workflows, and official/community skill collections.","skill_md_sha":"15f87c28c2d290e6a47726c124e44a7691a9cd6f","skill_md_path":"skills/threejs-skills/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/threejs-skills"},"layout":"multi","source":"github","category":"antigravity-awesome-skills","frontmatter":{"name":"threejs-skills","description":"Create 3D scenes, interactive experiences, and visual effects using Three.js. Use when user requests 3D graphics, WebGL experiences, 3D visualizations, animations, or interactive 3D elements."},"skills_sh_url":"https://skills.sh/sickn33/antigravity-awesome-skills/threejs-skills"},"updatedAt":"2026-04-22T06:52:01.888Z"}}