skills.rest
DotNetVibeCoderz
DotNetVibeCoderzOFFICIAL
Explore all skills by this author →
Website𝕏@gravicodestudioGitHub

threejs-builder

Creates Three.js web apps with scenes, lighting, geometries, materials, animations, and GLTF model loading.

Updated Jun 12, 2026
Search Tags:#game development#javascript#animation#webgl#three.js#3d graphics#gltf
One-click install
npx skills add https://github.com/DotNetVibeCoderz/Vibe_Startup --skill threejs-builder-dotnetvibecoderz
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: threejs-builder
Source: https://github.com/DotNetVibeCoderz/Vibe_Startup/tree/main/CyberLens/.claude/skills/three-js-builder
Command: npx skills add https://github.com/DotNetVibeCoderz/Vibe_Startup --skill threejs-builder-dotnetvibecoderz

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires three, and includes scripts (resource) and references (resource) components.

What problem does it solve? Building interactive 3D web content requires navigating Three.js's scene graph, coordinate system conventions, GLTF loading pitfalls, and animation management, where small mistakes cause floating models, inverted controls, or broken animations. ## Core Features & Use Cases - Scene Construction: Set up scenes, cameras, renderers, lighting, geometries, and materials using modern ES module patterns for Three.js r150+. - GLTF Model Workflows: Load, cache, clone with SkeletonUtils, normalize, and anchor animated 3D models while avoiding common pitfalls like floating characters and broken skeleton references. - Game Development Patterns: Implement animation state machines, camera-relative movement, parallax layers, object pooling, screen effects, and slow-motion for browser games. - Use Case: A user asks for a 3D product showcase with orbit controls and a rotating model; the Skill produces a complete HTML page with import maps, proper lighting, responsive resizing, and calibrated model orientation. ## Quick Start Ask the AI to create a Three.js scene with a rotating animated object, orbit camera controls, and responsive full-window rendering.

Frequently Asked Questions about threejs-builder

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create a Three.js scene with animation?▼

Create a Scene, PerspectiveCamera, and WebGLRenderer, add meshes built from geometries and materials, then use renderer.setAnimationLoop to update rotations or positions each frame. Import Three.js as an ES module from a CDN or npm.

How do I load GLTF models in Three.js?▼

Use GLTFLoader from three/addons/loaders/GLTFLoader.js with an import map resolving 'three' and 'three/addons/' paths. Serve files over HTTP rather than file://, and enable shadows by traversing the loaded scene's meshes.

Why does my cloned GLTF model stay at the origin?▼

Regular Object3D.clone() does not duplicate skeleton bone hierarchies, so cloned skinned meshes still reference the original bones. Use SkeletonUtils.clone() for any model with animations, and create a separate AnimationMixer per clone.

Why does my animated GLTF model float above the ground?▼

Box3.setFromObject() includes invisible armature bones positioned at hip level, making the bounding box extend below the visible mesh. Compute bounds only from mesh geometry and set position.y to the negative of that box's min.y.

How do I make WASD movement relative to the camera in Three.js?▼

Get the camera's world direction with camera.getWorldDirection, zero its Y component, and compute the right vector via cross product with world up. Apply input along these vectors instead of raw world axes to avoid inverted controls.

Does Three.js support TypeScript and npm installation?▼

Yes, install with npm install three and import addons from 'three/addons/' paths. Three.js ships TypeScript definitions, so types like THREE.Scene and THREE.MeshStandardMaterial work directly in typed projects.

Related Skills

Explore More Software Engineering Skills→
DotanVGDotanVG
2

web-3d-asset-pipeline

Prepare and optimize 3D assets for GLB/glTF web shipping.

Community
Advanced
belokonmbelokonm
8

threejs-pro

Render interactive 3D graphics with Three.js, React Three Fiber, and WebGL shaders.

Community
Advanced
googlegoogle
455

xb-uiblocks

Add flexbox-based 3D spatial UI components to XR applications.

Official
Advanced
Adham7843Adham7843

playcanvas-engine

Integrate the PlayCanvas engine for 3D web games and interactive applications.

Community
Advanced