Préface
Le matériel est une propriété liée aux effets de rendu indépendamment des informations sur le sommet d'objet. En définissant le matériau, vous pouvez modifier la couleur, la carte de texture, le mode d'éclairage, etc. de l'objet.
MeshbasicMaterial: Pas de sens de la lumière, donnant à la géométrie une couleur simple ou affiche le filaire.
MeshlambertMaterial: Ce matériau est sensible à la lumière et est utilisé pour créer des objets sombres et non lumineux.
Meshphongmaterial: Ce matériau réagit également à la lumière et est utilisé pour créer des objets métalliques brillants.
1. Matériaux de base
Utilisez des objets de matériau de base, la couleur de l'objet après le rendu est toujours la couleur du matériau sans effets clairs et sombres ou ombragés en raison de l'éclairage. S'il n'y a pas de couleur pour le matériau spécifié, la couleur est aléatoire. Son constructeur est:
Trois.MeshlambertMaterial (OPT)
Parmi eux, OPT peut être par défaut ou est une valeur contenant chaque attribut. Par exemple, créez un nouveau matériau jaune avec une opacité de 0,75:
new Three.MeshBasicMaterial ({couleur: 0xffff00, opacité: 0,75});Appliquez-le à un cube (voir "Three.js Géométrie d'apprentissage", l'effet est:
Code source:
<! Doctype html> <html> <éadf> <meta charset = "utf-8"> <tight> 3.js test 7.1 </ title> </ head> <body onload = "init ()"> <canvas id = "MainCanvas"> </ Canvas> <script type = "text / javascript"> function init () {var renderer = new Three.WebglRenderer ({canvas: document.getElementById ('MainCanvas')}); renderer.setClearColor (0x0000000); var scene = new Three.Scene (); // caméra var caméra = new Three.othographicaMamera (-5, 5, 3,75, -3,75, 0,1, 100); caméra.position.set (25, 25, 25); caméra.lookat (new Three.Vector3 (0, 0, 0)); scene.add (caméra); // Light Var Light = new Three.pointlight (0xffffff, 1, 100); Light.Position.set (10, 15, 5); scene.add (lumière); var Material = new Three.MeshBasicMaterial ({couleur: 0xffff00, opacité: 0,75}); var cube = new Three.Mesh (new Three.CubeGeométrie (5, 5, 5), matériel); scene.add (cube); renderer.render (scène, appareil photo); } </ script> </html>Plusieurs propriétés plus couramment utilisées de BasicMaterial :
・ Visible: s'il est visible, la valeur par défaut est vraie
・ Côté: rendez l'avant ou l'arrière du visage, la valeur par défaut est les trois avant.
・ Wireframe: s'il faut rendre des lignes au lieu des visages, par défaut
・ Couleur: couleur RVB hexadécimale, si le rouge est représenté comme 0xff0000
・ Carte: utilisez des cartes de texture
Pour les matériaux de base, même si la source lumineuse de la scène est modifiée, les objets utilisant ce matériau ont toujours le même effet dans la couleur partout. Bien sûr, ce n'est pas très réaliste, donc nous présenterons des modèles d'éclairage plus réalistes: modèles d'éclairage de Lambert et modèles d'éclairage Phong .
2. Matériau de Lamber et matériau Phong
Lambert Material (MeshlambertMaterial) est un matériau conforme au modèle d'éclairage de Lambert. La principale caractéristique du modèle d'éclairage de Lambert est qu'elle ne considère que la réflexion diffuse mais ne considère pas l'effet de la réflexion spéculaire. Par conséquent, il ne convient pas aux objets tels que les métaux et les miroirs qui nécessitent une réflexion spéculaire, et convient aux effets de réflexion diffus de la plupart des autres objets.
La formule du modèle d'éclairage est:
Idiffuse = kd * id * cos (theta)
Parmi eux, idiffuse est l'intensité diffuse de la lumière, KD est l'attribut de réflexion diffus de la surface de l'objet, l'ID est l'intensité de la lumière et le thêta est l'arc d'angle incident de la lumière.
Bien sûr, pour le matériel Lambert en utilisant trois.js, vous n'avez pas besoin de comprendre la formule ci-dessus pour l'utiliser directement.
La méthode pour créer un matériau Lambert jaune est:
Nouveau trois.MeshlambertMaterial ({couleur: 0xffff00})Après avoir utilisé l'éclairage, vous obtenez l'effet suivant:
La couleur est utilisée pour exprimer la capacité du matériau à refléter la lumière diffusée, et est également l'attribut le plus couramment utilisé pour définir la couleur du matériau. De plus, vous pouvez également utiliser ambiant et émissif pour contrôler la couleur du matériau.
Ambient représente la capacité de réflexion à la lumière ambiante. Cette valeur n'est valide que lorsque Ambientlight est défini. La capacité de réflexion du matériau à la lumière ambiante est multipliée par l'intensité de la lumière ambiante pour obtenir la couleur réelle du matériau.
L'émission est une couleur auto-lumineuse du matériau, qui peut être utilisée pour exprimer la couleur de la source lumineuse. Ce n'est pas une source lumineuse, mais une couleur qui n'est pas affectée par la lumière. Auto-luminescence en rouge seul:
Nouveau trois.MeshlambertMaterial ({émissif: 0xff0000})L'effet est:
Si vous utilisez à la fois une lumière diffusée rouge et jaune rouge:
Nouveau trois.MeshlambertMaterial ({Color: 0xffff00, EMITIVE: 0xFF0000})L'effet est:
Effets de la sphère:
Résumez les propriétés uniques du matériau de Lamber:
Ambient: Réglez la couleur ambiante du matériau et utilisez-la avec la source de lumière Ambientlight. Cette couleur sera multipliée par la couleur lumineuse ambiante. C'est-à-dire réagir à la source lumineuse.
Émissif: réglez la couleur émise par le matériau, pas par une source lumineuse, mais une couleur qui n'est pas affectée par la lumière. La valeur par défaut est noire.
Code source:
<! Doctype html> <html> <éadf> <meta charset = "utf-8"> <tight> 3.js test7.2 </ title> </ head> <body onload = "init ()"> <canvas id = "MainCanvas"> </ Canvas> </body> <script type = "text / javascript" src = "js / trois.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 (); // caméra var caméra = new Three.othographicaMamera (-5, 5, 3,75, -3,75, 0,1, 100); caméra.position.set (25, 25, 25); caméra.lookat (new Three.Vector3 (0, 0, 0)); scene.add (caméra); // Light Var Light = new Three.pointlight (0xffffff, 1, 100); Light.Position.set (10, 15, 5); scene.add (lumière); var Material = new Three.MeshlambertMaterial ({Color: 0xffff00, EMITIVE: 0xFF0000}); var cube = new Three.Mesh (new Three.CubeGeométrie (5, 5, 5), matériel); scene.add (cube); // var sphère = new Three.Mesh (new Three.spheregeometry (3, 20, 8), matériel); // Scene.add (sphère); renderer.render (scène, appareil photo); } </ script> </html>3.Phong Matériau
Le matériau Phong (Meshphongmaterial) est un matériau conforme au modèle d'éclairage Phong. Contrairement à Lambert, le modèle Phong considère l'effet de la réflexion spéculaire, il convient donc particulièrement aux performances du métal et du miroir.
La partie de réflexion diffuse et le modèle d'éclairage de Lambert sont les mêmes, et le modèle de la pièce de réflexion spéculaire est:
Ispecular = Ks * Is * (cos(alpha)) ^ n
Parmi eux, l'ispéculaire est l'intensité lumineuse réfléchie par la surface spéculaire, KS est le coefficient de réflexion spéculaire de la surface du matériau, est l'intensité de la source de lumière, l'alpha est l'angle entre la lumière réfléchie et la ligne de vue, N est l'indice de surbrillance, et plus le point de surbrillance est grand, plus le point de surbrillance est petit.
Étant donné que la partie de réflexion diffuse est cohérente avec le modèle Lambert, si le coefficient de réflexion spéculaire n'est pas spécifié, mais que seule la réflexion diffuse est définie, l'effet est le même que celui de Lambert:
nouveau trois.MeshPhongMaterial ({couleur: 0xffff00});De même, les valeurs émissives et ambiantes peuvent être spécifiées et ne seront pas expliquées ici. Le coefficient de réflexion spéculaire est spécifié ci-dessous. Tout d'abord, nous utilisons uniquement la réflexion spéculaire, définissons le point culminant sur rouge et l'appliquons à une sphère:
Var Material = new Three.MeshPhongMaterial ({Spectar: 0xFF0000}); var sphère = new Three.Mesh (new Three.Spheregeométrie (3, 20, 8), matériau);L'effet est:
La valeur N dans le modèle d'éclairage peut être contrôlée par l'attribut de brillance. Lorsque la valeur de la brillance est plus grande, plus la tache de la surbrillance est petite et la valeur par défaut est de 30. Lorsque nous la réglons à 1000:
Nouveau trois.MeshPhongMaterial ({Spectar: 0xFF0000, brillance: 1000});L'effet est:
Utilisez la lumière du miroir jaune et la lumière diffusée rouge:
MATÉRIAUX = nouveau trois.MeshPhongMaterial ({couleur: 0xff0000, spéculatif: 0xffff00, brillance: 100});Résumez les propriétés uniques du matériel Phong:
Ambient: Réglez la couleur ambiante du matériau et utilisez-la avec la source de lumière Ambientlight. Cette couleur sera multipliée par la couleur lumineuse ambiante. C'est-à-dire réagir à la source lumineuse.
Émissif: réglez la couleur émise par le matériau, pas par une source lumineuse, mais une couleur qui n'est pas affectée par la lumière. La valeur par défaut est noire
Speculaire: spécifie la luminosité du matériau et la couleur des reflets. S'il est réglé sur la même couleur que la propriété de couleur, un autre matériau plus en métal sera obtenu. S'il est réglé sur gris gris, il ressemblera à du plastique.
Shinness: Spécifie la luminosité de la partie clôturée, la valeur par défaut est de 30.
Code source:
<! Doctype html> <html> <éadf> <meta charset = "utf-8"> <tight> 3.js test7.3 </ title> </ head> <body onload = "init ()"> <canvas id = "MainCanvas"> </ Canvas> </body> <script type = "text / javascript" src = "js / trois.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 (); // caméra var caméra = new Three.othographicaMamera (-5, 5, 3,75, -3,75, 0,1, 100); caméra.position.set (25, 25, 25); caméra.lookat (new Three.Vector3 (0, 0, 0)); scene.add (caméra); // Light var Light = new Three.pointlight (0xffffff, 1, 200); Light.Position.set (10, 15, 25); scene.add (lumière); Var Material = new Three.MeshPhongMaterial ({// Spectar: 0xFF0000, Couleur: 0xFF0000, Spectar: 0xFFFF00, brillance: 100}); // var cube = new Three.Mesh (new Three.Cubegeometry (5, 5, 5), matériel); // Scene.Add (cube); var sphère = new Three.Mesh (new Three.Spheregeométrie (3, 20, 8), matériel); scene.add (sphère); renderer.render (scène, appareil photo); } </ script> </html>Résumer
Le contenu de cet article se termine ici. L'article présente Lamber et Phong en trois.js à travers des exemples et des images détaillés. J'espère que cela sera utile à l'apprentissage de tous. L'éditeur triera les articles connexes sur trois.js les uns après les autres. Amis qui s'intéresse à trois.js, continuez à soutenir wulin.com.