Can I use OrbitControls with this skill?

Since standard OrbitControls imports are restricted on some CDNs, this skill provides a robust custom implementation for mouse dragging and scroll-to-zoom functionality.

Is this skill suitable for high-performance graphics?

Yes, it includes best practices for using BufferGeometry, resource disposal, and particle management to maintain 60fps performance even in complex scenes.

Does this skill support the latest Three.js version?

This skill is specifically optimized for version r128 to ensure maximum compatibility with standard CDN imports and stable rendering patterns across environments.

How does the skill handle different screen sizes?

The skill automatically generates window resize event listeners that update the camera's aspect ratio and the renderer's size to ensure the 3D scene remains responsive.

Three.js 3D Graphics & Visualizations

Name: Three.js 3D Graphics & Visualizations
Author: ngxtm

byngxtm

•

Game Development

Builds high-performance 3D scenes, interactive WebGL experiences, and complex animations using Three.js best practices.

This skill provides a systematic framework for developing immersive 3D web content directly within Claude Code. It automates the setup of Three.js (r128) environments, including scene initialization, camera configuration, and lighting setups. By enforcing version-specific best practices—such as using specific geometries and custom interaction handlers—it allows developers to quickly generate interactive 3D models, particle systems, and data visualizations that are performant and responsive across all devices.

Key Features

012 GitHub stars

02Built-in raycasting logic for object selection and hover interactions

03Optimized animation loops using requestAnimationFrame for smooth 60fps rendering

04Standardized Three.js r128 boilerplate for scene, camera, and renderer initialization

05Custom implementation patterns for interactive camera controls (OrbitControls alternative)

06Pre-configured lighting and material templates for realistic 3D surfaces

Use Cases

01Developing interactive 3D product showcases and viewers for e-commerce

02Creating complex data visualizations and particle effects in three-dimensional space

03Building browser-based 3D games and immersive storytelling experiences

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add ngxtm/devkit threejs-skills

For use in Claude.ai and ChatGPT

Download Skill