快捷導(dǎo)航

Three.js?粗糙度貼圖與金屬度貼圖使用介紹

更新時間：2022年12月14日 10:25:40 作者：隨便起一個名字吧

這篇文章主要為大家介紹了Three.js?粗糙度貼圖與金屬度貼圖使用介紹，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

正文

在開始介紹貼圖之前，我們先介紹一下粗糙度屬性以及金屬度屬性。

粗糙度屬性

.roughness 表示材質(zhì)的粗糙程度，0 表示平滑的鏡面反射，1 表示完全漫反射，而金屬度屬性 .metalness 表示材質(zhì)與金屬的相似度，非金屬材質(zhì)，例如木材、石材，使用0，金屬使用1，通過是沒有中間值的。0.0到1.0之間的值可用于生銹金屬的外觀。

在前面的示例中，我們只添加了環(huán)境光，它是一個基本光源，它沒有方向，且該光源的顏色將會疊加到場景現(xiàn)有物體的顏色上，對于本節(jié)我們要說的粗糙以及金屬度來說，只使用環(huán)境光并不能很好的提現(xiàn)效果。所以在開始之前，我們在原有的基礎(chǔ)上，加上一個平行光，可以將平行光類比成太陽光，被平行光照亮的整個區(qū)域接收到的光強(qiáng)是一樣的。

// 燈光
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);

然后我們先看下平滑的鏡面反射效果：

const material = new THREE.MeshStandardMaterial({
    map: doorColorTexture,
    transparent: true,
    alphaMap: doorAlphaTexture,
    aoMap: doorAOTexture,
    side: THREE.DoubleSide,
    displacementMap: doorHeightTexture,
    displacementScale: 0.05,
    roughness: 0
});

可以看到物體表面將平行光直接發(fā)射了。當(dāng)將 roughness 設(shè)置成1后，不管怎么調(diào)節(jié)，都不會看到上述鏡面的效果了，因?yàn)?roughness 為 1 時，會進(jìn)行漫反射，感興趣的同學(xué)可以試一下。

金屬度屬性

如果在項(xiàng)目中，整個物體都是光滑的、或者都是粗糙的，那也用不到貼圖，但是在實(shí)際項(xiàng)目中，往往是物體的一部分需要是光滑的，其他部分則是粗糙的，而且粗糙程度也不相同。

所以說，如果希望在一個表面粗糙的物體上指定一些閃亮的局部，則可以為 metalnessMap 屬性設(shè)置一張金屬質(zhì)感貼圖（或者相反的，若希望在一個光滑的物體上指定一些粗糙的局部，則可以在 roughnessMap 屬性上使用紋理貼圖來實(shí)現(xiàn)）

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
});

在模型的具體位置上，metalness 和 roughness兩個屬性的實(shí)際值等于屬性值本身與相應(yīng)貼圖中的值的乘積。上述代碼將會生成如下圖所示的效果：