Reference vanilla Three.js APIs for 3D web graphics.
npx skills add https://github.com/noklip-io/agent-skills --skill three-js
Please help me install this Agent Skill. Skill: three-js Source: https://github.com/noklip-io/agent-skills/tree/main/skills/three-js Command: npx skills add https://github.com/noklip-io/agent-skills --skill three-js
This skill should be used when the user asks to "create a 3D scene", "add a mesh", "implement OrbitControls", "load a GLTF model", "add bloom post-processing", "write a custom shader", "create particle effects", "optimize Three.js performance", "use WebGPU", "add shadows", "animate a model", or mentions Three.js, threejs, WebGL, WebGPU, GLTF, raycaster, shader material, PBR material, or post-processing effects.
IMPORTANT: This skill is for VANILLA Three.js (imperative JavaScript). For React Three
Fiber (@react-three/fiber, R3F, drei), check the r3f-best-practices skill, although three-js skills helps when working with R3F since R3F is a React renderer for Three.js.
Provides complete Three.js reference for 3D web graphics including scene setup, geometry, materials, textures, lighting, cameras, loaders, animation, controls, interaction, shaders, post-processing, performance optimization, TSL/node materials, WebGPU, physics, and VR/XR integration.
High-intent search queries and answers about installing and using this skill.
To create a 3D scene with vanilla Three.js, you set up a scene, camera, and WebGL renderer, then add meshes using geometry and materials. This Skill provides a complete reference covering scene setup, core APIs, and rendering fundamentals for imperative JavaScript.
Yes, you can load GLTF models and add animation using the loaders and animation systems detailed in this reference. It covers loading external assets, implementing animation loops, and manipulating model skeletons in vanilla Three.js projects.
This Skill covers writing custom shaders and implementing post-processing effects like bloom. It provides reference documentation for shader materials, PBR materials, and the post-processing pipeline to enhance your WebGL graphics.
Vanilla Three.js uses imperative JavaScript to directly manipulate 3D objects, whereas React Three Fiber is a React renderer for Three.js. This Skill focuses on vanilla Three.js, although the core concepts still apply when working within React Three Fiber.
You can optimize Three.js performance and add shadows by configuring renderers, managing geometry complexity, and setting up shadow maps. This reference includes documentation on performance optimization techniques, raycasters, and lighting setups.
Yes, this reference includes WebGPU and VR/XR integration for Three.js. It provides documentation on using WebGPU, TSL/node materials, and setting up physics and VR/XR environments for web graphics applications.
Pixel-Process-UGGenerate HTML Canvas, SVG, and WebGL graphics with D3.js visualizations.
Claude-Code-Community-IrelandCreate interactive 3D web experiences using Three.js, React Router Fiber, and WebGL.
yonetim258852Construct declarative 3D scenes in React with React Three Fiber and Drei.
ayofemiadeCreate 3D scenes, animations, and WebXR experiences with Babylon.js.
