Vorwort
Material ist eine Eigenschaft, die sich auf die Renderung von Effekten unabhängig von Objektscheitelpunkten bezieht. Durch das Einstellen des Materials können Sie die Farbe, die Texturkarte, den Beleuchtungsmodus usw. des Objekts ändern.
Meshbasicmaterial: Kein Lichtsinn, wodurch Geometrie eine einfache Farbe oder Anzeige -Drahtbeamte verleiht.
MESHHAMBERTMATEILIAL: Dieses Material reagiert auf Licht und wird verwendet, um schwache und nicht leuchtende Objekte zu erzeugen.
Meshphongmaterial: Dieses Material reagiert auch auf Licht und wird verwendet, um helle Metallobjekte zu erzeugen.
1. Grundmaterial
Verwenden Sie grundlegende materielle Objekte, die Farbe des Objekts nach dem Rendering ist immer die Farbe des Materials ohne helle und dunkle oder Schatteneffekte aufgrund von Beleuchtung. Wenn das angegebene Material keine Farbe gibt, ist die Farbe zufällig. Sein Konstruktor ist:
Drei.MeshambertMaterial (OPT)
Unter ihnen kann OPT standardmäßig oder ein Wert, der jedes Attribut enthält. Erstellen Sie beispielsweise ein neues gelbes Material mit einer Deckkraft von 0,75:
neue drei.meshbasicmaterial ({Farbe: 0xffff00, Opazität: 0,75});Wenden Sie es auf einen Würfel an (siehe "Drei.JS -Lerngeometrie", der Effekt ist:
Quellcode:
<! DocType html> <html> <kopf> <meta charset = "utf-8"> <title> 3.js test 7.1 </title> </head> <body onload = "init ()"> <canvas id = "maincanvas" <script type = "text/javaScript"> Funktion init () {var renderer = new Three.Webglrenderer ({canvas: document.getElementById ('Maincanvas')}); Renderer.SetClearcolor (0x0000000); var scene = new Three.scene (); // Kamera var camera = new Three.OtographicCamera (-5, 5, 3,75, -3,75, 0,1, 100); camera.position.set (25, 25, 25); camera.lookat (neue drei.Vector3 (0, 0, 0)); Szene.Add (Kamera); // Light var light = new Three.Pointlight (0xffffff, 1, 100); Light.Position.Set (10, 15, 5); Szene.Add (Licht); var materials = new Three.Meshbasicmaterial ({Farbe: 0xffff00, Deckkraft: 0,75}); var cobe = new Three.mesh (neue drei.Cubegeometrie (5, 5, 5), Material); Szene.Add (Cube); Renderer.Render (Szene, Kamera); } </script> </html>Mehrere häufig verwendete Eigenschaften von BasicMaterial :
・ Sichtbar: Ob es sichtbar ist, der Standard ist wahr
・ Seite: Rendern Sie die Vorder- oder die Rückseite des Gesichts, die Standardeinstellung ist die vordere drei.
・ Wireframe: Ob Sie Linien anstelle von Gesichtern rendern, standardmäßig Falsch
・ Farbe: Hexadezimal -RGB -Farbe, wenn rot als 0xff0000 dargestellt wird
・ Karte: Verwenden Sie Texturkarten
Selbst wenn die Lichtquelle in der Szene geändert wird, haben die Objekte, die dieses Material verwenden, immer den gleichen Effekt in der Farbe überall. Dies ist natürlich nicht sehr realistisch, daher werden wir realistischere Beleuchtungsmodelle einführen: Lambert -Beleuchtungsmodelle und Phong -Beleuchtungsmodelle .
2. Lambermaterial und Phong -Material
Lambert -Material (Meshlambertmaterial) ist ein Material, das dem Lambert -Beleuchtungsmodell entspricht. Das Hauptmerkmal des Lambert -Beleuchtungsmodells besteht darin, dass es nur diffuse Reflexion berücksichtigt, aber nicht die Wirkung der Spiegelreflexion berücksichtigt. Daher ist es nicht für Objekte wie Metalle und Spiegel geeignet, die spiegelende Reflexion erfordern, und für die diffusen Reflexionseffekte der meisten anderen Objekte geeignet sind.
Die Beleuchtungsmodellformel lautet:
Idiffuse = kd * id * cos (theta)
Unter ihnen ist Idiffuse die diffuse Lichtintensität, KD ist das diffuse Reflexionsmerkmal der Objektoberfläche, ID die Lichtintensität und Theta ist der einfallende Winkelbogen von Licht.
Natürlich müssen Sie für Lambert -Material mit drei.Js die obige Formel nicht verstehen, um sie direkt zu verwenden.
Die Methode zur Erstellung eines gelben Lambert -Materials lautet:
Neue drei.MesHlambertMaterial ({Farbe: 0xffff00})Nach der Beleuchtung erhalten Sie den folgenden Effekt:
Farbe wird verwendet, um die Fähigkeit des Materials auszudrücken, gestreutes Licht reflektiert zu werden, und ist auch das am häufigsten verwendete Attribut, um die Farbe des Materials einzustellen. Darüber hinaus können Sie auch Umgebungs- und Emissionsfarben verwenden, um die Farbe des Materials zu steuern.
Umgebung stellt die Reflexionsfähigkeit des Umgebungslichts dar. Dieser Wert ist nur gültig, wenn Ambientlight festgelegt ist. Die Reflexionsfähigkeit des Materials zum Umgebungslicht wird mit der Intensität der Umgebungslicht multipliziert, um die tatsächliche Farbe des Materials zu erhalten.
Die Emission ist eine selbstleuchtende Farbe des Materials, mit der die Farbe der Lichtquelle ausdrückt werden kann. Es ist keine Lichtquelle, sondern eine Farbe, die nicht vom Licht beeinflusst wird. Selbstlumineszenz allein in Rot:
Neue drei.MesHlambertMaterial ({emitsive: 0xff0000})Der Effekt ist:
Wenn Sie sowohl rotes selbstleuchtendes als auch gelb gestreutes Licht verwenden:
NEU TREIS.MESHHAMBERTMATERIAL ({Farbe: 0xffff00, emita: 0xff0000})Der Effekt ist:
Auswirkungen der Sphäre:
Fassen Sie die einzigartigen Eigenschaften von Lambermaterial zusammen:
Ambient: Stellen Sie die Umgebungsfarbe des Materials ein und verwenden Sie es mit der Ambientlight -Lichtquelle. Diese Farbe wird mit der Farbe der Umgebungslicht multipliziert. Das heißt, reagiert auf die Lichtquelle.
Emission: Setzen Sie die vom Material emittierte Farbe, nicht eine Lichtquelle, sondern eine Farbe, die nicht vom Licht beeinflusst wird. Standard ist schwarz.
Quellcode:
<! DocType html> <html> <head> <meta charset = "utf-8"> <title> 3.js test7.2 </title> </head> <body onload = "init ()"> <canvas id = "maincanvas" <script type = "text/javaScript"> Funktion init () {var renderer = new Three.Webglrenderer ({canvas: document.getElementById ('Maincanvas')}); Renderer.SetClearcolor (0x0000000); var scene = new Three.scene (); // Kamera var camera = new Three.OtographicCamera (-5, 5, 3,75, -3,75, 0,1, 100); camera.position.set (25, 25, 25); camera.lookat (neue drei.Vector3 (0, 0, 0)); Szene.Add (Kamera); // Light var light = new Three.Pointlight (0xffffff, 1, 100); Light.Position.Set (10, 15, 5); Szene.Add (Licht); var materials = new Three.MesHlambertMaterial ({color: 0xffff00, emita: 0xff0000}); var cobe = new Three.mesh (neue drei.Cubegeometrie (5, 5, 5), Material); Szene.Add (Cube); // var sphere = new Three.mesh (new Three.SphereGeometry (3, 20, 8), Material); // szene.add (Sphere); Renderer.Render (Szene, Kamera); } </script> </html>3.Phong Material
Phong -Material (Meshphongmaterial) ist ein Material, das dem Phong -Beleuchtungsmodell entspricht. Im Gegensatz zu Lambert berücksichtigt das Phong -Modell den Effekt der Spiegelreflexion und eignet sich daher besonders für die Metall- und Spiegelleistung.
Das diffuse Reflexionsteil und das Lambert -Beleuchtungsmodell sind gleich, und das Modell des Spiegelreflexionsteils ist:
Ispecular = Ks * Is * (cos(alpha)) ^ n
Unter ihnen ist Isspekular die Lichtintensität, die von der Spiegeloberfläche reflektiert wird, KS ist der spiegelende Reflexionskoeffizient der materiellen Oberfläche, ist die Lichtquellenintensität, Alpha ist der Winkel zwischen dem reflektierten Licht und der Sichtlinie, n ist der Highlight -Index und desto größer die Highlight -Fleck, desto kleiner die Höhe der Highlight.
Da der diffuse Reflexionsteil mit dem Lambert -Modell übereinstimmt, ist der Effekt der Effekt wie der von Lambert:
Neue drei.MeshpHongMaterial ({Farbe: 0xffff00});In ähnlicher Weise können sowohl emissionende als auch Umgebungswerte angegeben werden und werden hier nicht erklärt. Der Spiegelreflexionskoeffizient ist unten angegeben. Zunächst verwenden wir nur Specular Reflection, setzen das Highlight auf rot und wenden sie auf eine Kugel an:
var materials = new Three.meshPhongMaterial ({Specular: 0xff0000}); var sphere = new Three.mesh (neue drei.Spheregometrie (3, 20, 8), Material);Der Effekt ist:
Der N-Wert im Beleuchtungsmodell kann durch das Glanzattribut gesteuert werden. Wenn der Glanzwert größer ist, ist der Fleck des Highlight umso kleiner und der Standardwert 30. Wenn wir ihn auf 1000 einstellen:
Neue drei.MeshPhongMaterial ({Specular: 0xff0000, Glanz: 1000});Der Effekt ist:
Verwenden Sie gelbes Spiegellicht, rot gestreutes Licht:
Material = new Three.MeshPhongMaterial ({Farbe: 0xff0000, spiegelbar: 0xffff00, glänzend: 100});Fassen Sie die einzigartigen Eigenschaften von Phong -Material zusammen:
Ambient: Stellen Sie die Umgebungsfarbe des Materials ein und verwenden Sie es mit der Ambientlight -Lichtquelle. Diese Farbe wird mit der Farbe der Umgebungslicht multipliziert. Das heißt, reagiert auf die Lichtquelle.
Emission: Setzen Sie die vom Material emittierte Farbe, nicht eine Lichtquelle, sondern eine Farbe, die nicht vom Licht beeinflusst wird. Standard ist schwarz
Spekuliert: Gibt die Helligkeit des Materials und die Farbe der Highlights an. Wenn Sie auf die gleiche Farbe wie die Farbeigenschaft eingestellt sind, wird ein weiteres metallartiges Material erhalten. Wenn es auf Grau eingestellt ist, sieht es wie Plastik aus.
Glanz: Gibt die Helligkeit des Highlight -Teils an, der Standardwert beträgt 30.
Quellcode:
<! DocType html> <html> <head> <meta charset = "utf-8"> <title> 3.js test7.3 </title> </head> <body onload = "init ()"> <canvas id = "maincanvas" <script type = "text/javaScript"> Funktion init () {var renderer = new Three.Webglrenderer ({canvas: document.getElementById ('Maincanvas')}); Renderer.SetClearcolor (0x0000000); var scene = new Three.scene (); // Kamera var camera = new Three.OtographicCamera (-5, 5, 3,75, -3,75, 0,1, 100); camera.position.set (25, 25, 25); camera.lookat (neue drei.Vector3 (0, 0, 0)); Szene.Add (Kamera); // Light var light = new Three.Pointlight (0xffffff, 1, 200); Light.Position.Set (10, 15, 25); Szene.Add (Licht); var materials = new Three.MeshPhongMaterial ({// specular: 0xff0000, Farbe: 0xff0000, specular: 0xffff00, glänzend: 100}); // var cobe = new Three.mesh (new Three.CubeGeometry (5, 5, 5), Material); // szene.add (cube); var sphere = new Three.mesh (neue drei.Spheregometrie (3, 20, 8), Material); Szene.Add (Sphäre); Renderer.Render (Szene, Kamera); } </script> </html>Zusammenfassen
Der Inhalt dieses Artikels endet hier. Der Artikel führt Lamber und Phong in drei.Js durch detaillierte Beispiele und Bilder vor. Ich hoffe, es wird für das Lernen aller hilfreich sein. Der Herausgeber sortiert verwandte Artikel auf drei.js nacheinander aus. Freunde, die an drei.js interessiert sind, unterstützen bitte weiterhin Wulin.com.