skills.rest
nirholas
nirholasCOMMUNITY
Explore all skills by this author →
Website𝕏@nichxbtGitHub

3d-features

Modify Three.js viewer state, GUI controls, loaders, and environments.

5|Updated May 2, 2026
Search Tags:#rendering#animation#three.js#loaders#viewer#dat.gui#environment maps
One-click install
npx skills add https://github.com/nirholas/three-ui --skill 3d-features
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: 3d-features
Source: https://github.com/nirholas/three-ui/tree/main/.github/skills/3d-features
Command: npx skills add https://github.com/nirholas/three-ui --skill 3d-features

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps you add or modify Three.js 3D viewer capabilities so your models render correctly and your UI exposes the right controls without fighting the existing Viewer architecture.

Core Features & Use Cases

  • Viewer extension via state + GUI: Add new GUI-controllable toggles by extending this.state, wiring controls inside the appropriate addGUI() folder, and implementing the corresponding Viewer handler.
  • Rendering capability enhancements: Extend lighting, display modes (wireframe/skeleton/grid/axes/background), animation playback, and camera behavior by updating the Viewer’s dedicated sections.
  • Asset loading & environment updates: Introduce or adjust loaders (GLTF/GLB, Draco, KTX2, Meshopt, EXR) and environment maps by editing loader setup and src/environments.js.

Quick Start

Use the 3d-features skill to add a new toggle that enables or disables a specific display mode (for example, showing the model’s bounding box) in the Three.js viewer.

Frequently Asked Questions about 3d-features

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

FAQPage Schema
How do I add new GUI controls to a Three.js viewer?▼

To add dat.gui controls to a Three.js viewer, extend this.state, wire the toggles inside the addGUI() folder, and implement the corresponding handler methods in src/viewer.js.

How do I configure Three.js add-on loaders for GLTF and Draco files?▼

Configure Three.js add-on loaders for GLTF and Draco files by updating the loader setup within the viewer architecture, ensuring assets are parsed and rendered correctly without breaking existing state handling.

How do I update environment map options in a Three.js application?▼

Update environment map options in a Three.js application by editing src/environments.js to ensure the viewer auto-discovers new environments, and adjust the environment behaviors in src/viewer.js.

Can I extend Three.js rendering capabilities with wireframe and skeleton display modes?▼

You can extend Three.js rendering capabilities with wireframe, skeleton, grid, and axes display modes by updating the viewer's dedicated rendering sections and exposing the toggles through dat.gui controls.

Does this Three.js viewer extension support KTX2 and EXR texture loading?▼

This Three.js viewer extension supports KTX2 and EXR texture loading by introducing or adjusting the dedicated add-on loaders within the viewer architecture to ensure proper asset rendering.

Related Skills

Explore More Software Engineering Skills→
flpbaladaflpbalada
280

project-structure

Organize React/Next.js/TypeScript projects by feature-based architecture.

Community
Basic
MonichreMonichre

threejs-textures

Load, configure, and apply textures to Three.js materials.

Community
Advanced
afoveaafovea

threejs-loaders

Standardize loading of compressed GLTF assets with DRACO and KTX2 in Three.js.

Community
Advanced
Arupbiswas09Arupbiswas09

threejs

Set up Three.js scenes, cameras, and renderers for 3D web experiences.

Community
Intermediate