Skip to main content الرئيسية المنشئون beko2210 firstbrain threejs-materials
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.
الانتقال إلى التثبيت سوق المهارات اكتشف واستكشف مهارات الذكاء الاصطناعي التي بناها المجتمع.
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
عرض تفاصيل Prompt يتجاوز الأمر المباشر Prompt المخصّص للمراجعة. افحص المصدر قبل تشغيله.
npx skills add https://github.com/BEKO2210/Firstbrain --skill threejs-materialsيبقى الأمر في سطر واحد. مرّر أفقيًا لمراجعته كاملًا قبل النسخ.
تفضّل نسخة محلية؟ نزّل الملفات المتاحة حاليًا لدى SkillsMP.
تحميل Zip جاري التحميل... المهن ذات الصلة SOC
استنادا إلى تصنيف SOC المهني
name threejs-materials description Three.js materials - PBR, basic, phong, shader materials, material properties. Use when styling meshes, working with textures, creating custom shaders, or optimizing material performance. type skill created 2026-02-27T00:00:00.000Z domain design-creative category 3d-animation risk unknown source community tags ["skill","design-creative","3d-animation","threejs","materials"]
Three.js Materials
Quick Start
import * as THREE from "three" ;
const material = new THREE .MeshStandardMaterial ({
color : 0x00ff00 ,
roughness : 0.5 ,
metalness : 0.5 ,
});
const mesh = new THREE .Mesh (geometry, material);
Material Types Overview
Material Use Case Lighting MeshBasicMaterial Unlit, flat colors, wireframes No MeshLambertMaterial Matte surfaces, performance Yes (diffuse only) MeshPhongMaterial Shiny surfaces, specular highlights Yes MeshStandardMaterial PBR, realistic materials Yes (PBR) MeshPhysicalMaterial Advanced PBR, clearcoat, transmission Yes (PBR+) MeshToonMaterial Cel-shaded, cartoon look Yes (toon) MeshNormalMaterial Debug normals No MeshDepthMaterial Depth visualization No ShaderMaterial Custom GLSL shaders Custom RawShaderMaterial Full shader control Custom
MeshBasicMaterial
No lighting calculations. Fast, always visible.
const material = new THREE .MeshBasicMaterial
color
0xff0000
transparent
true
opacity
0.5
side
THREE
DoubleSide
wireframe
false
map
alphaMap
envMap
reflectivity
1
fog
true
MeshLambertMaterial Diffuse-only lighting. Fast, no specular highlights.
const material = new THREE .MeshLambertMaterial ({
color : 0x00ff00 ,
emissive : 0x111111 ,
emissiveIntensity : 1 ,
map : texture,
emissiveMap : emissiveTexture,
envMap : envTexture,
reflectivity : 0.5 ,
});
MeshPhongMaterial Specular highlights. Good for shiny, plastic-like surfaces.
const material = new THREE .MeshPhongMaterial ({
color : 0x0000ff ,
specular : 0xffffff ,
shininess : 100 ,
emissive : 0x000000 ,
flatShading : false ,
map : texture,
specularMap : specTexture,
normalMap : normalTexture,
normalScale : new THREE .Vector2 (1 , 1 ),
bumpMap : bumpTexture,
bumpScale : 1 ,
displacementMap : dispTexture,
displacementScale : 1 ,
});
MeshStandardMaterial (PBR) Physically-based rendering. Recommended for realistic results.
const material = new THREE .MeshStandardMaterial ({
color : 0xffffff ,
roughness : 0.5 ,
metalness : 0.0 ,
map : colorTexture,
roughnessMap : roughTexture,
metalnessMap : metalTexture,
normalMap : normalTexture,
normalScale : new THREE .Vector2 (1 , 1 ),
aoMap : aoTexture,
aoMapIntensity : 1 ,
displacementMap : dispTexture,
displacementScale : 0.1 ,
displacementBias : 0 ,
emissive : 0x000000 ,
emissiveIntensity : 1 ,
emissiveMap : emissiveTexture,
envMap : envTexture,
envMapIntensity : 1 ,
flatShading : false ,
wireframe : false ,
fog : true ,
});
geometry.setAttribute ("uv2" , geometry.attributes .uv );
MeshPhysicalMaterial (Advanced PBR) Extends MeshStandardMaterial with advanced features.
const material = new THREE .MeshPhysicalMaterial ({
clearcoat : 1.0 ,
clearcoatRoughness : 0.1 ,
clearcoatMap : ccTexture,
clearcoatRoughnessMap : ccrTexture,
clearcoatNormalMap : ccnTexture,
clearcoatNormalScale : new THREE .Vector2 (1 , 1 ),
transmission : 1.0 ,
transmissionMap : transTexture,
thickness : 0.5 ,
thicknessMap : thickTexture,
attenuationDistance : 1 ,
attenuationColor : new THREE .Color (0xffffff ),
ior : 1.5 ,
sheen : 1.0 ,
sheenRoughness : 0.5 ,
sheenColor : new THREE .Color (0xffffff ),
sheenColorMap : sheenTexture,
sheenRoughnessMap : sheenRoughTexture,
iridescence : 1.0 ,
iridescenceIOR : 1.3 ,
iridescenceThicknessRange : [100 , 400 ],
iridescenceMap : iridTexture,
iridescenceThicknessMap : iridThickTexture,
anisotropy : 1.0 ,
anisotropyRotation : 0 ,
anisotropyMap : anisoTexture,
specularIntensity : 1 ,
specularColor : new THREE .Color (0xffffff ),
specularIntensityMap : specIntTexture,
specularColorMap : specColorTexture,
});
Glass Material Example const glass = new THREE .MeshPhysicalMaterial ({
color : 0xffffff ,
metalness : 0 ,
roughness : 0 ,
transmission : 1 ,
thickness : 0.5 ,
ior : 1.5 ,
envMapIntensity : 1 ,
});
Car Paint Example const carPaint = new THREE .MeshPhysicalMaterial ({
color : 0xff0000 ,
metalness : 0.9 ,
roughness : 0.5 ,
clearcoat : 1 ,
clearcoatRoughness : 0.1 ,
});
MeshToonMaterial const material = new THREE .MeshToonMaterial ({
color : 0x00ff00 ,
gradientMap : gradientTexture,
});
const colors = new Uint8Array ([0 , 128 , 255 ]);
const gradientMap = new THREE .DataTexture (colors, 3 , 1 , THREE .RedFormat );
gradientMap.minFilter = THREE .NearestFilter ;
gradientMap.magFilter = THREE .NearestFilter ;
gradientMap.needsUpdate = true ;
MeshNormalMaterial Visualize surface normals. Useful for debugging.
const material = new THREE .MeshNormalMaterial ({
flatShading : false ,
wireframe : false ,
});
MeshDepthMaterial Render depth values. Used for shadow maps, DOF effects.
const material = new THREE .MeshDepthMaterial ({
depthPacking : THREE .RGBADepthPacking ,
});
PointsMaterial const material = new THREE .PointsMaterial ({
color : 0xffffff ,
size : 0.1 ,
sizeAttenuation : true ,
map : pointTexture,
alphaMap : alphaTexture,
transparent : true ,
alphaTest : 0.5 ,
vertexColors : true ,
});
const points = new THREE .Points (geometry, material);
LineBasicMaterial & LineDashedMaterial
const lineMaterial = new THREE .LineBasicMaterial ({
color : 0xffffff ,
linewidth : 1 ,
linecap : "round" ,
linejoin : "round" ,
});
const dashedMaterial = new THREE .LineDashedMaterial ({
color : 0xffffff ,
dashSize : 0.5 ,
gapSize : 0.25 ,
scale : 1 ,
});
const line = new THREE .Line (geometry, dashedMaterial);
line.computeLineDistances ();
ShaderMaterial Custom GLSL shaders with Three.js uniforms.
const material = new THREE .ShaderMaterial ({
uniforms : {
time : { value : 0 },
color : { value : new THREE .Color (0xff0000 ) },
texture1 : { value : texture },
},
vertexShader : `
varying vec2 vUv;
uniform float time;
void main() {
vUv = uv;
vec3 pos = position;
pos.z += sin(pos.x * 10.0 + time) * 0.1;
gl_Position = projectionMatrix * modelViewMatrix * vec4(pos, 1.0);
}
` ,
fragmentShader : `
varying vec2 vUv;
uniform vec3 color;
uniform sampler2D texture1;
void main() {
// Use texture2D() for GLSL 1.0, texture() for GLSL 3.0 (glslVersion: THREE.GLSL3)
vec4 texColor = texture2D(texture1, vUv);
gl_FragColor = vec4(color * texColor.rgb, 1.0);
}
` ,
transparent : true ,
side : THREE .DoubleSide ,
});
material.uniforms .time .value = clock.getElapsedTime ();
Built-in Uniforms (auto-provided) // Vertex shader
uniform mat4 modelMatrix; // Object to world
uniform mat4 modelViewMatrix; // Object to camera
uniform mat4 projectionMatrix; // Camera projection
uniform mat4 viewMatrix; // World to camera
uniform mat3 normalMatrix; // For transforming normals
uniform vec3 cameraPosition; // Camera world position
// Attributes
attribute vec3 position;
attribute vec3 normal;
attribute vec2 uv;
RawShaderMaterial Full control - no built-in uniforms/attributes.
const material = new THREE .RawShaderMaterial ({
uniforms : {
projectionMatrix : { value : camera.projectionMatrix },
modelViewMatrix : { value : new THREE .Matrix4 () },
},
vertexShader : `
precision highp float;
attribute vec3 position;
uniform mat4 projectionMatrix;
uniform mat4 modelViewMatrix;
void main() {
gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}
` ,
fragmentShader : `
precision highp float;
void main() {
gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
}
` ,
});
Common Material Properties All materials share these base properties:
material.visible = true ;
material.transparent = false ;
material.opacity = 1.0 ;
material.alphaTest = 0 ;
material.side = THREE .FrontSide ;
material.depthTest = true ;
material.depthWrite = true ;
material.colorWrite = true ;
material.blending = THREE .NormalBlending ;
material.stencilWrite = false ;
material.stencilFunc = THREE .AlwaysStencilFunc ;
material.stencilRef = 0 ;
material.stencilMask = 0xff ;
material.polygonOffset = false ;
material.polygonOffsetFactor = 0 ;
material.polygonOffsetUnits = 0 ;
material.dithering = false ;
material.toneMapped = true ;
Multiple Materials
const geometry = new THREE .BoxGeometry (1 , 1 , 1 );
const materials = [
new THREE .MeshBasicMaterial ({ color : 0xff0000 }),
new THREE .MeshBasicMaterial ({ color : 0x00ff00 }),
new THREE .MeshBasicMaterial ({ color : 0x0000ff }),
new THREE .MeshBasicMaterial ({ color : 0xffff00 }),
new THREE .MeshBasicMaterial ({ color : 0xff00ff }),
new THREE .MeshBasicMaterial ({ color : 0x00ffff }),
];
const mesh = new THREE .Mesh (geometry, materials);
geometry.clearGroups ();
geometry.addGroup (0 , 6 , 0 );
geometry.addGroup (6 , 6 , 1 );
Environment Maps
const cubeLoader = new THREE .CubeTextureLoader ();
const envMap = cubeLoader.load ([
"px.jpg" ,
"nx.jpg" ,
"py.jpg" ,
"ny.jpg" ,
"pz.jpg" ,
"nz.jpg" ,
]);
material.envMap = envMap;
material.envMapIntensity = 1 ;
scene.environment = envMap;
import { RGBELoader } from "three/examples/jsm/loaders/RGBELoader.js" ;
const rgbeLoader = new RGBELoader ();
rgbeLoader.load ("environment.hdr" , (texture ) => {
texture.mapping = THREE .EquirectangularReflectionMapping ;
scene.environment = texture;
scene.background = texture;
});
Material Cloning and Modification
const clone = material.clone ();
clone.color .set (0x00ff00 );
material.color .set (0xff0000 );
material.needsUpdate = true ;
Performance Tips
Reuse materials : Same material = batched draw callsAvoid transparent when possible : Transparent materials require sortingUse alphaTest instead of transparency : When applicable, fasterChoose simpler materials : Basic > Lambert > Phong > Standard > PhysicalLimit active lights : Each light adds shader complexity
const materialCache = new Map ();
function getMaterial (color ) {
const key = color.toString (16 );
if (!materialCache.has (key)) {
materialCache.set (key, new THREE .MeshStandardMaterial ({ color }));
}
return materialCache.get (key);
}
material.dispose ();
NodeMaterial / TSL (Future Direction) Three.js is moving toward NodeMaterial and TSL (Three.js Shading Language) as the standard material system, especially for the WebGPU renderer:
import { MeshStandardNodeMaterial } from "three/addons/nodes/Nodes.js" ;
import { color, uv, texture } from "three/addons/nodes/Nodes.js" ;
const material = new MeshStandardNodeMaterial ();
material.colorNode = texture (colorMap, uv ());
NodeMaterial works with both WebGL and WebGPU renderers
onBeforeCompile does not work with the WebGPU renderer -- use NodeMaterial insteadTSL replaces GLSL for cross-renderer shader compatibility
Standard GLSL ShaderMaterial continues to work with the WebGL renderer
Lambert/Phong IBL Support (r183) As of r183, MeshLambertMaterial and MeshPhongMaterial support image-based lighting (IBL) via scene.environment. Previously, only PBR materials (Standard/Physical) responded to environment maps set on the scene.
See Also
threejs-textures - Texture loading and configurationthreejs-shaders - Custom shader developmentthreejs-lighting - Light interaction with materials
When to Use Use this skill when tackling tasks related to its primary domain or functionality as described above.
Connections
Domain: [[Design & Kreativitaet]]Kategorie: [[3D & Animation]]Navigation: [[Skills Uebersicht]], [[Home]] 