| name | three-dart-materials |
| allowed-tools | Read, Glob |
| description | three_dart materials — MeshStandardMaterial, MeshBasicMaterial, MeshPhongMaterial, ShaderMaterial, transparency, wireframe in Flutter. Use when applying materials to 3D objects in Flutter three_dart scenes. |
three_dart Materials
Iron Law
Always set material.needsUpdate = true after changing maps or transparency at runtime — three_dart caches the compiled shader program and will not recompile without it.
Material Types
import 'package:three_dart/three_dart.dart' as THREE;
// PBR — use for realistic rendering (recommended default)
final standard = THREE.MeshStandardMaterial({
'color': 0xff6600,
'roughness': 0.5, // 0 = mirror, 1 = fully rough
'metalness': 0.0, // 0 = non-metal, 1 = metallic
});
// Physical — extends Standard with more PBR controls
final physical = THREE.MeshPhysicalMaterial({
'color': 0xffffff,
'roughness': 0.2,
'metalness': 0.8,
'clearcoat': 1.0, // car paint effect
'clearcoatRoughness': 0.1,
});
// Phong — cheaper, good for low-end mobile
final phong = THREE.MeshPhongMaterial({
'color': 0x00ff00,
'shininess': 100,
'specular': THREE.Color(0x111111),
});
// Basic — unlit, no lighting calculations
final basic = THREE.MeshBasicMaterial({'color': 0xffffff});
// Lambert — diffuse only, no specular
final lambert = THREE.MeshLambertMaterial({'color': 0x888888});
// Toon — cel-shaded
final toon = THREE.MeshToonMaterial({'color': 0xff0000});
// Wireframe
final wireframe = THREE.MeshBasicMaterial({
'color': 0x00ff00,
'wireframe': true,
});
Transparency
final transparent = THREE.MeshStandardMaterial({
'color': 0x0088ff,
'transparent': true,
'opacity': 0.5,
// Side: FrontSide, BackSide, DoubleSide
'side': THREE.DoubleSide,
});
Textures with Materials
final loader = THREE.TextureLoader();
loader.load('assets/textures/brick.jpg', (texture) {
texture.wrapS = THREE.RepeatWrapping;
texture.wrapT = THREE.RepeatWrapping;
texture.repeat.set(4, 4);
final material = THREE.MeshStandardMaterial({
'map': texture, // albedo / color map
'roughnessMap': roughTex, // roughness from texture
'normalMap': normalTex, // normal map for surface detail
'aoMap': aoTex, // ambient occlusion
});
});
ShaderMaterial
final shader = THREE.ShaderMaterial({
'uniforms': {
'time': {'value': 0.0},
'color': {'value': THREE.Color(0xff0000)},
},
'vertexShader': '''
void main() {
gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}
''',
'fragmentShader': '''
uniform vec3 color;
void main() {
gl_FragColor = vec4(color, 1.0);
}
''',
});
// Update uniform in animate callback
shader.uniforms['time']['value'] = elapsedTime;
Material Updates
// After changing material properties at runtime
material.color = THREE.Color(0xff0000);
material.needsUpdate = true; // required when changing maps or transparency
See Also
three-dart-fundamentals — attaching materials to meshes
three-dart-geometry — geometry to pair with materials