CommunityProgramação e Desenvolvimentogithub.com

cloudai-x/threejs-materials

Materiais Three.js - PBR, básico, phong, materiais de shader, propriedades de materiais. Use ao estilizar malhas, trabalhar com texturas, criar shaders personalizados ou otimizar o desempenho dos materiais.

O que é threejs-materials?

Este skill fornece conhecimentos especializados sobre materiais no Three.js, incluindo os tipos PBR (Standard e Physical), básico, Phong e materiais de shader. Ele explica como configurar propriedades como cor, opacidade, mapas de textura, normais, especulares e de emissão, além de parâmetros para controle de brilho, rugosidade e metal. O skill cobre técnicas para estilizar malhas, aplicar texturas, criar shaders GLSL personalizados e otimizar o desempenho dos materiais, como o uso de instâncias e redução de chamadas de desenho. É útil para desenvolvedores que trabalham com cenas 3D interativas, jogos ou visualizações, suportando os principais ambientes de desenvolvimento que utilizam a biblioteca Three.js.

Funciona com~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/cloudai-x/threejs-skills/tree/main/skills/threejs-materials

Installed? Explore more Programação e Desenvolvimento skills: steipete/bluebubbles, steipete/eightctl, steipete/blucli · View all 6 →

Ver original→Navegar por todas as habilidades

Perguntar na sua IA favorita

Abre um novo chat com esta habilidade de agente já pré-carregada.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

Documentação

O que threejs-materials faz?

Materiais Three.js - PBR, básico, phong, materiais de shader, propriedades de materiais. Use ao estilizar malhas, trabalhar com texturas, criar shaders personalizados ou otimizar o desempenho dos materiais.

Visão Geral

O Three.js oferece uma variedade de materiais para controlar a aparência dos objetos 3D. Este skill cobre os principais tipos de materiais, suas propriedades e como usá-los efetivamente.

Tipos de Materiais

  • MeshBasicMaterial: Material básico sem iluminação
  • MeshPhongMaterial: Material com iluminação especular
  • MeshStandardMaterial: Material PBR (Physically Based Rendering)
  • MeshPhysicalMaterial: Material PBR avançado com transparência e reflexão
  • ShaderMaterial: Material personalizado com shaders GLSL

Propriedades Comuns

  • color: Cor do material (hexadecimal)
  • opacity: Opacidade (0-1)
  • transparent: Habilita transparência
  • side: Qual lado renderizar (FRONT, BACK, DOUBLE)
  • map: Textura de albedo
  • normalMap: Mapa de normais
  • roughness: Rugosidade (0-1)
  • metalness: Metálico (0-1)

Exemplos de Uso

import * as THREE from 'three';

// Material PBR com textura
const material = new THREE.MeshStandardMaterial({
  color: 0x44aa88,
  roughness: 0.4,
  metalness: 0.6,
  map: textureLoader.load('texture.jpg')
});

// Aplicar a um mesh
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

Otimização de Desempenho

  • Use Material.alphaTest para evitar renderização desnecessária
  • Reutilize materiais em vez de criar novos para cada malha
  • Considere MeshBatch ou instanciamento para muitos objetos
  • Minimize o uso de transparência e mapas de textura grandes

Links de Referência

Este skill é mantido por cloudai-x.

Individual skills in this repo

This repo contains 9 individual skills — each has its own dedicated page.

cloudai-x/threejs-animation

Three.js animation - keyframe animation, skeletal animation, morph targets, animation mixing. Use when animating objects, playing GLTF animations, creating procedural motion, or blending animations.

cloudai-x/threejs-fundamentals

Three.js scene setup, cameras, renderer, Object3D hierarchy, coordinate systems. Use when setting up 3D scenes, creating cameras, configuring renderers, managing object hierarchies, or working with transforms.

cloudai-x/threejs-geometry

Three.js geometry creation - built-in shapes, BufferGeometry, custom geometry, instancing. Use when creating 3D shapes, working with vertices, building custom meshes, or optimizing with instanced rendering.

cloudai-x/threejs-interaction

Three.js interaction - raycasting, controls, mouse/touch input, object selection. Use when handling user input, implementing click detection, adding camera controls, or creating interactive 3D experiences.

cloudai-x/threejs-lighting

Three.js lighting - light types, shadows, environment lighting. Use when adding lights, configuring shadows, setting up IBL, or optimizing lighting performance.

cloudai-x/threejs-loaders

Three.js asset loading - GLTF, textures, images, models, async patterns. Use when loading 3D models, textures, HDR environments, or managing loading progress.

cloudai-x/threejs-postprocessing

Three.js post-processing - EffectComposer, bloom, DOF, screen effects. Use when adding visual effects, color grading, blur, glow, or creating custom screen-space shaders.

cloudai-x/threejs-shaders

Three.js shaders - GLSL, ShaderMaterial, uniforms, custom effects. Use when creating custom visual effects, modifying vertices, writing fragment shaders, or extending built-in materials.

cloudai-x/threejs-textures

Three.js textures - texture types, UV mapping, environment maps, texture settings. Use when working with images, UV coordinates, cubemaps, HDR environments, or texture optimization.

Habilidades Relacionadas

steipete/bluebubbles

Send and manage iMessages via BlueBubbles, including attachments, tapbacks, edits, replies, and groups.

community

steipete/eightctl

Control Eight Sleep pods (status, temperature, alarms, schedules).

community

steipete/blucli

BluOS CLI (blu) for discovery, playback, grouping, and volume.

community

steipete/bear-notes

Create, search, and manage Bear notes via grizzly CLI.

community

steipete/camsnap

Capture frames or clips from RTSP/ONVIF cameras.

community

steipete/gifgrep

Search GIF providers with CLI/TUI, download results, and extract stills/sheets.

community
← More Programação e Desenvolvimento skills