Three.js - 11. Uso de mapas de metalicidade, rugosidade e ambiente do material PBR

Three.js - 11. Uso de mapas de metalicidade, rugosidade e ambiente do material PBR

metalnessMetalicidade

Atributo de metalicidade.metalidade representa o grau em que o material se assemelha ao metal. Para materiais não metálicos, como madeira ou pedra, use 0,0 e para metal, use 1,0.

new THREE.MeshStandardMaterial({
    
    
    metalness: 1.0,//金属度属性
})
// 或者
// mesh.material.metalness = 1.0;//金属度

    const geometry = new THREE.BoxGeometry(10, 10, 10);
    // 材质
    const material = new THREE.MeshStandardMaterial({
    
    
      color: 0x51efe4, 
      metalness: 1,
    });
    const mesh = new THREE.Mesh(geometry, material);
    mesh.position.set(0, 0, 0);
    scene.add(mesh);
    // mesh.material.metalness = 1;
    gui = new GUI();
    gui.add(material, "metalness", 0, 1);

roughnessRugosidade

A rugosidade roughnessrepresenta a suavidade ou rugosidade da superfície do modelo. Quanto mais lisa for a superfície, mais forte será a capacidade de reflexão especular. Quanto mais áspera for a superfície, mais fraca será a capacidade de reflexão especular e mais difusa será a reflexão.
Rugosidade roughness, 0,0 representa reflexão especular suave, 1,0 representa reflexão difusa completa, o padrão é 0,5.

    const geometry = new THREE.BoxGeometry(10, 10, 10);
    // 材质
    textureCube = new THREE.CubeTextureLoader()
      .setPath(new URL("@/assets/", import.meta.url).href)
      .load(["/02.png", "/02.png", "/02.png", "/02.png", "/02.png", "/02.png"]);
    const material = new THREE.MeshStandardMaterial({
    
    
      color: 0x51efe4, //0x51efe4设置材质颜色
      metalness: 1,
      roughness: 0.5,
      envMap: textureCube,
    });
    const mesh = new THREE.Mesh(geometry, material);
    mesh.position.set(0, 0, 0);

    scene.add(mesh);
    // mesh.material.metalness = 1;
    gui = new GUI();
    gui.add(material, "metalness", 0, 1);
    gui.add(material, "roughness", 0, 1);

imagem de teste

O efeito real é o seguinte:

envMapIntensityRefletividade do mapa ambiental

Usado para definir a força do mapa ambiental. Ele controla o grau de reflexão do mapa ambiental na superfície do objeto. Quanto maior o valor, mais forte será o reflexo, e quanto menor o valor, mais fraco será o reflexo. O intervalo de valores deste atributo está entre 0 e 1 e o valor padrão é 1.

Resumo: Quanto menor a rugosidade, mais forte será o efeito de reflexão. Se for definido como 0, será totalmente especular, equivalente a um espelho.
É claro que, no desenvolvimento real, diferentes mapas ambientais também afetarão o efeito de renderização, e também é necessário escolher o mapa apropriado. Muitas vezes, esse tipo de mapa pode ser fornecido pelo artista.

Os espaços de cores da textura e do renderizador são consistentes

textureCube.encoding = THREE.sRGBEncoding; 

Sobre o mapa ambiental do modeloenvironment

loader.load(new URL(`../assets/model.glb`, import.meta.url).href, function (gltf) {
    
    
    // 递归遍历批量设置环境贴图
    gltf.scene.traverse(function (obj) {
    
    
        if (obj.isMesh) {
    
     //判断是否是网格模型
            obj.material.envMap = textureCube; //设置环境贴图
        }
    });
})

Se você quiser usar mapas de ambiente para adicionar materiais de textura a todas as malhas da cena, você pode fazer isso através do atributo de ambiente da cena .environment. Basta definir o objeto de textura correspondente ao mapa de ambiente para o valor do atributo .environment.

scene.environment = textureCube;

encodingDefina o método de codificação de textura

codificação`Como os valores de cores da textura são codificados e decodificados para garantir a exibição correta das cores. Os métodos de codificação comuns incluem sRGB, Linear, RGBE, etc. Diferentes métodos de codificação são adequados para diferentes cenários e necessidades. Ao usar texturas, você precisa escolher um método de codificação apropriado com base na situação real.

//如果renderer.outputEncoding=THREE.sRGBEncoding;环境贴图需要保持一致
textureCube.encoding = THREE.sRGBEncoding;