Prefacio
El material es una propiedad relacionada con los efectos de representación independientes de la información del vértice del objeto. Al configurar el material, puede cambiar el color, el mapa de textura, el modo de iluminación, etc. del objeto.
MeshBasicMaterial: no hay sentido de luz, dando a la geometría un color simple de color o pantalla de visualización.
Meshlambertmaterial: este material responde a la luz y se usa para crear objetos tenues y no luminosos.
MeshphongMaterial: este material también reacciona a la luz y se usa para crear objetos metálicos brillantes.
1. Materiales básicos
Use objetos de material básico, el color del objeto después de representar es siempre el color del material sin efectos de luz y oscuridad o sombra debido a la iluminación. Si no hay color para el material especificado, el color es aleatorio. Su constructor es:
Tres.Meshlambertmaterial (OPT)
Entre ellos, OPT se puede incumplir o es un valor que contiene cada atributo. Por ejemplo, cree un nuevo material amarillo con una opacidad de 0.75:
nuevo tres.MeshBasicMaterial ({Color: 0xffff00, Opacidad: 0.75});Aplíquelo a un cubo (ver "Three.js Learning Geometry", el efecto es:
Código fuente:
<! Doctype html> <html> <fead> <meta charset = "utf-8"> <title> 3.js test 7.1 </title> </head> <body onload = "init ()"> <canvas id = "maincanvas"> </ Canvas> </body> <script type = "text/javaScript" src = "js/tres/mínimo". <script type = "text/javascript"> function init () {var renderer = new tres.webglrenderer ({Canvas: document.getElementById ('MainCanvas')}); renderer.setClearColor (0x0000000); VAR Scene = new Three.scene (); // cámara var cámara = nueva tres.tográficacamera (-5, 5, 3.75, -3.75, 0.1, 100); Camera.Position.set (25, 25, 25); Camera.lookat (nuevo tres.vector3 (0, 0, 0)); escena.add (cámara); // Light var light = new Three.Pointlight (0xffffff, 1, 100); Light.Position.set (10, 15, 5); escena.add (luz); Material var = nuevo tres.MeshBasicMaterial ({color: 0xffff00, opacidad: 0.75}); var cubo = nuevo tres.mesh (nuevo tres.cubegeometry (5, 5, 5), material); escena.add (cubo); renderer.render (escena, cámara); } </script> </html>Varias propiedades más utilizadas de BasicMaterial :
・ Visible: si es visible, el valor predeterminado es verdadero
・ Lado: Renderiza la parte delantera o la parte posterior de la cara, el valor predeterminado es el frente tres. Frente, que se puede configurar en la parte posterior tres. Backside, o los tres de doble cara.
・ Moda de alambre: si debe representar líneas en lugar de caras, predeterminada a falso
・ Color: color hexadecimal RGB, si el rojo se representa como 0xff0000
・ Mapa: use mapas de textura
Para los materiales básicos, incluso si se cambia la fuente de luz en la escena, los objetos que usan ese material siempre tienen el mismo efecto en el color en todas partes. Por supuesto, esto no es muy realista, por lo que introduciremos modelos de iluminación más realistas: modelos de iluminación de Lambert y modelos de iluminación Phong .
2. Material de Lamber y material Phong
El material de Lambert (Meshlambertmaterial) es un material que se ajusta al modelo de iluminación de Lambert. La característica principal del modelo de iluminación de Lambert es que solo considera la reflexión difusa, pero no considera el efecto de la reflexión especular. Por lo tanto, no es adecuado para objetos como metales y espejos que requieren reflexión especular, y es adecuado para los efectos de reflexión difusa de la mayoría de los otros objetos.
La fórmula del modelo de iluminación es:
Idiffuse = kd * id * cos (theta)
Entre ellos, Idiffuse es la intensidad difusa de la luz, KD es el atributo de reflexión difusa de la superficie del objeto, ID es la intensidad de la luz y Theta es el arco del ángulo incidente de la luz.
Por supuesto, para el material de Lambert usando tres.js, no necesita comprender la fórmula anterior para usarla directamente.
El método para crear un material amarillo de Lambert es:
Nuevo tres.MeshlambertMaterial ({Color: 0xffff00})Después de usar iluminación, obtienes el siguiente efecto:
El color se usa para expresar la capacidad del material para reflejar la luz dispersa, y también es el atributo más utilizado para establecer el color del material. Además, también puede usar ambiental y emisivo para controlar el color del material.
Ambient representa la capacidad de reflexión para la luz ambiental. Este valor solo es válido cuando se establece Ambientlight. La capacidad de reflexión del material a la luz ambiental se multiplica por la intensidad de la luz ambiental para obtener el color real del material.
Emisive es un color auto-luminoso del material, que se puede usar para expresar el color de la fuente de luz. No es una fuente de luz, sino un color que no se ve afectado por la luz. Auto-luminiscencia solo en rojo:
Nuevo tres.MeshlambertMaterial ({emitsive: 0xff0000})El efecto es:
Si usa la luz roja autoluminiscente y amarilla dispersa:
Nuevo tres.MeshlambertMaterial ({Color: 0xffff00, emitivo: 0xff0000})El efecto es:
Efectos de la esfera:
Resume las propiedades únicas del material de Lamber:
Ambient: Establezca el color ambiental del material y úselo con la fuente de luz Ambientlight. Este color se multiplicará por el color de la luz ambiental. Es decir, reaccionar a la fuente de luz.
Emisivo: Establezca el color emitido por el material, no una fuente de luz, sino un color que no se ve afectado por la luz. El valor predeterminado es negro.
Código fuente:
<! Doctype html> <html> <fead> <meta charset = "utf-8"> <title> 3.js test7.2 </title> </head> <body onload = "init ()"> <canvas id = "maincanvas"> </ Canvas> </body> <script type = "text/javaScript" src = "js/tres.min.js"> </script> <script type = "text/javascript"> function init () {var renderer = new tres.webglrenderer ({canvas: document.getElementById ('MainCanvas')}); renderer.setClearColor (0x0000000); VAR Scene = new Three.scene (); // cámara var cámara = nueva tres.tográficacamera (-5, 5, 3.75, -3.75, 0.1, 100); Camera.Position.set (25, 25, 25); Camera.lookat (nuevo tres.vector3 (0, 0, 0)); escena.add (cámara); // Light var light = new Three.Pointlight (0xffffff, 1, 100); Light.Position.set (10, 15, 5); escena.add (luz); VAR Material = nuevo tres.MeshlambertMaterial ({color: 0xffff00, emitivo: 0xff0000}); var cubo = nuevo tres.mesh (nuevo tres.cubegeometry (5, 5, 5), material); escena.add (cubo); // var sphere = new Three.mesh (nuevo tres.sphereGeometry (3, 20, 8), material); // escena.add (esfera); renderer.render (escena, cámara); } </script> </html>3. Material de Fong
El material de Phong (MeshphongMaterial) es un material que se ajusta al modelo de iluminación Phong. A diferencia de Lambert, el modelo Phong considera el efecto de la reflexión especular, por lo que es particularmente adecuado para el rendimiento de metal y espejo.
La parte de reflexión difusa y el modelo de iluminación de Lambert son el mismo, y el modelo de la parte de reflexión especular es:
Ispecular = Ks * Is * (cos(alpha)) ^ n
Entre ellos, ispecular es la intensidad de la luz reflejada por la superficie especular, KS es el coeficiente de reflexión especular de la superficie del material, es la intensidad de la fuente de luz, el alfa es el ángulo entre la luz reflejada y la línea de visión, N es el índice resaltado y cuanto más grande es el punto destacado, más pequeño será el punto más pequeño.
Dado que la parte de reflexión difusa es consistente con el modelo Lambert, si no se especifica el coeficiente de reflexión especular, pero solo se establece la reflexión difusa, el efecto es el mismo que el de Lambert:
nuevo tres.MeshphongMaterial ({Color: 0xffff00});Del mismo modo, se pueden especificar los valores emisivos y ambientales, y no se explicarán aquí. El coeficiente de reflexión especular se especifica a continuación. Primero, solo usamos reflexión especular, establecemos el resaltado en rojo y la aplicamos a una esfera:
Material var = nuevo tres.MeshphongMaterial ({especular: 0xff0000}); var sphere = new tres.mesh (nuevo tres.sphereGeGeometry (3, 20, 8), material);El efecto es:
El valor N en el modelo de iluminación se puede controlar a través del atributo de Shininess. Cuando el valor brillante es mayor, cuanto menor sea el punto de resaltado y el valor predeterminado es 30. Cuando lo establecemos en 1000:
nuevo tres.MeshphongMaterial ({especular: 0xff0000, Shininess: 1000});El efecto es:
Use luz de espejo amarillo, luz roja dispersa:
material = nuevo tres.MeshphongMaterial ({Color: 0xff0000, especular: 0xffff00, Shininess: 100});Resume las propiedades únicas del material Phong:
Ambient: Establezca el color ambiental del material y úselo con la fuente de luz Ambientlight. Este color se multiplicará por el color de la luz ambiental. Es decir, reaccionar a la fuente de luz.
Emisivo: Establezca el color emitido por el material, no una fuente de luz, sino un color que no se ve afectado por la luz. El valor predeterminado es negro
Especular: especifica el brillo del material y el color de los aspectos más destacados. Si se establece en el mismo color que la propiedad de color, se obtendrá otro material más metálico. Si se establece en gris gris, se verá como plástico.
Shininess: Especifica el brillo de la parte destacada, el valor predeterminado es 30.
Código fuente:
<! Doctype html> <html> <head> <meta charset = "utf-8"> <title> 3.js test7.3 </title> </head> <body onload = "init ()"> <Canvas id = "maincanvas"> </ Canvas> </body> <script type = "text/javaScript" src = "js/tres.min.js"> </script> <script type = "text/javascript"> function init () {var renderer = new tres.webglrenderer ({canvas: document.getElementById ('MainCanvas')}); renderer.setClearColor (0x0000000); VAR Scene = new Three.scene (); // cámara var cámara = nueva tres.tográficacamera (-5, 5, 3.75, -3.75, 0.1, 100); Camera.Position.set (25, 25, 25); Camera.lookat (nuevo tres.vector3 (0, 0, 0)); escena.add (cámara); // Light var light = new Three.pointlight (0xffffff, 1, 200); Light.Position.set (10, 15, 25); escena.add (luz); Material var = nuevo tres.MeshphongMaterial ({// especular: 0xff0000, color: 0xff0000, especular: 0xffff00, wininess: 100}); // var cube = new Three.Mesh (nuevo tres.cubegeometry (5, 5, 5), material); // escena.add (cubo); var sphere = new Three.Mesh (nuevo tres.spheregeometry (3, 20, 8), material); escena.add (esfera); renderer.render (escena, cámara); } </script> </html>Resumir
El contenido de este artículo termina aquí. El artículo presenta a Lamber y Phong en tres.js a través de ejemplos e imágenes detallados. Espero que sea útil para el aprendizaje de todos. El editor ordenará artículos relacionados en tres.js uno tras otro. Amigos interesados en tres.js, continúen apoyando a Wulin.com.