Before we start to introduce the texture, let's introduce the roughness attribute and the metalness attribute.
The roughness attribute .roughnessindicates the roughness of the material, 0 indicates smooth specular reflection, 1 indicates complete diffuse reflection, and the metalness attribute .metalnessindicates the similarity between the material and metal. For non-metallic materials, such as wood and stone, use 0, and use 1 for metal. There is no intermediate value for passing. Values between 0.0 and 1.0 can be used for the appearance of rusty metal.
In the previous example, we only added ambient light, it is a basic light source, it has no direction, and the color of this light source will be superimposed on the color of the existing objects in the scene, for the roughness and metal we are going to talk about in this section To a certain extent, only using ambient light does not give a good rendering effect. So before we start, we add a parallel light on the original basis. The parallel light can be compared to sunlight, and the light intensity received by the entire area illuminated by the parallel light is the same.
// 灯光
const light = new THREE.AmbientLight(0xffffff, 0.5);
scene.add(light);
// 直线光源
const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5);
directionalLight.position.set(10, 10, 10);
scene.add(directionalLight);
Then let's take a look at the smooth specular reflection effect:
const material = new THREE.MeshStandardMaterial({map: doorColorTexture,transparent: true,alphaMap: doorAlphaTexture,aoMap: doorAOTexture,side: THREE.DoubleSide,displacementMap: doorHeightTexture,displacementScale: 0.05,roughness: 0
});
It can be seen that the surface of the object emits parallel light directly. When is roughnessset to 1, no matter how you adjust it, you will not see the above mirror effect, because roughnesswhen it is 1, diffuse reflection will be performed, interested students can try it.
If in the project, the whole object is smooth or rough, then no texture is needed, but in actual projects, often part of the object needs to be smooth, and other parts are rough, and rough The degree is not the same. So, if you want to specify some shiny parts on a rough object, you can set a metal texture map for the metalnessMapattribute (or conversely, if you want to specify some rough parts on a smooth object, you can Use a texture map on the roughnessMapattribute to achieve)
const textureLoader = new THREE.TextureLoader();
const roughnessTexture = textureLoader.load(roughness);
const material = new THREE.MeshStandardMaterial({map: doorColorTexture,transparent: true,alphaMap: doorAlphaTexture,aoMap: doorAOTexture,side: THREE.DoubleSide,displacementMap: doorHeightTexture,displacementScale: 0.05,roughness: 1,roughnessMap: roughnessTexture
});
At a specific location on the model, the actual value of the twometalness properties is equal to the product of the property value itself and the value in the corresponding map. roughnessThe above code will generate the effect shown in the following figure:
It can be seen that the main part of the door is mirrored, and the title page of the door may not be completely reflected due to rust~
metalnessThe usage is roughnessexactly , and will not be demonstrated here.
At last
A front-end information package is prepared for everyone. Contains 54, 2.57G front-end related e-books, "Front-end Interview Collection (with answers and analysis)", difficult and key knowledge video tutorials (full set).
Friends in need, you can click the card below to receive and share for free