skills.rest
Prompt-or-Die-Labs
Prompt-or-Die-LabsOFFICIAL
Explore all skills by this author →
GitHub

threejs-scene-builder

Generates Three.js and React Three Fiber scenes with GLTF loading, animation, and lighting.

7|2|Updated Nov 9, 2025
Search Tags:#react-three-fiber#threejs#post-processing#3d scene#gltf loading#animation retargeting#npc behaviors
One-click install
npx skills add https://github.com/Prompt-or-Die-Labs/hyper-forge --skill threejs-scene-builder-prompt-or-die-labs
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: threejs-scene-builder
Source: https://github.com/Prompt-or-Die-Labs/hyper-forge/tree/main/.claude/skills/threejs-scene-builder
Command: npx skills add https://github.com/Prompt-or-Die-Labs/hyper-forge --skill threejs-scene-builder-prompt-or-die-labs

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

It removes the friction of setting up and scaling Three.js or React Three Fiber 3D experiences by providing a ready blueprint for scenes, materials, loading, animation, and interactivity.

Core Features & Use Cases

  • Scene bootstrapping: Create cameras, renderers, controls, and lighting with shadow-ready defaults for immediate visualization (e.g., a first-person or third-person scene prototype).
  • Production-style 3D building blocks: Generate PBR/physical/glow/toon materials and common geometry helpers like ground planes, skyboxes, and particles.
  • Animation + model workflows: Play GLTF animations via an AnimationMixer, load GLTF/DRACO-compressed assets, and support animation retargeting for character pipelines (e.g., retarget Mixamo animations onto custom rigs).
  • React Three Fiber integration: Provide declarative Canvas composition, Drei-based helpers, and a hook pattern for animated models.
  • Post-processing & performance: Add bloom/SSAO-style effects and apply optimizations like instancing, LOD, frustum culling, and resource disposal patterns.

Quick Start

Use the threejs-scene-builder skill to scaffold a complete Three.js or R3F scene with lighting, model loading (GLTF), basic interaction, and animation playback.

Frequently Asked Questions about threejs-scene-builder

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

FAQPage Schema
How do I bootstrap a Three.js scene with correct lighting and camera setup?▼

You can load DRACO-compressed GLTF assets and play animations via an AnimationMixer. The skill supports loading GLTF models, controlling animation playback, and retargeting Mixamo animations onto custom character rigs.

How does React Three Fiber integrate with Drei helpers for 3D scenes?▼

React Three Fiber integration provides declarative Canvas composition and Drei-based helpers for scene building. This includes a hook pattern for animated models, allowing declarative React scene composition with proper asset loading and animation wiring.

Can I add post-processing effects like bloom and SSAO to a WebGL scene?▼

Yes, you can add post-processing effects like bloom and SSAO to a WebGL scene. The approach includes adding these effects alongside performance optimizations such as instancing, LOD, frustum culling, and resource disposal patterns.

What is the best way to retarget Mixamo animations onto custom character rigs in Three.js?▼

The best way to retarget Mixamo animations onto custom character rigs in Three.js is using an animation retargeting workflow. This supports character pipelines by applying external animations to your loaded GLTF models via an AnimationMixer.

Does this approach support creating PBR, toon, and glow materials for 3D geometry?▼

Yes, this approach supports creating PBR, physical, glow, and toon materials for 3D geometry. It provides production-style building blocks to generate these materials alongside common geometry helpers like ground planes, skyboxes, and particles.

Related Skills

Explore More Software Engineering Skills→
samhvw8samhvw8
10

3d-graphics

Render high-performance 3D scenes in web browsers using Three.js and WebGL/WebGPU.

Community
Advanced
Narizaico-codeNarizaico-code

aframe-webxr

Build 3D, VR, and AR web experiences using HTML and A-Frame.

Community
Intermediate
doanchienthangdevdoanchienthangdev
4

building-3d-graphics

Build 3D web scenes with Three.js and React Three Fiber.

Community
Advanced
yonetim258852yonetim258852

react-three-fiber

Construct declarative 3D scenes in React with React Three Fiber and Drei.

Community
Intermediate