[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6EGCR0EPNWP1FVB7JKX2JBJ":3,"skill-same:01M6EGCR0EPNWP1FVB7JKX2JBJ":55},{"skillNo":4,"name":5,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":15,"categories":16,"keywords":17,"publishedAt":18,"linkOnly":19,"markdownContent":20,"markdownBody":20,"frontMatter":21,"refName":22,"commitSha":23,"skillDirectory":24,"forksCount":25,"repositoryHtmlUrl":26,"repositoryHomepageUrl":27,"ownerHtmlUrl":28,"ownerBlogUrl":6,"ownerDescription":29,"updatedAt":30,"install":31,"resources":44},"01M6EGCR0EPNWP1FVB7JKX2JBJ","threejs",null,"ComeOnOliver\u002Fskillshub","ComeOnOliver","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F43215937?v=4","01M6E5JNFECJAAVFE0W7SMWWD2","Haoran Shu","01M6E5JNNDQS7AJZDYFQ8TPZCK",67,"MIT","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002FTerminalSkills\u002Fskills\u002Fthreejs\u002FSKILL.md",[],[5],"2026-11-10 10:12:30",false,"# Three.js\n\n## Overview\n\nThree.js is a JavaScript library for creating interactive 3D graphics in the browser using WebGL. It provides a scene graph, PBR materials, lighting systems, model loaders (glTF, FBX), and performance tools like instanced rendering. React Three Fiber offers a declarative React integration with automatic resource management and Suspense-based loading.\n\n## Instructions\n\n- When setting up a scene, create a `Scene`, `PerspectiveCamera` (or `OrthographicCamera`), and `WebGLRenderer`, adding `OrbitControls` for mouse\u002Ftouch interaction and configuring anti-aliasing and tone mapping for production quality.\n- When creating objects, combine geometries (box, sphere, plane, or custom `BufferGeometry`) with materials (`MeshStandardMaterial` for PBR, `MeshPhysicalMaterial` for advanced effects) and apply texture maps for diffuse, normal, roughness, and metalness.\n- When loading 3D models, use `GLTFLoader` for glTF\u002FGLB files (the preferred web format), enable Draco compression for models over 1MB, and use KTX2 textures for GPU-compressed formats.\n- When building lighting, combine ambient, directional, point, and spot lights with environment maps (HDR) for image-based lighting, and enable shadow maps on lights and meshes that need them.\n- When optimizing performance, use `InstancedMesh` for rendering 100+ identical objects, merge static geometries, implement LOD for distance-based detail levels, and dispose resources manually when removing objects.\n- When using React, prefer React Three Fiber with `@react-three\u002Fdrei` helpers (OrbitControls, Environment, useGLTF) and `@react-three\u002Fpostprocessing` for effects like bloom and SSAO.\n\n## Examples\n\n### Example 1: Build a 3D product configurator\n\n**User request:** \"Create a 3D product viewer where users can change colors and rotate the model\"\n\n**Actions:**\n1. Load the product model with `useGLTF()` in React Three Fiber with Draco compression\n2. Set up `OrbitControls` for rotation and zoom, with camera animation on option change\n3. Create material swapping logic that updates `MeshStandardMaterial` color and roughness\n4. Add environment lighting with an HDR map and contact shadows for realism\n\n**Output:** An interactive 3D product configurator with color options, smooth rotation, and realistic lighting.\n\n### Example 2: Create an animated data globe\n\n**User request:** \"Visualize global data points on an interactive 3D globe\"\n\n**Actions:**\n1. Create a sphere geometry with an earth texture and atmosphere shader\n2. Plot data points using `InstancedMesh` with thousands of small spheres at geographic coordinates\n3. Add arc connections between points using `TubeGeometry` with animated dash offsets\n4. Implement auto-rotation with mouse-override orbit controls\n\n**Output:** A 3D globe with data point markers, animated connection arcs, and interactive rotation.\n\n## Guidelines\n\n- Use glTF\u002FGLB format for all 3D models since it is the most efficient and widely supported web format.\n- Enable Draco compression for models over 1MB to reduce file size significantly.\n- Use `InstancedMesh` when rendering more than 100 identical objects for massive performance gains.\n- Set `antialias: true` and `toneMapping: ACESFilmicToneMapping` for production visual quality.\n- Use React Three Fiber for React apps for declarative scene management and automatic disposal.\n- Dispose resources manually when removing objects: `geometry.dispose()`, `material.dispose()`, `texture.dispose()`.\n- Test on mobile devices and reduce shadow resolution, pixel ratio, and material complexity for low-end GPUs.\n",{},"main","def8531e65114c0fca8fb8551c1871ee0eed705c","skills\u002FTerminalSkills\u002Fskills\u002Fthreejs",24,"https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub","https:\u002F\u002Fskillshub.wtf","https:\u002F\u002Fgithub.com\u002FComeOnOliver","AI & Blockchain Engineer\r\n","2026-06-24 22:07:19",{"source":7,"skillName":5,"commands":32,"prompt":42,"zipAvailable":43},[33,36,39],{"tool":34,"command":35},"npx","npx skills add ComeOnOliver\u002Fskillshub --skill threejs",{"tool":37,"command":38},"bunx","bunx skills add ComeOnOliver\u002Fskillshub --skill threejs",{"tool":40,"command":41},"pnpm","pnpm dlx skills add ComeOnOliver\u002Fskillshub --skill threejs","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002FTerminalSkills\u002Fskills\u002Fthreejs\u002FSKILL.md",true,[45,51],{"path":46,"resourceType":47,"resourceTypeDesc":48,"sizeBytes":49,"sourceHtmlUrl":50},"references\u002Flocal-security.md","REFERENCE","参考文档",5384,"https:\u002F\u002Fgithub.com\u002Fzaka33333-hash\u002Fclaude-skills\u002Fblob\u002Fmain\u002Floose-skills\u002Fbuild-mcpb\u002Freferences\u002Flocal-security.md",{"path":52,"resourceType":47,"resourceTypeDesc":48,"sizeBytes":53,"sourceHtmlUrl":54},"references\u002Fmanifest-schema.md",5359,"https:\u002F\u002Fgithub.com\u002Fzaka33333-hash\u002Fclaude-skills\u002Fblob\u002Fmain\u002Floose-skills\u002Fbuild-mcpb\u002Freferences\u002Fmanifest-schema.md",[56,70,80,89,95,102],{"skillNo":57,"name":58,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":59,"categories":60,"keywords":66,"publishedAt":18},"01M6FKJN13GMG4KY57J3QD8GY5","model-hierarchy-skill","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzscole\u002Fmodel-hierarchy-skill\u002Fmodel-hierarchy-skill\u002FSKILL.md",[61],{"categoryNo":62,"categoryName":63,"taxonomyType":64,"taxonomyTypeDesc":65},"01JBSEEDCAT000000000000023","Skill与智能体开发","SCENARIO","使用场景",[67,68,69],"model","model hierarchy","model hierarchy skill",{"skillNo":71,"name":72,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":73,"categories":74,"keywords":76,"publishedAt":18},"01M6FKJJJ6GCAMR4PPPRD12M5X","zoom-mcp","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fzoom-mcp\u002FSKILL.md",[75],{"categoryNo":62,"categoryName":63,"taxonomyType":64,"taxonomyTypeDesc":65},[77,78,79],"MCP","zoom","zoom mcp",{"skillNo":81,"name":82,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":83,"categories":84,"keywords":85,"publishedAt":18},"01M6FKJE3KYT3KPEZMEEHYKA6K","zoom-apps-sdk","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fzoom-apps-sdk\u002FSKILL.md",[],[86,87,88,78],"sdk","zoom apps sdk","apps",{"skillNo":90,"name":91,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":92,"categories":93,"keywords":94,"publishedAt":18},"01M6FKJ9EDH9Q5VWDF8HAJRSP0","windows","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fwindows\u002FSKILL.md",[],[91],{"skillNo":96,"name":97,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":98,"categories":99,"keywords":101,"publishedAt":18},"01M6FKJ666BEEFC3AE9GJ72Q93","whiteboard","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fwhiteboard\u002FSKILL.md",[100],{"categoryNo":62,"categoryName":63,"taxonomyType":64,"taxonomyTypeDesc":65},[97],{"skillNo":103,"name":104,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":105,"categories":106,"keywords":107,"publishedAt":18},"01M6FKJ21WFCDGTJQ2Q91T9DVW","websockets","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fwebsockets\u002FSKILL.md",[],[104]]