threejs-skills_skill

This skill helps you create high-quality 3D scenes and interactive visuals using Three.js with CDN-r128 best practices.

Python

10.4k

GitHub Stars

1

Bundled Files

2 months ago

Catalog Refreshed

4 months ago

First Indexed

Readme & install

Copy the install command, review bundled files from the catalogue, and read any extended description pulled from the listing source.

Installation

Preview and clipboard use veilstrat where the catalogue uses aiagentskills.

npx veilstrat add skill sickn33/antigravity-awesome-skills --skill threejs-skills

SKILL.md16.6 KB

Overview

This skill helps you create high-quality 3D scenes, interactive experiences, and visual effects using Three.js. It codifies a reliable, CDN-friendly workflow (r128) for scene setup, animation, interaction, and performance tuning. Use it to rapidly prototype WebGL visuals or to produce production-ready patterns that scale into modern build toolchains.

How this skill works

The skill provides a systematic pattern: import the correct Three.js CDN, initialize scene/camera/renderer, build geometry and materials, add lights when using lit materials, and run an animation loop with requestAnimationFrame. It includes practical interaction patterns (custom orbit-like controls, raycasting for selection, particle systems), responsiveness handling, and resource disposal for performance. Guidance is included for both CDN-based projects and migrating to modular imports in production.

When to use it

When a user requests 3D graphics, WebGL rendering, or canvas-based visualizations
To build interactive scenes (rotating objects, camera-follow, user-driven exploration)
When adding animations, particle effects, or realistic PBR materials
To implement object selection or hover effects via raycasting
For prototyping with CDN-based Three.js (r128) or preparing to move to npm/Vite/Webpack environments

Best practices

Always import the supported CDN version (r128) for artifact compatibility or switch to modular imports in production
Initialize scene, camera, renderer at the top and keep the animation loop centralized
Reuse geometries and materials; prefer BufferGeometry for custom shapes
Add ambient + directional lights for MeshStandardMaterial and enable shadows carefully
Handle window resize, dispose geometries/materials/textures when removing objects

Example use cases

Interactive product viewer: rotating model, mouse-driven camera, and texture swapping
Data visualization in 3D: map data points to a particle system with hover tooltips
Explorable scene: simple custom controls that rotate/zoom the camera without OrbitControls
Portfolio-quality render: PBR materials, environment map reflections, tone mapping, and soft shadows
Performance demo: particle field with BufferGeometry and controlled particle counts

FAQ

No. OrbitControls and many example modules are not available on the r128 CDN. Implement simple custom controls or switch to modular imports via npm to use the examples library.

Why is my scene black or nothing renders?

Common causes: forgot to add objects to scene, camera inside objects, using lit materials without lights, or not calling renderer.render() inside the animation loop. Check console errors and validate camera and object positions.