Prefácio
O material é uma propriedade relacionada à renderização de efeitos independentes das informações do vértice do objeto. Ao definir o material, você pode alterar a cor, o mapa de textura, o modo de iluminação etc. do objeto.
Meshbasicmaterial: sem senso de luz, dando à geometria uma cor simples ou da estrutura de arame de exibição.
Meshlambertmaterial: Este material responde à luz e é usado para criar objetos escuros e não luminosos.
MeshphongMaterial: Este material também reage à luz e é usado para criar objetos de metal brilhante.
1. Materiais básicos
Use objetos de material básico, a cor do objeto após a renderização é sempre a cor do material sem efeitos claros e escuros ou de sombra devido à iluminação. Se não houver cor para o material especificado, a cor será aleatória. Seu construtor é:
TRÊS.MESHLAMBERTMATERIA (OPT)
Entre eles, o OPT pode ser padrão ou é um valor que contém cada atributo. Por exemplo, crie um novo material amarelo com uma opacidade de 0,75:
novo Three.MeshBasicMaterial ({color: 0xffff00, opacidade: 0,75});Aplique -o em um cubo (consulte "TRÊS.JS Aprendizagem de geometria", o efeito é:
Código -fonte:
<! DOCTYPE html> <html> <head> <meta charset = "utf-8"> <title> 3.js teste 7.1 </ititle> </head> <corpo onload = "init ()"> <canvas id = "maincanvas"> </canvas> </body> <cript type = "text/javs/javas src = "js/three.min.js"> </script> <script type = "text/javascript"> function init () {var renderer = new Three.webglrenderer ({Canvas: document.getElementById ('mainCanvas')}); renderer.setClearColor (0x0000000); var scene = new Three.Scene (); // Câmera var câmera = new Three.tográficoCamera (-5, 5, 3,75, -3,75, 0,1, 100); câmera.Position.set (25, 25, 25); câmera.Lookat (new Three.Vector3 (0, 0, 0)); cena.add (câmera); // luz var luz = new Three.pointLight (0xffffff, 1, 100); luz.Position.set (10, 15, 5); cenário.Add (luz); var material = new Three. var cubo = new Three.mesh (novo Three.cubegeometria (5, 5, 5), material); cena.add (cubo); renderizador.render (cena, câmera); } </script> </html>Várias propriedades mais usadas do BasicMaterial :
・ Visível: se é visível, o padrão é verdadeiro
・ Lado: renderize a frente ou a parte traseira da face, o padrão é o lado da frente.
・ Wireframe: se deve renderizar linhas em vez de faces, padrão para false
・ Cor: cor rgb hexadecimal, se o vermelho for representado como 0xff0000
・ Mapa: Use mapas de textura
Para materiais básicos, mesmo que a fonte de luz na cena seja alterada, os objetos que usam esse material sempre têm o mesmo efeito na cor em todos os lugares. Obviamente, isso não é muito realista, por isso apresentaremos modelos de iluminação mais realistas: modelos de iluminação de Lambert e modelos de iluminação de Phong .
2. Material lamber e material de Phong
O material de Lambert (Meshlambertmaterial) é um material que está em conformidade com o modelo de iluminação de Lambert. A principal característica do modelo de iluminação Lambert é que ele considera apenas a reflexão difusa, mas não considera o efeito da reflexão especular. Portanto, não é adequado para objetos como metais e espelhos que requerem reflexão especular e é adequado para os efeitos de reflexão difusa da maioria dos outros objetos.
A fórmula do modelo de iluminação é:
Idiffuse = kd * id * cos (teta)
Entre eles, Idiffuse é a intensidade difusa da luz, o KD é o atributo de reflexão difusa da superfície do objeto, o ID é a intensidade da luz e o teta é o arco de luz do ângulo incidente.
Obviamente, para o material Lambert usando três.js, você não precisa entender a fórmula acima para usá -lo diretamente.
O método para criar um material amarelo Lambert é:
NOVO TRES.
Depois de usar a iluminação, você obtém o seguinte efeito:
A cor é usada para expressar a capacidade do material de refletir a luz dispersa e também é o atributo mais comumente usado para definir a cor do material. Além disso, você também pode usar ambiental e emissivo para controlar a cor do material.
O ambiente representa a capacidade de reflexão para a luz ambiente. Este valor é válido apenas quando o AmbientLight está definido. A capacidade de reflexão do material para a luz ambiente é multiplicada pela intensidade da luz ambiente para obter a cor real do material.
O emissivo é uma cor auto-luminosa do material, que pode ser usada para expressar a cor da fonte de luz. Não é uma fonte de luz, mas uma cor que não é afetada pela luz. Auto-luminescência sozinha em vermelho:
NOVO TRÊS.MESHLAMBERTMaterial ({emitido: 0xff0000})O efeito é:
Se estiver usando a luz espalhada por auto-luminescente e amarelo: vermelho:
NOVO TRÊS.MESHLAMBERTMATERIAL ({color: 0xffff00, emitido: 0xff0000})O efeito é:
Efeitos da esfera:
Resuma as propriedades únicas do material lamber:
Ambiente: defina a cor ambiente do material e use -o com a fonte de luz da luz do ambiente. Esta cor será multiplicada pela cor da luz ambiente. Isto é, reagindo à fonte de luz.
Emissivo: Defina a cor emitida pelo material, não uma fonte de luz, mas uma cor que não é afetada pela luz. O padrão é preto.
Código -fonte:
<! Doctype html> <html> <head> <meta charset = "utf-8"> <title> 3.js test7.2 </ititle> </head> <corpo onload = "init ()"> <canvas id = "maincanvas"> </canvas> </body> <cript type = "text/javs" "" " src = "js/three.min.js"> </script> <script type = "text/javascript"> function init () {var renderer = new Three.webglrenderer ({Canvas: document.getElementById ('mainCanvas')}); renderer.setClearColor (0x0000000); var scene = new Three.Scene (); // Câmera var câmera = new Three.tográficoCamera (-5, 5, 3,75, -3,75, 0,1, 100); câmera.Position.set (25, 25, 25); câmera.Lookat (new Three.Vector3 (0, 0, 0)); cena.add (câmera); // luz var luz = new Three.pointLight (0xffffff, 1, 100); luz.Position.set (10, 15, 5); cenário.Add (luz); var material = new Three. Meshlambertmaterial ({color: 0xffff00, emitido: 0xff0000}); var cubo = new Three.mesh (novo Three.cubegeometria (5, 5, 5), material); cenário.add (cubo); // var sphere = new Three.mesh (novo Three.Spheregeometry (3, 20, 8), material); // cenário.add (esfera); renderizador.render (cena, câmera); } </script> </html>3. Phong Material
O material de Phong (MeshphongMaterial) é um material que está em conformidade com o modelo de iluminação de Phong. Ao contrário de Lambert, o modelo de Phong considera o efeito da reflexão especular, por isso é particularmente adequado para o desempenho de metal e espelho.
A parte de reflexão difusa e o modelo de iluminação Lambert são os mesmos, e o modelo da parte de reflexão especular é:
Ispecular = Ks * Is * (cos(alpha)) ^ n
Entre eles, o ispecular é a intensidade da luz refletida pela superfície especular, o KS é o coeficiente de reflexão especular da superfície do material, é a intensidade da fonte de luz, o alfa é o ângulo entre a luz refletida e a linha de visão, n é o índice de destaque e quanto maior o ponto de destaque, menor o ponto de destaque.
Como a parte de reflexão difusa é consistente com o modelo Lambert, se o coeficiente de reflexão especular não for especificado, mas apenas a reflexão difusa é definida, o efeito é o mesmo que o de Lambert:
novo Three.MeshphongMaterial ({color: 0xffff00});Da mesma forma, os valores emissivos e ambientais podem ser especificados e não serão explicados aqui. O coeficiente de reflexão especular é especificado abaixo. Primeiro, usamos apenas a reflexão especular, definimos o destaque para vermelho e o aplicamos a uma esfera:
var material = new Three. MeshphongMaterial ({Specular: 0xff0000}); var sphere = new Three.Mesh (novo Three.Spheregeometry (3, 20, 8), material);O efeito é:
O valor N no modelo de iluminação pode ser controlado através do atributo de brilho. Quando o valor do brilho é maior, quanto menor o ponto do destaque e o valor padrão é 30. Quando o definimos para 1000:
novo Three.MeshphongMaterial ({Specular: 0xff0000, Shininess: 1000});O efeito é:
Use luz de espelho amarelo, luz espalhada vermelha:
Material = novo Three.MeshPhongMaterial ({Color: 0XFF0000, Specular: 0xffff00, Shinfily: 100});Resuma as propriedades únicas do material de Phong:
Ambiente: defina a cor ambiente do material e use -o com a fonte de luz da luz do ambiente. Esta cor será multiplicada pela cor da luz ambiente. Isto é, reagindo à fonte de luz.
Emissivo: Defina a cor emitida pelo material, não uma fonte de luz, mas uma cor que não é afetada pela luz. O padrão é preto
Especular: especifica o brilho do material e a cor dos destaques. Se definido para a mesma cor da propriedade de cor, outro material mais parecido com metal será obtido. Se definido como cinza cinza, parecerá plástico.
Pravo: Especifica o brilho da parte de destaque, o valor padrão é 30.
Código -fonte:
<! Doctype html> <html> <head> <meta charset = "utf-8"> <title> 3.js test7.3 </ititle> </ad Head> <Body Onload = "init ()"> <canvas id = "maincanvas"> </canvas> </body> <cript type = "text/javs" "" src = "js/three.min.js"> </script> <script type = "text/javascript"> function init () {var renderer = new Three.webglrenderer ({Canvas: document.getElementById ('mainCanvas')}); renderer.setClearColor (0x0000000); var scene = new Three.Scene (); // Câmera var câmera = new Three.tográficoCamera (-5, 5, 3,75, -3,75, 0,1, 100); câmera.Position.set (25, 25, 25); câmera.Lookat (new Three.Vector3 (0, 0, 0)); cena.add (câmera); // luz var luz = new Three.pointlight (0xffffff, 1, 200); luz.Position.set (10, 15, 25); cenário.Add (luz); var material = new Three.MeshphongMaterial ({// Specular: 0xff0000, cor: 0xff0000, especular: 0xffff00, shinfil: 100}); // var cube = new Three.mesh (new Three.cubegeometry (5, 5, 5), material); // cenário.add (cubo); var sphere = new Three.Mesh (novo Three.Spheregeometria (3, 20, 8), material); cena.add (esfera); renderizador.render (cena, câmera); } </script> </html>Resumir
O conteúdo deste artigo termina aqui. O artigo apresenta Lamber e Phong em três.Js através de exemplos e imagens detalhados. Espero que seja útil para o aprendizado de todos. O editor resolverá artigos relacionados em três.js um após o outro. Amigos interessados em três.js, continue apoiando o wulin.com.