Skip to main content 홈 크리에이터 afovea game-dev-skills threejs-materials
threejs-materials Three.js material types — 9 materials from MeshBasicMaterial to MeshPhysicalMaterial, PBR advanced properties (clearcoat, transmission, iridescence, sheen), MeshToonMaterial, MeshNormalMaterial, MeshDepthMaterial, LineBasicMaterial, PointsMaterial, performance hierarchy, blending modes, and transparency. Use when choosing or configuring materials, implementing PBR surfaces, toon shading, transparency, or optimising material count. Adapted from CloudAI-X/threejs-skills (MIT).
설치로 이동 Skills Marketplace 커뮤니티가 만든 AI 스킬을 발견하고 탐색하세요.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
직접 명령은 검토 Prompt를 거치지 않습니다. 실행하기 전에 소스를 확인하세요.
npx skills add https://github.com/afovea/game-dev-skills --skill threejs-materials명령은 한 줄로 유지됩니다. 복사하기 전에 가로로 스크롤해 전체 내용을 확인하세요.
로컬 사본을 원하시나요? SkillsMP에서 현재 제공할 수 있는 파일을 다운로드하세요.
Zip 다운로드 다운로드 중... 이 저장소의 다른 Skills Art Director persona for visual style, pillars, art bible, cross-discipline visual consistency, art critique, and art QA. Use when a task needs visual direction, style enforcement, or cohesion across concept, environment, character, VFX, and lighting.
Audio Director persona for sound design, music direction, mix, audio implementation patterns, and audio pipeline. Use when a task needs reasoning about audio intent, audio-mechanic integration, mix balance, or the audio toolchain.
Post-pipeline cleanup and verification pass for game-development work. Regenerate / re-bake any derived content, rebuild the project, verify the editor / engine opens cleanly, run automated test suites, take a perf snapshot against budgets, and confirm save / network / cert / pipeline surfaces are untouched (or correctly versioned) against the pre-run baseline.
name threejs-materials description Three.js material types — 9 materials from MeshBasicMaterial to MeshPhysicalMaterial, PBR advanced properties (clearcoat, transmission, iridescence, sheen), MeshToonMaterial, MeshNormalMaterial, MeshDepthMaterial, LineBasicMaterial, PointsMaterial, performance hierarchy, blending modes, and transparency. Use when choosing or configuring materials, implementing PBR surfaces, toon shading, transparency, or optimising material count. Adapted from CloudAI-X/threejs-skills (MIT). license MIT compatibility Portable reference skill for agents that support markdown skills or prompt files. Works best alongside project Three.js source files and shader inspector. disable-model-invocation true metadata {"owner":"game-delivery","version":"2.0.0","language":"en-GB","category":"web-rendering","upstream_references":["https://github.com/CloudAI-X/threejs-skills (MIT — see NOTICE.md)"],"tags":["three-js","materials","pbr","mesh-standard-material","mesh-physical-material","toon-shading","transparency","shader-material","clearcoat","transmission"],"intents":["material-selection","pbr-configuration","toon-shading","transparency-setup","material-cost-review"],"output_types":["code-example","api-reference","material-recommendation"]}
Three.js Materials
Quick Start
import * as THREE from 'three' ;
const material = new THREE .MeshStandardMaterial ({
color : 0xffffff ,
roughness : 0.5 ,
metalness : 0.0 ,
});
const mesh = new THREE .Mesh (new THREE .BoxGeometry (1 , 1 , 1 ), material);
scene.add (mesh);
Material Hierarchy — Choose by Cost
From cheapest to most expensive:
Material Lighting Shadows Best For MeshBasicMaterialNone No UI, wireframes, skyboxes, emissive-only MeshLambertMaterialFlat/Gouraud Yes Low-poly stylised, background props MeshPhongMaterialBlinn-Phong Yes Shiny plastics, legacy assets MeshStandardMaterialPBR Yes Default — game characters, props MeshPhysicalMaterialPBR + extras Yes Glass, car paint, skin, cloth ShaderMaterialCustom
MeshBasicMaterial Flat colour or texture, unaffected by lights.
const mat = new THREE .MeshBasicMaterial ({
color : 0xff0000 ,
map : texture,
wireframe : false ,
transparent : false ,
opacity : 1.0 ,
side : THREE .FrontSide ,
alphaTest : 0.5 ,
depthWrite : true ,
depthTest : true ,
});
MeshLambertMaterial Diffuse-only lighting. Fast but no specular highlights.
const mat = new THREE .MeshLambertMaterial ({
color : 0x44aa88 ,
map : texture,
emissive : new THREE .Color (0x000000 ),
emissiveIntensity : 1.0 ,
});
Good choice for foliage, rock, soil — surfaces that aren't shiny.
MeshPhongMaterial Blinn-Phong shading with specular highlights.
const mat = new THREE .MeshPhongMaterial ({
color : 0xffffff ,
specular : new THREE .Color (0x111111 ),
shininess : 30 ,
map : diffuseTexture,
normalMap : normalTexture,
bumpMap : bumpTexture,
bumpScale : 1.0 ,
emissive : new THREE .Color (0x000000 ),
});
MeshStandardMaterial — Default Choice Physically based rendering (PBR) — metalness/roughness workflow.
const mat = new THREE .MeshStandardMaterial ({
color : 0xffffff ,
map : albedoTexture,
roughness : 0.5 ,
roughnessMap : roughnessTex,
metalness : 0.0 ,
metalnessMap : metalnessTex,
normalMap : normalTex,
normalScale : new THREE .Vector2 (1 , 1 ),
aoMap : aoTex,
aoMapIntensity : 1.0 ,
emissive : new THREE .Color (0x000000 ),
emissiveMap : emissiveTex,
emissiveIntensity : 1.0 ,
envMap : envMapTexture,
envMapIntensity : 1.0 ,
transparent : false ,
opacity : 1.0 ,
alphaMap : alphaTex,
alphaTest : 0 ,
side : THREE .FrontSide ,
});
MeshPhysicalMaterial — Advanced PBR Extends MeshStandardMaterial with real-world effects. Use sparingly — higher shader complexity.
const mat = new THREE .MeshPhysicalMaterial ({
clearcoat : 1.0 ,
clearcoatRoughness : 0.1 ,
clearcoatMap : clearcoatTex,
clearcoatRoughnessMap : clearcoatRoughTex,
clearcoatNormalMap : clearcoatNormalTex,
transmission : 1.0 ,
transmissionMap : transmissionTex,
thickness : 0.5 ,
ior : 1.5 ,
attenuationDistance : Infinity ,
attenuationColor : new THREE .Color (0xffffff ),
iridescence : 1.0 ,
iridescenceIOR : 1.3 ,
iridescenceThicknessRange : [100 , 400 ],
sheen : 1.0 ,
sheenRoughness : 0.5 ,
sheenColor : new THREE .Color (0xffffff ),
sheenColorMap : sheenColorTex,
anisotropy : 0.5 ,
anisotropyRotation : 0 ,
anisotropyMap : anisotropyTex,
});
Glass Example const glassMat = new THREE .MeshPhysicalMaterial ({
transmission : 1.0 ,
thickness : 0.5 ,
roughness : 0.05 ,
ior : 1.5 ,
transparent : true ,
side : THREE .DoubleSide ,
});
MeshToonMaterial — Cel Shading Stepped lighting for cartoon/anime look. Uses a gradient map to define light steps.
const gradientCanvas = document .createElement ('canvas' );
gradientCanvas.width = 3 ;
gradientCanvas.height = 1 ;
const ctx = gradientCanvas.getContext ('2d' );
ctx.fillStyle = '#000000' ; ctx.fillRect (0 , 0 , 1 , 1 );
ctx.fillStyle = '#888888' ; ctx.fillRect (1 , 0 , 1 , 1 );
ctx.fillStyle = '#ffffff' ; ctx.fillRect (2 , 0 , 1 , 1 );
const gradMap = new THREE .CanvasTexture (gradientCanvas);
gradMap.minFilter = gradMap.magFilter = THREE .NearestFilter ;
const toonMat = new THREE .MeshToonMaterial ({
color : 0x44aaff ,
gradientMap : gradMap,
map : texture,
});
MeshNormalMaterial Visualises surface normals as RGB. Development/debugging only.
const normalMat = new THREE .MeshNormalMaterial ({
flatShading : false ,
wireframe : false ,
});
MeshDepthMaterial Renders depth as greyscale. Used for custom post-processing effects.
const depthMat = new THREE .MeshDepthMaterial ({
depthPacking : THREE .RGBADepthPacking ,
});
LineBasicMaterial / LineDashedMaterial const lineMat = new THREE .LineBasicMaterial ({
color : 0x00ff00 ,
linewidth : 1 ,
});
const dashedMat = new THREE .LineDashedMaterial ({
color : 0xffffff ,
dashSize : 0.1 ,
gapSize : 0.05 ,
scale : 1 ,
});
lineGeometry.computeLineDistances ();
PointsMaterial const pointsMat = new THREE .PointsMaterial ({
size : 0.02 ,
sizeAttenuation : true ,
color : 0xffffff ,
map : particleTexture,
alphaTest : 0.5 ,
transparent : true ,
vertexColors : false ,
blending : THREE .AdditiveBlending ,
});
Transparency Three.js has two transparency systems:
mat.transparent = true ;
mat.opacity = 0.5 ;
mat.alphaTest = 0.5 ;
mesh.renderOrder = 1 ;
Blending Modes mat.blending = THREE .NormalBlending ;
mat.blending = THREE .AdditiveBlending ;
mat.blending = THREE .MultiplyBlending ;
mat.blending = THREE .SubtractiveBlending ;
mat.depthWrite = false ;
Shared Properties (All Materials) material.side = THREE .FrontSide ;
material.visible = true ;
material.depthTest = true ;
material.depthWrite = true ;
material.wireframe = false ;
material.fog = true ;
material.vertexColors = false ;
material.flatShading = false ;
material.needsUpdate = false ;
material.clippingPlanes = [new THREE .Plane (new THREE .Vector3 (0 , -1 , 0 ), 1 )];
material.clipIntersection = false ;
material.clipShadows = false ;
Multiple Materials on One Mesh Assign different materials to geometry groups.
const mesh = new THREE .Mesh (geometry, [mat1, mat2, mat3]);
geometry.addGroup (0 , 3 , 0 );
geometry.addGroup (3 , 3 , 1 );
Material Disposal function disposeMaterial (material ) {
const slots = [
'map' , 'normalMap' , 'roughnessMap' , 'metalnessMap' ,
'aoMap' , 'emissiveMap' , 'alphaMap' , 'envMap' ,
'displacementMap' , 'lightMap' , 'clearcoatMap' ,
'transmissionMap' , 'sheenColorMap' ,
];
slots.forEach (slot =>dispose ());
material.dispose ();
}
Performance Tips
Start with MeshStandardMaterial — only upgrade to Physical when a specific feature is neededUse MeshBasicMaterial for skyboxes, UI planes, invisible collidersShare material instances — one material per visual variant, not one per meshAvoid DoubleSide — nearly doubles fragment shader invocations; model closed geometry insteadalphaTest over transparent: trueDisable fog: false on materials that will never be in fog (performance micro-optimisation for large scenes)
const mats = meshes.map (() => new THREE .MeshStandardMaterial ({ color : 0xff0000 }));
const sharedMat = new THREE .MeshStandardMaterial ({ color : 0xff0000 });
const mats = meshes.map (() => sharedMat);
See Also
threejs-textures — loading and configuring texture mapsthreejs-shaders — ShaderMaterial and custom GLSLthreejs-lighting — how lights interact with PBR materialsthree-js-best-practices — material instancing and draw-call budget 