Can I use this to load 3D models like GLTF?

Yes, the skill provides specific implementation patterns for GLTFLoader, DRACOLoader, and KTX2Loader for efficient 3D asset delivery and management.

Does it support modern WebGPU features?

Absolutely. It covers r150+ features including the WebGPU renderer, compute shaders, and the Three Shading Language (TSL) for next-generation web graphics.

Does this skill support React Three Fiber (R3F)?

While primarily focused on vanilla Three.js, this skill provides the foundational engine knowledge necessary for R3F, though the r3f-best-practices skill is recommended for React-specific syntax.

Can this skill help with performance optimization?

Yes, it includes detailed patterns for geometry instancing, texture compression, level of detail (LOD), and proper memory disposal to ensure high frame rates.

Three.js 3D Graphics

Name: Three.js 3D Graphics
Author: Microck

byMicrock

•

游戏开发

Builds immersive 3D web experiences using the vanilla Three.js engine for rendering, animation, and interactive graphics.

This skill provides a comprehensive reference and implementation guide for Three.js, the industry-standard library for WebGL and WebGPU graphics. It enables Claude to assist with everything from basic scene orchestration and geometry creation to advanced topics like custom GLSL shaders, post-processing effects, and performance optimization. While focused on imperative vanilla JavaScript, it also serves as a foundational knowledge base for React Three Fiber developers needing to understand the underlying engine's mechanics, asset management, and mathematical principles.

主要功能

012 GitHub stars

02Performance optimization techniques including LOD, instancing, and memory cleanup

03Interactive features like Raycasting, OrbitControls, and skeletal animation

04Advanced asset management for GLTF, FBX, and HDR textures with Draco compression

05Custom shader development using GLSL and the new Three Shading Language (TSL)

06Complete scene setup including cameras, lighting, and WebGL/WebGPU renderers

使用场景

01Developing interactive 3D product configurators or data visualizations for the web

02Implementing advanced visual effects like bloom, depth of field, and custom particle systems

03Creating browser-based games or VR/AR experiences using WebXR integration

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add microck/opendots-microck three-js

For use in Claude.ai and ChatGPT

Download Skill