正文

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

粗糙度屬性

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

在前面的示例中，我們只添加了環(huán)境光，它是一個(gè)基本光源，它沒(méi)有方向，且該光源的顏色將會(huì)疊加到場(chǎng)景現(xiàn)有物體的顏色上，對(duì)于本節(jié)我們要說(shuō)的粗糙以及金屬度來(lái)說(shuō)，只使用環(huán)境光并不能很好的提現(xiàn)效果。所以在開(kāi)始之前，我們?cè)谠械幕A(chǔ)上，加上一個(gè)平行光，可以將平行光類(lèi)比成太陽(yáng)光，被平行光照亮的整個(gè)區(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é)，都不會(huì)看到上述鏡面的效果了，因?yàn)?roughness 為 1 時(shí)，會(huì)進(jìn)行漫反射，感興趣的同學(xué)可以試一下。

金屬度屬性

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

所以說(shuō)，如果希望在一個(gè)表面粗糙的物體上指定一些閃亮的局部，則可以為 metalnessMap 屬性設(shè)置一張金屬質(zhì)感貼圖（或者相反的，若希望在一個(gè)光滑的物體上指定一些粗糙的局部，則可以在 roughnessMap 屬性上使用紋理貼圖來(lái)實(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兩個(gè)屬性的實(shí)際值等于屬性值本身與相應(yīng)貼圖中的值的乘積。上述代碼將會(huì)生成如下圖所示的效果：

可以看到門(mén)的主體部分鏡面發(fā)射，而門(mén)的扉頁(yè)上可能會(huì)因?yàn)樯P導(dǎo)致并沒(méi)有完全反射~

metalness 用法與 roughness 完全相同，這里就不再演示了。

以上就是Three.js 粗糙度貼圖與金屬度貼圖使用介紹的詳細(xì)內(nèi)容，更多關(guān)于Three.js 粗糙度金屬度貼圖的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論