skills.rest
JochenYang
JochenYangCOMMUNITY
Explore all skills by this author →
GitHub

threejs-builder

Automate Three.js web app creation with ES modules and import maps.

21|3|Updated Jan 22, 2026
Search Tags:#calibration#animations#webgl#three.js#GLTF#scene-graph#ES-modules
One-click install
npx skills add https://github.com/JochenYang/Jochen-ai-rules --skill threejs-builder
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: threejs-builder
Source: https://github.com/JochenYang/Jochen-ai-rules/tree/main/.claude/skills/threejs-builder
Command: npx skills add https://github.com/JochenYang/Jochen-ai-rules --skill threejs-builder

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

The Three.js Builder simplifies the process of creating simple, performant 3D web applications by providing a structured approach, practical patterns, and ready-made references to get projects off the ground quickly.

Core Features & Use Cases

  • Scene graph-centric workflow: Build and manage complex 3D scenes with clear hierarchies and predictable transforms.
  • ES module ready: Leverages modern Three.js APIs with import maps for clean, CDN-based development.
  • Reference materials: Includes guided references for GLTF loading, calibration, lighting, and animation patterns ideal for portfolios and prototypes.
  • Calibration helpers: Tools and scripts to validate model forward direction, grounding, and scale to reduce frame-anchoring issues.
  • Use Case: Rapidly prototype a product viewer or interactive 3D demo using provided templates and references.

Quick Start

Load the minimal HTML template, import Three.js via ES modules, and initialize a basic scene to start exploring the builder's patterns.

Frequently Asked Questions about threejs-builder

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

FAQPage Schema
How do I set up a Three.js scene using ES modules and import maps?▼

Three.js scene setup with ES modules uses a minimal HTML template and import maps for clean, CDN-based development. This builder provides structured patterns for managing scene graphs, lighting, and camera controls.

How do I load and calibrate GLTF models in a WebGL application?▼

Loading and calibrating GLTF models in WebGL uses included reference materials and calibration helper scripts. These tools validate model forward direction, grounding, and scale to reduce frame-anchoring issues.

What is the best way to rapidly prototype a 3D product viewer for a portfolio?▼

Rapidly prototyping a 3D product viewer is best achieved using a scene graph-centric workflow with ready-made references. This builder leverages modern Three.js APIs and animation patterns ideal for interactive demos and portfolios.

Can I build performant 3D web apps without complex build tools?▼

Building performant 3D web apps without complex build tools is possible by leveraging ES module workflows with import maps. This enables direct CDN-based development for simple prototypes and interactive demos.

Why do my imported 3D models have incorrect grounding and scale in Three.js?▼

Incorrect grounding and scale in Three.js often result from uncalibrated model transforms. Using calibration helpers validates model forward direction, grounding, and scale, reducing common frame-anchoring issues.

Related Skills

Explore More Software Engineering Skills→
live-codeslive-codes
1.5k

livecodes/module-resolution

Resolve bare module imports to CDN URLs via import maps.

Official
Intermediate
TumeloRamaphosaTumeloRamaphosa

spline-interactive

Generate React integrations for Spline scenes with state-driven event handlers.

Community
Intermediate
HsnSaboorHsnSaboor

3d-graphics

Develop interactive 3D web graphics with Three.js, WebGL, and WebGPU.

Community
Advanced
daffy0208daffy0208
34

3d-visualizer

Create interactive Three.js and React Three Fiber 3D visualizations with lighting and camera controls.

Community
Intermediate