{
  "schemaVersion": "1.0",
  "item": {
    "slug": "threejs",
    "name": "Three.js",
    "source": "tencent",
    "type": "skill",
    "category": "AI 智能",
    "sourceUrl": "https://clawhub.ai/ivangdavila/threejs",
    "canonicalUrl": "https://clawhub.ai/ivangdavila/threejs",
    "targetPlatform": "OpenClaw"
  },
  "install": {
    "downloadMode": "redirect",
    "downloadUrl": "/downloads/threejs",
    "sourceDownloadUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=threejs",
    "sourcePlatform": "tencent",
    "targetPlatform": "OpenClaw",
    "installMethod": "Manual import",
    "extraction": "Extract archive",
    "prerequisites": [
      "OpenClaw"
    ],
    "packageFormat": "ZIP package",
    "includedAssets": [
      "SKILL.md"
    ],
    "primaryDoc": "SKILL.md",
    "quickSetup": [
      "Download the package from Yavira.",
      "Extract the archive and review SKILL.md first.",
      "Import or place the package into your OpenClaw setup."
    ],
    "agentAssist": {
      "summary": "Hand the extracted package to your coding agent with a concrete install brief instead of figuring it out manually.",
      "steps": [
        "Download the package from Yavira.",
        "Extract it into a folder your agent can access.",
        "Paste one of the prompts below and point your agent at the extracted folder."
      ],
      "prompts": [
        {
          "label": "New install",
          "body": "I downloaded a skill package from Yavira. Read SKILL.md from the extracted folder and install it by following the included instructions. Tell me what you changed and call out any manual steps you could not complete."
        },
        {
          "label": "Upgrade existing",
          "body": "I downloaded an updated skill package from Yavira. Read SKILL.md from the extracted folder, compare it with my current installation, and upgrade it while preserving any custom configuration unless the package docs explicitly say otherwise. Summarize what changed and any follow-up checks I should run."
        }
      ]
    },
    "sourceHealth": {
      "source": "tencent",
      "slug": "threejs",
      "status": "healthy",
      "reason": "direct_download_ok",
      "recommendedAction": "download",
      "checkedAt": "2026-05-04T03:57:38.572Z",
      "expiresAt": "2026-05-11T03:57:38.572Z",
      "httpStatus": 200,
      "finalUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=threejs",
      "contentType": "application/zip",
      "probeMethod": "head",
      "details": {
        "probeUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=threejs",
        "contentDisposition": "attachment; filename=\"threejs-1.0.0.zip\"",
        "redirectLocation": null,
        "bodySnippet": null,
        "slug": "threejs"
      },
      "scope": "item",
      "summary": "Item download looks usable.",
      "detail": "Yavira can redirect you to the upstream package for this item.",
      "primaryActionLabel": "Download for OpenClaw",
      "primaryActionHref": "/downloads/threejs"
    },
    "validation": {
      "installChecklist": [
        "Use the Yavira download entry.",
        "Review SKILL.md after the package is downloaded.",
        "Confirm the extracted package contains the expected setup assets."
      ],
      "postInstallChecks": [
        "Confirm the extracted package includes the expected docs or setup files.",
        "Validate the skill or prompts are available in your target agent workspace.",
        "Capture any manual follow-up steps the agent could not complete."
      ]
    },
    "downloadPageUrl": "https://openagent3.xyz/downloads/threejs",
    "agentPageUrl": "https://openagent3.xyz/skills/threejs/agent",
    "manifestUrl": "https://openagent3.xyz/skills/threejs/agent.json",
    "briefUrl": "https://openagent3.xyz/skills/threejs/agent.md"
  },
  "agentAssist": {
    "summary": "Hand the extracted package to your coding agent with a concrete install brief instead of figuring it out manually.",
    "steps": [
      "Download the package from Yavira.",
      "Extract it into a folder your agent can access.",
      "Paste one of the prompts below and point your agent at the extracted folder."
    ],
    "prompts": [
      {
        "label": "New install",
        "body": "I downloaded a skill package from Yavira. Read SKILL.md from the extracted folder and install it by following the included instructions. Tell me what you changed and call out any manual steps you could not complete."
      },
      {
        "label": "Upgrade existing",
        "body": "I downloaded an updated skill package from Yavira. Read SKILL.md from the extracted folder, compare it with my current installation, and upgrade it while preserving any custom configuration unless the package docs explicitly say otherwise. Summarize what changed and any follow-up checks I should run."
      }
    ]
  },
  "documentation": {
    "source": "clawhub",
    "primaryDoc": "SKILL.md",
    "sections": [
      {
        "title": "Resource Cleanup",
        "body": "Call .dispose() on geometries, materials, and textures before removing objects — Three.js never garbage collects GPU resources automatically\nWhen removing a mesh: mesh.geometry.dispose(); mesh.material.dispose(); scene.remove(mesh) — missing any step causes memory leaks\nTextures loaded via TextureLoader stay in GPU memory forever unless explicitly disposed — track and clean up on scene transitions"
      },
      {
        "title": "Render Loop",
        "body": "Always use renderer.setAnimationLoop(animate) instead of manual requestAnimationFrame — it handles VR, pauses when tab is hidden, and provides proper timing\nFor animations, use clock.getDelta() for frame-independent movement — raw frame counting breaks on different refresh rates"
      },
      {
        "title": "Responsive Canvas",
        "body": "On window resize, update both camera aspect AND renderer size: camera.aspect = width/height; camera.updateProjectionMatrix(); renderer.setSize(width, height)\nMissing updateProjectionMatrix() after aspect change causes stretched/squished rendering\nUse renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2)) — values above 2 kill performance with minimal visual benefit"
      },
      {
        "title": "Imports and Setup",
        "body": "OrbitControls and other addons: import { OrbitControls } from 'three/addons/controls/OrbitControls.js' — the path varies by bundler, check your setup\nAlways set controls.enableDamping = true with OrbitControls and call controls.update() in render loop — without this, damping silently fails"
      },
      {
        "title": "Lighting",
        "body": "MeshBasicMaterial ignores all lights — use MeshStandardMaterial or MeshPhongMaterial for lit scenes\nAdd ambient light (new THREE.AmbientLight(0xffffff, 0.5)) as baseline — scenes with only directional lights have pitch-black shadows\nHDR environment maps via PMREMGenerator give far better reflections than point lights on metallic materials"
      },
      {
        "title": "Loading Assets",
        "body": "GLTFLoader is the standard for 3D models — use Draco compression for large meshes (add DRACOLoader)\nTexture loading is async — models may render black until textures load; use LoadingManager for loading screens\nCORS blocks textures from other domains — host assets on same origin or configure proper CORS headers"
      },
      {
        "title": "Camera Issues",
        "body": "Default near/far planes (0.1 to 1000) cause z-fighting on large scenes — adjust to smallest range that fits your scene\nCamera inside an object renders nothing — check position after loading external models (they may have unexpected transforms)\nPerspectiveCamera FOV is vertical, not horizontal — 75 degrees is a common default"
      },
      {
        "title": "Performance",
        "body": "Merge static geometries with BufferGeometryUtils.mergeBufferGeometries() — each mesh is a draw call, fewer meshes = faster\nUse InstancedMesh for many identical objects — hundreds of draw calls become one\nSet object.frustumCulled = true (default) but verify large objects aren't disappearing at edges — bounding sphere may be wrong\nCall renderer.info to debug draw calls, triangles, and textures in memory"
      },
      {
        "title": "Animation",
        "body": "AnimationMixer requires mixer.update(delta) every frame with actual delta time — passing 0 or skipping frames breaks animations\nSkinned meshes (characters) need SkeletonHelper during development to debug bone issues"
      }
    ],
    "body": "Three.js Production Patterns\nResource Cleanup\nCall .dispose() on geometries, materials, and textures before removing objects — Three.js never garbage collects GPU resources automatically\nWhen removing a mesh: mesh.geometry.dispose(); mesh.material.dispose(); scene.remove(mesh) — missing any step causes memory leaks\nTextures loaded via TextureLoader stay in GPU memory forever unless explicitly disposed — track and clean up on scene transitions\nRender Loop\nAlways use renderer.setAnimationLoop(animate) instead of manual requestAnimationFrame — it handles VR, pauses when tab is hidden, and provides proper timing\nFor animations, use clock.getDelta() for frame-independent movement — raw frame counting breaks on different refresh rates\nResponsive Canvas\nOn window resize, update both camera aspect AND renderer size: camera.aspect = width/height; camera.updateProjectionMatrix(); renderer.setSize(width, height)\nMissing updateProjectionMatrix() after aspect change causes stretched/squished rendering\nUse renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2)) — values above 2 kill performance with minimal visual benefit\nImports and Setup\nOrbitControls and other addons: import { OrbitControls } from 'three/addons/controls/OrbitControls.js' — the path varies by bundler, check your setup\nAlways set controls.enableDamping = true with OrbitControls and call controls.update() in render loop — without this, damping silently fails\nLighting\nMeshBasicMaterial ignores all lights — use MeshStandardMaterial or MeshPhongMaterial for lit scenes\nAdd ambient light (new THREE.AmbientLight(0xffffff, 0.5)) as baseline — scenes with only directional lights have pitch-black shadows\nHDR environment maps via PMREMGenerator give far better reflections than point lights on metallic materials\nLoading Assets\nGLTFLoader is the standard for 3D models — use Draco compression for large meshes (add DRACOLoader)\nTexture loading is async — models may render black until textures load; use LoadingManager for loading screens\nCORS blocks textures from other domains — host assets on same origin or configure proper CORS headers\nCamera Issues\nDefault near/far planes (0.1 to 1000) cause z-fighting on large scenes — adjust to smallest range that fits your scene\nCamera inside an object renders nothing — check position after loading external models (they may have unexpected transforms)\nPerspectiveCamera FOV is vertical, not horizontal — 75 degrees is a common default\nPerformance\nMerge static geometries with BufferGeometryUtils.mergeBufferGeometries() — each mesh is a draw call, fewer meshes = faster\nUse InstancedMesh for many identical objects — hundreds of draw calls become one\nSet object.frustumCulled = true (default) but verify large objects aren't disappearing at edges — bounding sphere may be wrong\nCall renderer.info to debug draw calls, triangles, and textures in memory\nAnimation\nAnimationMixer requires mixer.update(delta) every frame with actual delta time — passing 0 or skipping frames breaks animations\nSkinned meshes (characters) need SkeletonHelper during development to debug bone issues"
  },
  "trust": {
    "sourceLabel": "tencent",
    "provenanceUrl": "https://clawhub.ai/ivangdavila/threejs",
    "publisherUrl": "https://clawhub.ai/ivangdavila/threejs",
    "owner": "ivangdavila",
    "version": "1.0.0",
    "license": null,
    "verificationStatus": "Indexed source record"
  },
  "links": {
    "detailUrl": "https://openagent3.xyz/skills/threejs",
    "downloadUrl": "https://openagent3.xyz/downloads/threejs",
    "agentUrl": "https://openagent3.xyz/skills/threejs/agent",
    "manifestUrl": "https://openagent3.xyz/skills/threejs/agent.json",
    "briefUrl": "https://openagent3.xyz/skills/threejs/agent.md"
  }
}