skills.rest
scomofo
scomofoCOMMUNITY
Explore all skills by this author →
GitHub

threejs

Generates modern Three.js and TSL shader code using the official API reference.

Updated Sep 17, 2026
Search Tags:#shaders#webgl#three.js#3d graphics#react-three-fiber#webgpu#tsl
One-click install
npx skills add https://github.com/scomofo/midi-stage2 --skill threejs-scomofo
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: threejs
Source: https://github.com/scomofo/midi-stage2/tree/main/.grok/skills/threejs
Command: npx skills add https://github.com/scomofo/midi-stage2 --skill threejs-scomofo

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires three, and includes references (resource) components.

What problem does it solve? LLMs often generate outdated Three.js code using legacy CDN script tags and r128-era APIs. This Skill vendors the official Three.js LLM documentation pack so generated code uses current imports, WebGLRenderer/WebGPURenderer patterns, and TSL node materials correctly. ## Core Features & Use Cases - Official API Reference: Provides the pinned llms-full.txt dump covering modern imports, renderers, loaders, post-processing, and compute. - TSL Shader Guidance: Complete Three.js Shading Language reference for NodeMaterial, custom shaders, and WebGPU compute. - Stack Adaptation: Maps official CDN/importmap patterns to npm-based TanStack Start + React + Vite workflows, including @react-three/fiber integration. - Use Case: When building a 3D product configurator with custom animated materials, load this Skill to generate correct MeshStandardNodeMaterial TSL code instead of deprecated onBeforeCompile hacks. ## Quick Start Ask the AI to write a Three.js scene with a custom TSL shader material and load the threejs skill for the full API reference.

Frequently Asked Questions about threejs

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

FAQPage Schema
How do I write custom Three.js shaders with TSL?▼

Import functions like texture, uv, and color from three/tsl, then assign node graphs to material properties such as colorNode on a MeshStandardNodeMaterial. TSL compiles to both WGSL and GLSL, replacing onBeforeCompile string manipulation.

WebGLRenderer vs WebGPURenderer in Three.js, which should I use?▼

Use WebGLRenderer for maximum browser compatibility and mature ecosystem support. Choose WebGPURenderer when you need TSL custom materials, compute shaders, or node-based materials, and call await renderer.init() before rendering.

Does Three.js work with React and Vite projects?▼

Yes, install three via npm and import from three or three/addons instead of CDN importmaps. For React integration, prefer @react-three/fiber and drei, and pin the version in package.json so dev and deploy builds match.

How do I load GLTF models in modern Three.js?▼

Import GLTFLoader from three/addons/loaders/GLTFLoader.js and call loader.load with the model URL and callbacks for success, progress, and error. Add the loaded gltf.scene to your scene graph.

Why should I avoid cdnjs three.js r128 script tags?▼

The r128 CDN pattern is outdated and lacks modern features like TSL, WebGPU support, and current addon paths. Modern Three.js uses ES module imports from npm or importmaps pinned to current versions like 0.185.0.

Related Skills

Explore More Software Engineering Skills→
tadams95tadams95
1

r3f-fundamentals

Explain React Three Fiber fundamentals for building interactive 3D scenes in React.

Community
Intermediate
neighbor-game-aineighbor-game-ai

threejs-input

Provides a library-free mobile joystick and touch input system for Three.js projects.

Official
Intermediate
githubgithub
38.5k

game-engine

Build web-based games and game engines using HTML5 Canvas, WebGL, and JavaScript.

Official
Advanced
knowz-ioknowz-io

kc-learn

Capture and categorize development learnings into structured knowledge vaults.

Official
Intermediate