skills.rest
yogaprasetya22
yogaprasetya22COMMUNITY
Explore all skills by this author →
WebsiteGitHub

threejs-materials

Configure Three.js material types and properties for rendered meshes.

Updated May 18, 2026
Search Tags:#textures#shaders#threejs#materials#pbr#environment mapping#rendering performance
One-click install
npx skills add https://github.com/yogaprasetya22/mmorpg --skill threejs-materials-yogaprasetya22
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: threejs-materials
Source: https://github.com/yogaprasetya22/mmorpg/tree/main/frontend/.agents/skills/threejs-materials
Command: npx skills add https://github.com/yogaprasetya22/mmorpg --skill threejs-materials-yogaprasetya22

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill solves the problem of picking and configuring the correct Three.js material for a mesh so your rendering matches your lighting needs, visual style, and performance constraints.

Core Features & Use Cases

  • Material selection by rendering goal: Decide between unlit, lighting-enabled, PBR, toon, and debug visualization materials depending on the look you want.
  • PBR property configuration: Set up realistic surface appearance using MeshStandardMaterial and MeshPhysicalMaterial parameters like roughness, metalness, emissive, environment maps, and texture maps.
  • Shader and advanced workflows: Create custom appearances with ShaderMaterial and RawShaderMaterial, including uniform-driven GLSL effects.
  • Use cases: Build game-ready visuals (PBR for realism), stylize assets (toon shading), debug geometry (normals/depth), and optimize runtime material usage (reuse, pooling, transparency avoidance).

Quick Start

Use the threejs-materials Skill to generate a PBR material configuration for a mesh using MeshStandardMaterial with albedo, normal, roughness, and an environment map.

Frequently Asked Questions about threejs-materials

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

FAQPage Schema
How do I configure a Three.js material for PBR realism in real-time 3D scenes?▼

To configure a Three.js material for PBR realism, use MeshStandardMaterial or MeshPhysicalMaterial and set parameters like roughness, metalness, and emissive, while wiring texture maps and environment maps for accurate lighting.

What is the best way to set up UV2 coordinates for aoMap textures in threejs?▼

Setting up UV2 coordinates for aoMap textures in threejs requires generating a second UV channel for the geometry. This ensures the ambient occlusion map aligns correctly with the base texture coordinates on the mesh.

Can I use ShaderMaterial for custom GLSL effects instead of built-in Three.js materials?▼

You can use ShaderMaterial and RawShaderMaterial to create custom GLSL effects instead of built-in Three.js materials. These workflows allow uniform-driven shaders for unique visual styles that standard PBR or unlit materials cannot achieve.

When should I use toon shading versus unlit materials for stylized assets?▼

Use toon shading for stylized assets that need lighting-based color banding, whereas unlit materials suit UI overlays or geometry that requires flat coloring without any real-time lighting calculations affecting the mesh.

How do I optimize rendering performance by minimizing transparent materials?▼

Optimize rendering performance by minimizing transparent materials and reusing existing material instances across multiple meshes. This reduces draw calls and avoids the sorting overhead associated with transparent objects in real-time 3D scenes.

Related Skills

Explore More Design & Creative Skills→
het8802het8802
3

threejs-textures

Teach texture manipulation in Three.js for 3D rendering.

Community
Intermediate
calesthiocalesthio
46.2k

threejs-lighting

Configure Three.js lighting setups for shadows, ambient illumination, and IBL reflections.

Community
Intermediate
ElementTechElementTech
2

threejs-materials

Configure Three.js materials for shading, textures, and runtime performance.

Community
Intermediate
video-production-buddyvideo-production-buddy
602

threejs-shaders

Implement custom GLSL shader effects for Three.js projects.

Official
Intermediate