threejs-materials
Three.js materials - PBR, basic, phong, shader materials, material properties. Use when styling meshes, working with textures, creating custom shaders, or optimizing material performance.
Installation
Pick a client and clone the repository into its skills directory.
Installation
About this skill
Three.js materials - PBR, basic, phong, shader materials, material properties. Use when styling meshes, working with textures, creating custom shaders, or optimizing material performance.
How to use
Zaimportuj Three.js do swojego projektu:
import * as THREE from "three".Wybierz typ materiału w zależności od potrzeb: MeshBasicMaterial dla płaskich kolorów bez oświetlenia, MeshPhongMaterial dla błyszczących powierzchni ze specular highlights, MeshStandardMaterial (PBR) dla realistycznego renderingu, lub ShaderMaterial dla pełnej kontroli nad GLSL shaderami.
Utwórz instancję materiału z odpowiednimi właściwościami — na przykład dla PBR:
new THREE.MeshStandardMaterial({ color: 0x00ff00, roughness: 0.5, metalness: 0.5 }).Dodaj tekstury jeśli potrzebujesz — przypisz mapę kolorów do
map, mapę przezroczystości doalphaMaplub mapę odbić doenvMap.Przypisz materiał do mesh'a:
new THREE.Mesh(geometry, material)i dodaj mesh do sceny.Dostosuj właściwości materiału (opacity, side, wireframe) w zależności od efektu — użyj
THREE.DoubleSideaby renderować obie strony geometrii.