Join the Conversation!
Subscribing gives you access to the comments so you can share your ideas, ask questions, and connect with others.
Materials
Loading...
Loading...
Loading...
0 Comments
"Please login to view comments"
Upgrade your account
"Please login to view comments"
Subscribing gives you access to the comments so you can share your ideas, ask questions, and connect with others.
Once upon a time, in the vast and creative world of 3D graphics, there was a curious beginner named Adrian. Adrian had just discovered , a powerful library that allowed them to create stunning 3D scenes right in their web browser.
But Adrian had a problem: their 3D objects looked plain and lifeless. They were just gray shapes floating in space. Adrian wondered,
How can I make my objects look more realistic, colorful, and interesting?
That’s when Adrian learned about . are like the “skin” of 3D objects—they define how an object looks, whether it’s shiny, rough, metallic, or even glowing. With materials, Adrian could transform dull gray shapes into vibrant, lifelike objects. Let’s join Adrian on this journey and discover the magic of materials in Three.js!
In Three.js, a is what gives a 3D object its appearance. It determines how light interacts with the object’s surface, whether it reflects light, absorbs light, or even glows in the dark. Think of materials as the paint, texture, and finish you apply to a real-world object.
For example:
are what make your 3D objects come to life!
provides a variety of built-in materials, each suited for different use cases. Let’s break them down.
The simplest material in Three.js. It doesn’t react to light , making it ideal for objects that don’t need shading or shadows. You can use it for flat colors, wireframes, or simple textures.
const basicMaterial = new THREE.MeshBasicMaterial({
color: 0x00ff00, // Green color
wireframe: true // Render as a wireframe
});A material that uses Physically Based Rendering (PBR) to create ultra-realistic surfaces. It can simulate metals, plastics, glass, and more.
const standardMaterial = new THREE.MeshStandardMaterial({
color: 0xffaa00, // Orange color
roughness: 0.5, // Surface roughness (0 = smooth, 1 = rough)
metalness: 0.5 // Metalness (0 = non-metal, 1 = metal)
});An extension of MeshStandardMaterial with additional properties like clearcoat and transmission for advanced effects like clear coatings or thin-film interference.
const physicalMaterial = new THREE.MeshPhysicalMaterial({
color: 0xffffff, // White color
clearcoat: 1.0, // Clear coat layer
clearcoatRoughness: 0.1 // Roughness of the clear coat
});A material that uses a MatCap (Material Capture) texture to simulate complex lighting and reflections without needing actual lights in the scene. It’s lightweight and great for stylized or performance-sensitive applications.
const textureLoader = new THREE.TextureLoader();
const matcapTexture = textureLoader.load('path/to/matcap.png');
const matcapMaterial = new THREE.MeshMatCapMaterial({
matcap: matcapTexture // Apply the MatCap texture
});A material that simulates shiny, reflective surfaces. It supports specular highlights, making it perfect for plastic, metal, or glossy surfaces.
const phongMaterial = new THREE.MeshPhongMaterial({
color: 0x0000ff, // Blue color
specular: 0xffffff, // Specular color (white for shiny highlights)
shininess: 100 // Shininess level
});A cartoon-style material that creates a cel-shaded effect. It uses gradients to simulate a hand-drawn look.
const toonMaterial = new THREE.MeshToonMaterial({
color: 0x00ffff, // Cyan color
gradientMap: gradientTexture // Optional gradient texture
});are the key to bringing your 3D objects to life. Whether you’re creating a realistic scene, a shiny object, or a playful cartoon, materials give you the tools to make your vision a reality. And the best part? You don’t need to be an expert to start using them. Just like Adrian, you can start with the basics and gradually explore more advanced materials as you grow.
We will explore each of these materials in the next lessons, but I definitely encourage you should check the official Documentation
You can also check full code of here
By the end of the day, Adrian had turned their dull gray scene into a glowing, stylized masterpiece — all thanks to the power of materials. You can too.
How did you manage to remove the blur property and reach here?
Upgrading gives you access to quizzes so you can test your knowledge, track progress, and improve your skills.
By logging in, you'll unlock full access to this and other free tutorials on JSM Pro.
Why? Logging in lets us personalize your learning experience, track your progress, and keep you in the loop with new workshops, coding tips, and platform updates.
You'll also be the first to know about upcoming launches, events, and exclusive discounts.
No spam—just helpful content to level up your skills.
If that sounds fair, go ahead and log in to continue →
Enter your name and email to get instant access
##Looks like we found a thief monkey By the way, I liked the trick how you reached till here. You have a good sense of humor. You will improve a lot if you join our course with this passion.
var (function-scoped, outdated)let (block-scoped, modern and recommended)const (block-scoped, cannot be reassigned)_, or $let let = 5; is invalid)myVar and myvar are different)string, number, boolean, null, undefined, bigint, symbolObjects, Arrays, Functions
Subscribing gives you access to a brief, insightful summary of each lecture to stay on track.
00:00:00 Have you ever wondered how 3D objects in your scenes get their color, texture, and overall appearance?
00:00:07 It's due to materials.
00:00:09 Materials are the ones that make your objects look realistic, stylized, or anything in between.
00:00:15 So, what is a material?
00:00:18 In 3DS, a material is like the skin of a 3D object.
00:00:23 It determines how the surface of the object interacts with light, what colors or textures are displayed, and even how reflective or transparent it appears.
00:00:34 Think of it this way.
00:00:36 If geometry defines the shape of an object, the material defines its appearance.
00:00:42 Together, they create the final look of your 3D model.
00:00:46 Without a material, your object would be invisible.
00:00:50 But with the right material, it can look like anything.
00:00:54 Metal, glass, wood, or something out of this world.
00:00:58 3JS provides many built-in material types, each with its own unique properties and use cases.
00:01:05 So, some of the most common ones are the Mesh Basic Material, which is the simplest material.
00:01:11 It doesn't react to light, making it great for backgrounds or wireframes or objects that don't need shading.
00:01:17 Then, there's the Mesh Standard Material.
00:01:20 Although it has a standard in the name, it is one of the most powerful materials out there.
00:01:26 It's because it uses PBR, physically based rendering, to create realistic surfaces.
00:01:31 It works great with environment maps, and it can even simulate roughness, metalness, and more.
00:01:38 And then there's the Mesh Physical Material, which is an extension of a Mesh Standard Material that adds advanced features like clear code and transparency,
00:01:48 perfect for materials like glass or car paint.
00:01:52 But now that you know about all of these types, let's talk about customizing them.
00:01:56 Materials in 3JS are highly configurable, so let me tell you about some of the most common properties you might want to tweak.
00:02:03 First, of course, is the color.
00:02:05 You can choose a base material color by using the Color property.
00:02:09 Then, there's the texture.
00:02:12 Textures can be applied to materials to give them detailed surfaces like wood grain or brick patterns.
00:02:18 Then there are transparency and opacity, which you can use to make materials see-through, perfect for glass or water effects.
00:02:27 There's also roughness and metalness, which allow you to choose how rough or metallic a surface appears.
00:02:34 And finally, there are environment maps, which allow materials to reflect their surroundings, adding realism to reflective surfaces like mirrors or chrome.
00:02:44 Of course, materials and lightning go hand in hand, because how a material looks depends heavily on the lights in your scene.
00:02:53 And experimenting with different light types can dramatically change the appearance of your materials.
00:02:58 So, to sum up, materials in 3JS are one of the most powerful tools that you can use to shape up your 3D world.
00:03:06 And remember, materials are not just about how things look.
00:03:10 It's about how they feel.
00:03:12 Because a scratched metal surface tells a story of wear and tear.
00:03:17 A translucent glass material can evoke fragility or elegance.
00:03:21 Your choices here shape the emotional impact of your scene.
00:03:26 So as you continue your journey with 3JS, don't just think of materials as a technical tool.
00:03:32 Think of them as your palette, your brush, and your canvas.
00:03:36 Experiment, break the rules, and see what you can create.
00:03:40 Sure, you're coding things out, but with 3JS, you're also an artist.