Is the code generated by this skill mobile-friendly?

Yes, it includes built-in window resize handlers and performance best practices like geometry disposal and limited particle counts to ensure smooth performance on mobile devices.

Does this skill require a local Three.js installation?

No, it utilizes a standardized CDN import (r128) which allows you to run 3D scenes in the browser immediately without managing local node modules.

How does the skill handle lighting and shadows?

It provides templates for Ambient and Directional lighting, along with PCFSoftShadowMap configurations for realistic shadows and physically-based materials.

Which version of Three.js does this skill target?

This skill targets Three.js r128 to ensure maximum compatibility with available CDN resources and stable feature sets.

Can I use OrbitControls with this Three.js skill?

Because standard Three.js example imports like OrbitControls are often restricted on CDNs, this skill provides a custom implementation for rotation and zoom to ensure interactivity works out of the box.

Three.js 3D Graphics

Name: Three.js 3D Graphics
Author: boisenoise

byboisenoise

0•

Game Development

Generates high-quality 3D scenes, interactive WebGL experiences, and visual effects using Three.js best practices.

This skill empowers Claude to architect and implement complex 3D environments directly within web projects using Three.js. By utilizing a standardized r128 configuration, it ensures immediate compatibility with CDN-based deployments while providing robust patterns for scene initialization, custom camera controls, and performance-optimized rendering. It streamlines the development of everything from simple rotating geometries to complex interactive scenes involving raycasting, particle systems, and physically-based lighting, making it an essential tool for creative developers and data visualization experts.

Key Features

01Advanced raycasting patterns for object selection and mouse-driven interaction

02Custom implementation of interactive camera controls for mouse and wheel navigation

030 GitHub stars

04Standardized Three.js r128 CDN integration for zero-dependency web deployment

05Physically-based rendering (PBR) setup including advanced lighting and shadow systems

06Performance-optimized particle systems and buffer geometry resource management

Use Cases

01Building immersive data visualizations and 3D charts for analytical dashboards

02Creating interactive 3D product configurators and showcases for e-commerce

03Developing browser-based games and creative coding experiments with WebGL

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add boisenoise/skills-collections antigravity-threejs-skills

For use in Claude.ai and ChatGPT

Download Skill