مقدمة
المواد هي خاصية تتعلق بتقديم الآثار المستقلة عن معلومات قمة الكائن. من خلال إعداد المادة ، يمكنك تغيير اللون وخريطة الملمس ووضع الإضاءة وما إلى ذلك.
Meshbasicmaterial: لا شعور بالضوء ، مما يعطي الهندسة لونًا بسيطًا أو عرضًا سلكيًا.
meshlambertmaterial: هذه المادة تستجيب للضوء وتستخدم لإنشاء كائنات خافتة وغير مضيئة.
meshphongmaterial: تتفاعل هذه المادة أيضًا مع الضوء وتستخدم لإنشاء كائنات معدنية مشرقة.
1. المواد الأساسية
استخدم كائنات المواد الأساسية ، فإن لون الكائن بعد التقديم هو دائمًا لون المادة دون تأثيرات الضوء والظلام أو الظل بسبب الإضاءة. إذا لم يكن هناك لون للمادة المحددة ، يكون اللون عشوائيًا. مُنشئه هو:
ثلاثة.
من بينها ، يمكن تخلف OPT أو هي قيمة تحتوي على كل سمة. على سبيل المثال ، قم بإنشاء مادة صفراء جديدة مع عتامة 0.75:
جديد three.meshbasicmaterial ({color: 0xffff00 ، التعتيم: 0.75}) ؛قم بتطبيقه على مكعب (انظر "Three.JS Learning Heygetry" ، التأثير هو:
رمز المصدر:
<! doctype html> <html> <head> <meta charset = "utf-8"> <title> 3.js test 7.1 </title> </head> <body onload = "init ()"> <canvas id = "maincanvas"> </body> <body> src = "js/three.min.js"> </script> <script type = "text/javaScript"> function init () {var redererer = new Three.webglrenderer ({canvas: document.getElementById ('maincanvas')}) ؛ Renderer.setClearColor (0x0000000) ؛ var scene = new Three.scene () ؛ // camera var camera = new Three.OthographicCamera (-5 ، 5 ، 3.75 ، -3.75 ، 0.1 ، 100) ؛ camera.position.set (25 ، 25 ، 25) ؛ camera.lookat (new Three.vector3 (0 ، 0 ، 0)) ؛ المشهد. add (الكاميرا) ؛ // light var light = new Three.PointLight (0xffffff ، 1 ، 100) ؛ Light.position.set (10 ، 15 ، 5) ؛ المشهد. add (الضوء) ؛ var material = new three.meshbasicmaterial ({color: 0xffff00 ، التعتيم: 0.75}) ؛ var cube = new Three.mesh (New Three.CubeGeometry (5 ، 5 ، 5) ، material) ؛ المشهد. Add (Cube) ؛ Renderer.render (المشهد ، الكاميرا) ؛ } </script> </html>العديد من الخصائص الأكثر شيوعا للمادة الأساسية :
・ مرئي: سواء كان مرئيًا ، يكون الافتراضي صحيحًا
・ الجانب: عرض الجبهة أو الجزء الخلفي من الوجه ، والافتراضي هو الثلاثة الأمامية.
・ سلكية الإطار: ما إذا كنت ستقدم خطوطًا بدلاً من الوجوه ، افتراضيًا إلى خطأ
・ اللون: لون RGB سداسي عشري ، إذا تم تمثيل اللون الأحمر كـ 0xFF0000
・ الخريطة: استخدم خرائط الملمس
بالنسبة للمواد الأساسية ، حتى إذا تم تغيير مصدر الضوء في المشهد ، فإن الكائنات التي تستخدم تلك المواد لها دائمًا نفس التأثير في اللون في كل مكان. بالطبع ، هذا ليس واقعيًا للغاية ، لذلك سنقدم نماذج إضاءة أكثر واقعية: نماذج الإضاءة Lambert ونماذج الإضاءة Phong .
2. مادة لامبر ومواد فونغ
مادة لامبرت (meshlambertmaterial) هي مادة تتوافق مع نموذج الإضاءة لامبرت. الميزة الرئيسية لنموذج الإضاءة Lambert هي أنه يعتبر فقط انعكاسًا منتشرًا ولكنه لا يعتبر تأثير الانعكاس الخاص. لذلك ، فهي ليست مناسبة للكائنات مثل المعادن والمرايا التي تتطلب انعكاسًا كبيرًا ، وهي مناسبة لتأثيرات الانعكاس المنتشر لمعظم الكائنات الأخرى.
صيغة نموذج الإضاءة هي:
idiffuse = kd * id * cos (theta)
من بينها ، idiffuse هي شدة الضوء المنتشرة ، KD هي سمة الانعكاس المنتشر لسطح الكائن ، معرف هو شدة الضوء ، و theta هو قوس زاوية الحادث للضوء.
بالطبع ، بالنسبة لمادة Lambert التي تستخدم Three.js ، لا تحتاج إلى فهم الصيغة أعلاه لاستخدامها مباشرة.
طريقة إنشاء مادة Lambert صفراء هي:
New Three.Meshlambertmaterial ({color: 0xffff00})بعد استخدام الإضاءة ، تحصل على التأثير التالي:
يستخدم اللون للتعبير عن قدرة المادة على عكس الضوء المبعثر ، وهو أيضًا السمة الأكثر استخدامًا لضبط لون المادة. بالإضافة إلى ذلك ، يمكنك أيضًا استخدام المحيط والانبعاث للتحكم في لون المادة.
يمثل المحيط قدرة الانعكاس على الضوء المحيط. هذه القيمة صالحة فقط عند تعيين AmbientLight. يتم ضرب قدرة انعكاس المادة على الضوء المحيط بواسطة شدة الضوء المحيط للحصول على اللون الفعلي للمادة.
الانبعاث هو لون ذاتي للمادة ، والذي يمكن استخدامه للتعبير عن لون مصدر الضوء. إنه ليس مصدرًا للضوء ، ولكنه لون لا يتأثر بالضوء. اللمعان الذاتي باللون الأحمر وحده:
New Three.Meshlambertmaterial ({Emitsive: 0xFF0000})التأثير هو:
إذا كنت تستخدم كل من الإضاءة ذاتية الحمراء والأصفر المبعثر:
New Three.MeshlamberTmaterial ({color: 0xffff00 ، emitive: 0xFF0000})التأثير هو:
آثار الكرة:
لخص الخصائص الفريدة لمادة لامبر:
المحيط: اضبط اللون المحيط للمادة واستخدمه مع مصدر ضوء AmbientLight. سيتم ضرب هذا اللون بلون الضوء المحيط. وهذا هو ، رد فعل على مصدر الضوء.
الانبعاث: اضبط اللون المنبعث من المادة ، وليس مصدرًا للضوء ، ولكن اللون الذي لا يتأثر بالضوء. الافتراضي أسود.
رمز المصدر:
<! doctype html> <html> <head> <meta charset = "utf-8"> <title> 3.js test7.2 </itlect> </head> <body Onload = "init ()"> <canvas id = "maincanvas"> </slanvas> </body> <tript type = "javaSctrip" src = "js/three.min.js"> </script> <script type = "text/javaScript"> function init () {var redererer = new Three.webglrenderer ({canvas: document.getElementById ('maincanvas')}) ؛ Renderer.setClearColor (0x0000000) ؛ var scene = new Three.scene () ؛ // camera var camera = new Three.OthographicCamera (-5 ، 5 ، 3.75 ، -3.75 ، 0.1 ، 100) ؛ camera.position.set (25 ، 25 ، 25) ؛ camera.lookat (new Three.vector3 (0 ، 0 ، 0)) ؛ المشهد. add (الكاميرا) ؛ // light var light = new Three.PointLight (0xffffff ، 1 ، 100) ؛ Light.position.set (10 ، 15 ، 5) ؛ المشهد. add (الضوء) ؛ var material = new three.meshlambertmaterial ({color: 0xffff00 ، emitive: 0xFF0000}) ؛ var cube = new Three.mesh (New Three.CubeGeometry (5 ، 5 ، 5) ، material) ؛ scene.add (cube) ؛ // var sphere = new Three.mesh (New Three.Spheregeometry (3 ، 20 ، 8) ، material) ؛ // scene.add (sphere) ؛ Renderer.render (المشهد ، الكاميرا) ؛ } </script> </html>3. المواد
مادة Phong (meshphongmaterial) هي مادة تتوافق مع نموذج إضاءة فونغ. على عكس Lambert ، ينظر نموذج Phong في تأثير الانعكاس الخاص ، لذلك فهو مناسب بشكل خاص لأداء المعادن والمرآة.
جزء الانعكاس المنتشر ونموذج الإضاءة Lambert هو نفسه ، ونموذج جزء الانعكاس الخاص هو:
Ispecular = Ks * Is * (cos(alpha)) ^ n
من بينها ، Ispecular هو شدة الضوء المنعكسة بالسطح الخاص ، KS هو معامل الانعكاس الخاص بسطح المادة ، هو شدة مصدر الضوء ، ألفا هي الزاوية بين الضوء المنعكس وخط البصر ، N هو مؤشر أبرز ، وأكبر بقعة تسليط الضوء ، أصغر بقعة التمييز.
نظرًا لأن جزء الانعكاس المنتشر يتسق مع نموذج Lambert ، إذا لم يتم تحديد معامل الانعكاس الخاص ، ولكن يتم تعيين انعكاس منتشر فقط ، يكون التأثير هو نفسه Lambert:
جديد three.meshphongmaterial ({color: 0xffff00}) ؛وبالمثل ، يمكن تحديد كل من القيم المبعثرة والأحياء ، ولن يتم شرحها هنا. تم تحديد معامل الانعكاس المضاربة أدناه. أولاً ، نستخدم فقط الانعكاس المضاربة ، ونضع تسليط الضوء على اللون الأحمر ، ونطبقه على كرة:
var material = new three.meshphongmaterial ({Specular: 0xFF0000}) ؛ var sphere = new Three.mesh (New Three.Spheregeometry (3 ، 20 ، 8) ، material) ؛التأثير هو:
يمكن التحكم في قيمة N في نموذج الإضاءة من خلال سمة اللمعان. عندما تكون قيمة التسلل أكبر ، كلما كانت بقعة التمييز أصغر ، والقيمة الافتراضية هي 30. عندما نضعها على 1000:
جديد three.meshphongmaterial ({specular: 0xFF0000 ، shininess: 1000}) ؛التأثير هو:
استخدم ضوء المرآة الأصفر ، الضوء المبعثر الأحمر:
material = new Three.meshphongMaterial ({color: 0xFF0000 ، Specular: 0xffff00 ، shininess: 100}) ؛لخص الخصائص الفريدة لمواد فونغ:
المحيط: اضبط اللون المحيط للمادة واستخدمه مع مصدر ضوء AmbientLight. سيتم ضرب هذا اللون بلون الضوء المحيط. وهذا هو ، رد فعل على مصدر الضوء.
الانبعاث: اضبط اللون المنبعث من المادة ، وليس مصدرًا للضوء ، ولكن اللون الذي لا يتأثر بالضوء. الافتراضي أسود
Specular: يحدد سطوع المادة ولون النقاط البارزة. إذا تم ضبطها على نفس لون خاصية اللون ، فسيتم الحصول على مادة أخرى تشبه المعدن. إذا تم ضبطه على الرمادي الرمادي ، فسيبدو مثل البلاستيك.
اللطيف: يحدد سطوع الجزء المميز ، القيمة الافتراضية هي 30.
رمز المصدر:
<! doctype html> <html> <head> <meta charset = "utf-8"> <title> 3.js test7.3 </itlem> </head> <body Onload = "init ()"> <canvas id = "maincanvas"> </slanvas> </body> <tript type = "javaScript" src = "js/three.min.js"> </script> <script type = "text/javaScript"> function init () {var redererer = new Three.webglrenderer ({canvas: document.getElementById ('maincanvas')}) ؛ Renderer.setClearColor (0x0000000) ؛ var scene = new Three.scene () ؛ // camera var camera = new Three.OthographicCamera (-5 ، 5 ، 3.75 ، -3.75 ، 0.1 ، 100) ؛ camera.position.set (25 ، 25 ، 25) ؛ camera.lookat (new Three.vector3 (0 ، 0 ، 0)) ؛ المشهد. add (الكاميرا) ؛ // light var light = new Three.PointLight (0xffffff ، 1 ، 200) ؛ Light.position.set (10 ، 15 ، 25) ؛ المشهد. add (الضوء) ؛ var material = new three.meshphongmaterial ({// specular: 0xFF0000 ، color: 0xFF0000 ، Specular: 0xffff00 ، shininess: 100}) ؛ // var cube = new Three.mesh (New Three.Cubegeometry (5 ، 5 ، 5) ، material) ؛ // scene.add (cube) ؛ var sphere = new Three.mesh (New Three.Spheregeometry (3 ، 20 ، 8) ، material) ؛ المشهد. add (المجال) ؛ Renderer.render (المشهد ، الكاميرا) ؛ } </script> </html>لخص
محتوى هذه المقالة ينتهي هنا. يقدم المقال لامبر وفونغ في ثلاثة. JS من خلال أمثلة وصور مفصلة. آمل أن يكون ذلك مفيدًا لتعلم الجميع. سيقوم المحرر بفرز المقالات ذات الصلة على ثلاثة. الأصدقاء المهتمين بـ Three.js ، يرجى الاستمرار في دعم wulin.com.