Antes de começarmos a introduzir a textura, vamos apresentar o atributo rugosidade e o atributo metalidade.
O atributo rugosidade .roughnessindica a rugosidade do material, 0 indica reflexão especular suave, 1 indica reflexão difusa completa e o atributo metalidade .metalnessindica a semelhança entre o material e o metal. Para materiais não metálicos, como madeira e pedra, use 0, e use 1 para metal. Não há valor intermediário para passar. Valores entre 0,0 e 1,0 podem ser usados para aparência de metal enferrujado.
No exemplo anterior, adicionamos apenas a luz ambiente, é uma fonte de luz básica, não tem direção, e a cor dessa fonte de luz será sobreposta à cor dos objetos existentes na cena, pela rugosidade e metal que vamos falar nesta seção Até certo ponto, usar apenas a luz ambiente não dá um bom efeito de renderização. Portanto, antes de começar, adicionamos uma luz paralela à base original. A luz paralela pode ser comparada à luz do sol, e a intensidade da luz recebida por toda a área iluminada pela luz paralela é a mesma.
// 灯光
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);
Então vamos dar uma olhada no efeito de reflexão especular suave:
const material = new THREE.MeshStandardMaterial({map: doorColorTexture,transparent: true,alphaMap: doorAlphaTexture,aoMap: doorAOTexture,side: THREE.DoubleSide,displacementMap: doorHeightTexture,displacementScale: 0.05,roughness: 0
});
Pode-se ver que a superfície do objeto emite luz paralela diretamente. Quando estiver roughnessdefinido como 1, não importa como você o ajuste, você não verá o efeito de espelho acima, porque roughnessquando for 1, a reflexão difusa será realizada, os alunos interessados podem experimentá-lo.
Se no projeto todo o objeto for liso ou áspero, nenhuma textura é necessária, mas em projetos reais, muitas vezes parte do objeto precisa ser lisa e outras partes são ásperas e ásperas O grau não é o mesmo. Então, se você quiser especificar algumas partes brilhantes em um objeto áspero, você pode definir um mapa de textura de metal para o metalnessMapatributo (ou, inversamente, se você quiser especificar algumas partes ásperas em um objeto liso, você pode usar um mapa de textura no roughnessMapatributo )
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
});
Em um local específico no modelo, o valor real das duasmetalness propriedades é igual ao produto do valor da propriedade em si e o valor no mapa correspondente. roughnessO código acima irá gerar o efeito mostrado na figura a seguir:
Pode-se ver que a parte principal da porta é espelhada e a folha de rosto da porta pode não ser totalmente refletida devido à ferrugem ~
metalnessO uso é roughnessexatamente , e não será demonstrado aqui.
Finalmente
Um pacote de informações de front-end está preparado para todos. Contém 54 e-books relacionados ao front-end 2,57G, "Coleção de entrevistas front-end (com respostas e análises)", tutoriais em vídeo de conhecimento difícil e chave (conjunto completo).
Amigos necessitados, você pode clicar no cartão abaixo para receber e compartilhar gratuitamente