How to use different materials in Three.js

Materials in three.js define how objects interact with light, giving them color, texture, and surface properties. At the core, you have several material types, each optimized for different rendering scenarios. Understanding these especially important before you dive into complex scenes.

The simplest one is MeshBasicMaterial. It doesn’t react to lighting at all. It’s just flat color or texture. Use this when you want a cartoonish look or you need a HUD element that stays consistent regardless of scene lighting.

const material = new THREE.MeshBasicMaterial({ color: 0xff0000 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

Next up is MeshLambertMaterial. This one uses Lambertian reflectance, which means it’s great for matte surfaces. It reacts to lights, but it doesn’t produce shiny highlights. It’s computationally cheaper than more advanced materials and fits well for non-glossy objects.

const material = new THREE.MeshLambertMaterial({ color: 0x00ff00 });
const sphere = new THREE.Mesh(geometry, material);
scene.add(sphere);

Then there’s MeshPhongMaterial, a step up in complexity. It adds specular highlights, simulating shiny surfaces with reflections based on the light direction. You can control the shininess and how sharp those highlights appear. It’s ideal for metals or plastics.

const material = new THREE.MeshPhongMaterial({
  color: 0x0000ff,
  shininess: 100,
  specular: 0x555555
});
const ball = new THREE.Mesh(geometry, material);
scene.add(ball);

For even more realism, MeshStandardMaterial is the go-to. It uses physically-based rendering (PBR), which models how light behaves in the real world more accurately. It handles roughness and metalness parameters. This material responds well to environment maps and HDR lighting, making it suitable for photorealistic projects.

const material = new THREE.MeshStandardMaterial({
  color: 0xffffff,
  roughness: 0.5,
  metalness: 0.8
});
const model = new THREE.Mesh(geometry, material);
scene.add(model);

One important concept to grasp is that materials in three.js are stateful and expensive. Creating hundreds of unique materials can kill your performance. Instead, reuse materials where possible or tweak parameters dynamically if you need variation.

Also, materials often work hand-in-hand with textures. Textures can be color maps, normal maps, roughness maps, or metalness maps. These add fine detail without adding geometry. For example, a normal map tricks light into thinking the surface has bumps and dents.

const textureLoader = new THREE.TextureLoader();
const normalMap = textureLoader.load('textures/normal.jpg');

const material = new THREE.MeshStandardMaterial({
  color: 0xffffff,
  normalMap: normalMap,
  roughness: 0.4,
  metalness: 0.9
});
const model = new THREE.Mesh(geometry, material);
scene.add(model);

Understanding the balance between visual fidelity and performance is paramount. Choose the simplest material that accomplishes your goal. For example, if your object doesn’t need to reflect light dynamically, don’t use MeshStandardMaterial. Instead, go with MeshLambertMaterial or even MeshBasicMaterial when appropriate.

Remember that lighting setup impacts how materials appear. A MeshPhongMaterial without any lights in the scene will look flat. Materials and lights are partners in crime; you can’t have one without the other if you want realistic shading.

Keep in mind that some materials support transparency and blending modes. For instance, MeshStandardMaterial allows you to set transparent and opacity properties, enabling glass or ghost-like effects. Use these features carefully to avoid rendering order issues.

Finally, custom shaders are always an option if built-in materials don’t cut it. But start with these core materials first. Master them, and you’ll have a solid foundation for any three.js project. Once you’re comfortable, you can explore tweaking parameters or combining materials for more complex effects like subsurface scattering or anisotropy.

Let’s move on to the practical side: applying these materials effectively in your scene. It’s not just about slapping a material on a mesh. Lighting, environment, and camera angles all play a role in the final look. For instance, if you want a metallic surface that realistically reflects its surroundings, you need to add an environment map and make sure your scene has proper HDR lighting.

This is a minimal example of applying an environment map:

const cubeTextureLoader = new THREE.CubeTextureLoader();
const envMap = cubeTextureLoader.load([
  'posx.jpg', 'negx.jpg',
  'posy.jpg', 'negy.jpg',
  'posz.jpg', 'negz.jpg'
]);

const material = new THREE.MeshStandardMaterial({
  color: 0xffffff,
  metalness: 1.0,
  roughness: 0.1,
  envMap: envMap
});

const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

Notice how environment maps add reflections without complex ray tracing. This trick leverages cube textures to simulate the surrounding world on shiny surfaces. It’s much faster and often visually convincing.

Another key aspect is controlling roughness and metalness values. A roughness of zero means a perfectly smooth mirror-like surface, while one is fully rough and diffuse. Metalness controls how much the material behaves like a metal versus a dielectric (non-metal). Metals reflect their environment and have tinted reflections, while dielectrics tend to be more diffuse.

Mixing these parameters gives you a wide range of materials from plastic to chrome. Here’s a quick snippet that cycles through roughness values to demonstrate:

for (let i = 0; i <= 10; i++) {
  const roughness = i / 10;
  const material = new THREE.MeshStandardMaterial({
    color: 0x0077ff,
    metalness: 0.9,
    roughness: roughness
  });
  const sphere = new THREE.Mesh(geometry, material);
  sphere.position.x = i * 2;
  scene.add(sphere);
}

This kind of experimentation is invaluable. It helps you see the impact of each parameter directly and decide what fits your artistic vision.

Lighting types also influence material appearance. Point lights produce localized illumination, directional lights simulate sunlight, and ambient light fills in shadows to avoid pitch black areas. Combining these strategically ensures your materials look their best.

When working with transparent materials, remember to set depthWrite and depthTest properties carefully to avoid rendering artifacts. Transparency sorting in three.js is tricky since it uses painter’s algorithm. Sometimes you’ll need to tweak mesh render order or layer settings.

Advanced users often combine multiple materials on a single mesh using MeshFaceMaterial or by using groups inside geometry. This lets you assign different materials to different parts of your model, increasing realism without multiple draw calls.

One last note: always keep an eye on performance. Materials with high-resolution textures, many lights, and shadows can quickly slow down your app. Use the browser’s dev tools and three.js stats panel to monitor frame rates and memory usage.

Next, we’ll delve into how to apply materials effectively for realistic rendering – balancing quality and performance, and making your scenes look stunning without breaking the browser. But first, it’s critical to internalize these core concepts about materials and their parameters, because they are the foundation for everything that follows. Without this understanding, you’ll just be tweaking knobs blindly and wasting time on chasing visual results that don’t hold up under scrutiny.

Consider how each property affects the final render and build your scenes incrementally. Start with simple materials and lighting, then introduce complexity step by step. This approach will save you hours of debugging and frustration later on, especially when you move into physically based rendering and environment mapping territory.

For example, try creating a simple test scene with a single sphere and a directional light:

const geometry = new THREE.SphereGeometry(1, 32, 32);
const material = new THREE.MeshStandardMaterial({
  color: 0x888888,
  roughness: 0.3,
  metalness: 0.7
});
const sphere = new THREE.Mesh(geometry, material);
scene.add(sphere);

const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
directionalLight.position.set(5, 10, 7.5);
scene.add(directionalLight);

const ambientLight = new THREE.AmbientLight(0x404040);
scene.add(ambientLight);

From here, tweak roughness and metalness, add an environment map, and watch how the sphere’s appearance changes. This hands-on approach is the best way to understand materials.

Keep in mind that not all materials support every feature. For instance, MeshBasicMaterial ignores lights, so adding complex lighting won’t affect it. MeshStandardMaterial supports normal maps, roughness maps, and metalness maps, while MeshPhongMaterial only supports specular maps.

Knowing these distinctions helps you pick the right tool for the job. If you want a shiny plastic look and plan to use normal maps, MeshPhongMaterial might suffice. But if you’re aiming for realistic metal surfaces with environment reflections, MeshStandardMaterial is superior.

As you build complex scenes, keep materials simple and reuse them. When you need unique appearances, try combining textures with material parameters instead of creating entirely new materials. This keeps your memory footprint low and rendering efficient.

Remember, materials are only part of the equation. Realism comes from how materials, lights, and environment interact. So always test your scene under different lighting conditions and angles. What looks good under one light may look flat or unnatural under another.

In the next section, we’ll tackle practical tips for applying materials effectively for realistic rendering, focusing on balancing visual quality and performance, optimizing texture usage, and using environment maps for believable reflections and lighting effects. Until then, experiment with these core materials and get comfortable manipulating their properties in your own three.js scenes. The deeper your understanding here, the easier the next steps will be.

Here’s a quick snippet to dynamically update material properties in an animation loop, showing how you can create subtle changes over time:

function animate(time) {
  requestAnimationFrame(animate);
  const roughnessValue = (Math.sin(time * 0.001) + 1) / 2; // oscillates between 0 and 1
  material.roughness = roughnessValue;
  renderer.render(scene, camera);
}
animate();

This kind of dynamic control can bring your materials to life without swapping them out or creating new instances. It’s a powerful technique once you’re comfortable with the basics.

Next, we’ll explore how to apply these materials effectively for realistic rendering, ensuring your scenes not only look good but run smoothly. You’ll learn how to choose proper lighting setups, optimize texture usage, and use environment maps to their full potential. But first, internalize these core materials and start experimenting. The foundation is everything.

When you’re ready, consider combining your materials with advanced lighting techniques, like HDR environment lighting, shadows, and post-processing effects to push realism even further. But all of that depends on a solid grasp of what core materials do and how they behave under different lighting conditions.

One more thing before moving on: always check three.js documentation for the latest material properties and examples. The library evolves, and new material types or parameters may be introduced that can simplify your workflow or improve your scene’s fidelity. Staying updated is part of good craftsmanship in 3D programming.

Now, let’s proceed to applying materials effectively for realistic rendering, where we’ll put these concepts into practice and tackle common challenges developers face when aiming for photorealism in three.js.

Start by setting up an environment map that matches your scene’s mood. Use low dynamic range or HDRI images for natural lighting. Then, adjust the material’s metalness and roughness to mimic the physical properties of your target surface. Remember that not every surface is perfectly shiny or totally matte; subtlety is key.

For instance, here’s how to load an HDR environment and apply it:

const rgbeLoader = new THREE.RGBELoader();
rgbeLoader.load('hdr/environment.hdr', function(texture) {
  texture.mapping = THREE.EquirectangularReflectionMapping;
  scene.environment = texture;
  scene.background = texture;

  const material = new THREE.MeshStandardMaterial({
    color: 0xffffff,
    metalness: 1.0,
    roughness: 0.2,
    envMapIntensity: 1.0
  });

  const mesh = new THREE.Mesh(geometry, material);
  scene.add(mesh);
});

This setup greatly enhances realism by providing accurate reflections and lighting cues. The environment map acts as a global light source, which PBR materials interpret naturally.

Next, consider shadows. Materials need proper shadow reception and casting enabled to feel grounded. This usually means setting castShadow and receiveShadow to true on meshes and configuring your lights accordingly:

const material = new THREE.MeshLambertMaterial({ color: 0x00ff00 });
const sphere = new THREE.Mesh(geometry, material);
scene.add(sphere);

Shadows add depth and context, reinforcing material realism. Without them, even the best materials look like they are floating in space.

Finally, consider post-processing effects like ambient occlusion, bloom, or tone mapping. While not strictly part of materials, these effects complement your material setup by enhancing contrast, glow, and color grading. This can push your rendering closer to real-world visuals without complex shader programming.

Combining all these elements – materials, lights, shadows, environment maps, and post-processing – is the art of realistic rendering in three.js. Master each piece individually, then assemble them thoughtfully. The payoff is scenes that look believable and perform well.

Keep experimenting, profile your app regularly, and don’t hesitate to strip complexity when performance drops. Real-time 3D is always a balancing act between beauty and speed.

To wrap up this section, here’s a quick example that marries environment mapping, dynamic lighting, and material tweaking in an animation loop to create a lively, realistic metal sphere:

const material = new THREE.MeshLambertMaterial({ color: 0x00ff00 });
const sphere = new THREE.Mesh(geometry, material);
scene.add(sphere);

This snippet demonstrates how dynamic lighting interacts with environment-mapped materials to create a visually rich experience. It’s the kind of setup that forms the basis of many polished three.js scenes.

From here, continue to refine your materials and lighting, always testing across different devices and browsers to ensure consistent results. Realistic rendering is a journey, not a destination, and your understanding of core materials is the compass guiding you through it.

As you delve deeper, explore custom shaders and node-based material editors like three.js’s NodeMaterial system for even more control. But never forget the fundamentals outlined here – they will ground you as you push the boundaries of what’s possible in WebGL.

The next step is to learn how to manage material lifecycles effectively, avoid memory leaks, and optimize texture usage in complex scenes. This will ensure your applications remain performant and maintainable as they grow.

And with that, the core materials in three.js and their effective application for realistic rendering start to come into focus. Keep coding, keep refining, and the results will speak for themselves. The beauty of three.js lies in its simplicity paired with power – a perfect playground for developers who want to bring their 3D visions to life.

Now, let’s…

applying materials effectively for realistic rendering

Managing material lifecycles is critical in three.js to prevent memory leaks, especially in long-running applications or those that dynamically create and destroy objects. When you no longer need a material, you must explicitly dispose of it along with any associated textures.

Here’s how to properly dispose of a material and its textures:

if (material.map) material.map.dispose();
if (material.normalMap) material.normalMap.dispose();
if (material.roughnessMap) material.roughnessMap.dispose();
if (material.metalnessMap) material.metalnessMap.dispose();
material.dispose();

Failing to dispose of materials and textures will cause WebGL memory to fill up, resulting in degraded performance and eventual crashes. Always pair creation and disposal in your code, preferably in cleanup routines.

Texture management is another area where efficiency matters. Use compressed textures when possible, as they reduce memory usage and improve load times. Three.js supports several compressed texture formats like DDS or KTX2, which you can generate from your source images using tools like Basis Universal.

Loading compressed textures is similar to regular textures but requires specific loaders, for example:

const ktx2Loader = new THREE.KTX2Loader();
ktx2Loader.setTranscoderPath('/path/to/basis/');
ktx2Loader.detectSupport(renderer);

ktx2Loader.load('textures/compressed.ktx2', function(texture) {
  texture.encoding = THREE.sRGBEncoding;
  material.map = texture;
  material.needsUpdate = true;
});

This method dramatically improves performance on supported devices, especially mobile.

When dealing with multiple materials, grouping meshes that share materials reduces draw calls and boosts frame rates. Use geometry groups or merge geometries when possible:

const mergedGeometry = THREE.BufferGeometryUtils.mergeBufferGeometries([geo1, geo2]);
const mesh = new THREE.Mesh(mergedGeometry, sharedMaterial);
scene.add(mesh);

For scenes with complex lighting, consider baking lighting into textures (lightmaps) instead of relying solely on dynamic lights. This approach offloads expensive calculations and still produces convincing results.

Applying lightmaps involves creating a second set of UVs and assigning a lightmap texture to your material:

const lightMap = textureLoader.load('textures/lightmap.jpg');
material.lightMap = lightMap;
material.lightMapIntensity = 1.0;

Lightmaps work best for static geometry where lighting doesn’t change, freeing up resources for dynamic elements.

Another optimization is to use mipmaps for textures, which improve performance and visual quality at different distances. three.js generates mipmaps by default for power-of-two textures. For non-power-of-two textures, consider resizing or enabling generateMipmaps explicitly:

texture.generateMipmaps = true;
texture.minFilter = THREE.LinearMipMapLinearFilter;
texture.magFilter = THREE.LinearFilter;
texture.needsUpdate = true;

Proper texture filtering ensures smooth transitions and reduces aliasing artifacts.

When creating realistic materials, pay attention to the normal map’s encoding. three.js expects normal maps to be in tangent space and usually in the THREE.TangentSpaceNormalMap format. Using incorrectly encoded normal maps can produce strange shading.

Here’s how to load a normal map correctly:

const normalMap = textureLoader.load('textures/normal.png');
normalMap.encoding = THREE.LinearEncoding; // normal maps use linear encoding
material.normalMap = normalMap;

Also, remember to set your renderer’s output encoding to THREE.sRGBEncoding for physically accurate color space:

renderer.outputEncoding = THREE.sRGBEncoding;

This step ensures colors and textures appear as intended under different lighting conditions.

For materials requiring translucency, such as skin or wax, consider using subsurface scattering approximations. While three.js doesn’t have built-in subsurface scattering, you can fake it with layered materials or custom shaders.

Here’s a simple approach using MeshPhysicalMaterial which supports translucency:

const material = new THREE.MeshPhysicalMaterial({
  color: 0xffccaa,
  roughness: 0.5,
  metalness: 0,
  clearcoat: 1.0,
  clearcoatRoughness: 0.1,
  transmission: 0.9, // enables transparency with refraction
  thickness: 1.0,    // thickness for transmission effect
  ior: 1.5           // index of refraction
});

This material produces glass-like or translucent effects without writing custom shaders.

Lastly, always profile your scene using tools like three.js’s stats panel or browser developer tools. Watch for high draw calls, texture memory, and shader compilations. Optimize step-by-step by simplifying materials, reducing texture sizes, and limiting dynamic lights.

Effective material application is a cycle of measuring, adjusting, and testing. Striking the right balance between realism and performance will elevate your three.js projects from prototypes to polished experiences.