Hello folk,
how i can make like this floor without use a complex and huge material in blender ??
find a texture online 3Dassets.one - The asset search engine
1 Like
Tank you but there is some map that not supported in threejs
you don’t need all
1 Like
Minimum for relism need is diffuse map, bump map, specular map.
1 Like
This one looks fairly close.
You can choose 1k or 2k textures, glTF format, then choose PNG or JPG for the image type.
Download the Diffuse, Normal, and combined AO/Rough/Metal maps.
Create a MeshStandardMaterial like this:
const floorMat = new MeshStandardMaterial({
map: diffuseMap,
normalMap: normalMap,
aoMap: aoRoughMetalMap,
roughnessMap: aoRoughMetalMap,
metalnessMap: aoRoughMetalMap
});
Note the metalness is just going to be zero everywhere since this is not metal, so you could skip the metalnessMap and set metalness: 0 instead.
Optionally you can also download the displacement map, but for a flat surface like this (especially if you’re using a simple PlaneGeometry for the floor) it won’t have much/any effect.
The reason you can use a combined AO/Rough/Metal map texture is that each of these maps is greyscale, so they can be combined in an RGB texture by putting AO in the red channel, roughness in the green channel, and metalness in the blue channel.
You can tweak the material using aoMapIntensity, normalScale, roughness. However getting quality similar to your image is going to depend on other things like lighting, shadows, postprocessing and so on.
1 Like
Wooow , that explain all i need thank you, but what do you mean by red and green and blue channel , where is that ???
It’s how colors are stored in images, for each pixel there’s a red component, a green component, and a blue component. When you mix together the three components you get the final color which is displayed on the monitor.
In PNG images there’s also a 4th transparency component.
When we consider only the red values in the image, we call it the red channel. Likewise for green or blue or transparency.
Since these channels are separate, we can use a “trick” to store multiple textures in a single image file (and save space) - but only if each texture is greyscale. If you download some separate AO, metalness, or roughness textures from one of the sites above, you will see they are always greyscale. This means we can combine three of them in a single JPG with red, green, blue channels.
You can combine up to three greyscale textures in any order you like into a single JPG file. However, the convention in three.js, glTF, and probably lots of other places is to always store AO, metal, rough into red, green, blue channels in that order.
1 Like