مقدمة
تشرح هذه المقالة بشكل أساسي المفاهيم ذات الصلة لـ Three.JS وتساعد القراء على تطوير فهم كامل نسبيًا لثلاثة. JS والمعرفة ذات الصلة.
تطورت الويب بسرعة في السنوات الأخيرة. مع شعبية HTML5 ، أصبحت إمكانيات الأداء لصفحات الويب أكثر قوة. هناك بالفعل العديد من الرسوم المتحركة المعقدة والتأثيرات الرائعة على صفحة الويب.
لكن الناس دائما جشع. لذا ، ماذا يمكن القيام به فوق هذا؟ واحد منهم هو رسم الرسومات ثلاثية الأبعاد عالية الأداء في صفحات الويب من خلال WebGL.
OpenGL ، WebGL إلى Three.js
ربما سمع الكثير من الناس عن OpenGL ، وهي مكتبة الرسومات عبر المنصات الأكثر استخدامًا.
WebGL هو معيار رسومات موجه نحو الويب الذي صممه OpenGL ، ويوفر سلسلة من واجهات برمجة تطبيقات JavaScript التي سيتم من خلالها تقديم الرسومات لتحقيق أداء أعلى.
Three.js هي مكتبة رسومات سهلة الاستخدام تتشكل من خلال تغليف وتبسيط واجهة WebGL.
بعبارة ببساطة: يمكن اعتبار WebGL واجهة مقدمة من المتصفح. في JavaScript ، يمكن استخدام واجهات برمجة التطبيقات هذه مباشرة لرسم الرسومات ثلاثية الأبعاد ؛ و Three.js يساعدنا في تغليف هذه الواجهات لتكون أكثر فائدة.
مقارنة WebGL و Three.js
بما أن لدينا WebGL ، لماذا ما زلنا بحاجة إلى ثلاثة.
وذلك لأن عتبة WebGL مرتفعة نسبيًا وتتطلب معرفة رياضية أكثر نسبيًا. على الرغم من أن WebGL يوفر واجهة برمجة تطبيقات أمامية ، إلا أن WebGL وتطوير الواجهة الأمامية هي في الأساس اتجاهين مختلفين ، وهناك القليل من التداخل في المعرفة. الأهمية هي أنها جميعها على منصة الويب وأنها جميعًا تستخدم JavaScript. قد يكون المبرمج الأمامي على دراية بالهندسة التحليلية ، ولكن يجب أن يكون هناك عدد قليل جدًا من الذين ما زالوا على دراية بالجبر الخطي (على سبيل المثال ، محاولة إيجاد مصفوفة عكسية لتحويل الأغراض؟) ، ناهيك عن التأكيد على الأهمية المادية لعمليات المصفوفة ، والتي هي أيضًا مفقودة نسبيًا في التدريس.
لذلك ، من الصعب للغاية على المهندسين الأماميين البدء مع WebGL في وقت قصير.
لذلك ، لدى Three.js تغليف جيد جدًا للواجهة التي يوفرها WebGL ، مما يؤدي إلى تبسيط العديد من التفاصيل وتقليل تكاليف التعلم بشكل كبير. وهناك خسارة ضئيلة للمرونة في WebGL.
لذلك ، فإن البدء بـ Three.js يستحق التوصية ، مما يتيح لك مواجهة معظم سيناريوهات الطلب بعد دراسة أقصر.
Three.js مشاكل التعلم
البدء مع Three.js بسيط نسبيًا ، ولكن عندما نتعلم حقًا ، سنجد مشكلة محرجة: هناك القليل من المواد التعليمية ذات الصلة.
عادةً ما تحتوي هذه المكتبة الشائعة على مستندات كاملة للغاية ، وغالبًا ما تكون أفضل طريقة للتعلم من المستندات الرسمية أو البرامج التعليمية الرسمية. لكن ثلاثة ليست كذلك ، فإن وثائقها موجزة للغاية للمبتدئين.
ومع ذلك ، يوفر المسؤول مجموعة متنوعة غنية جدًا من الأمثلة ، وينعكس جميع الاستخدامات التي تحتاجها تقريبًا في مثال معين. لكن هذه الأمثلة ليست مناسبة للبدء ، ولكنها مناسبة لمزيد من التعلم بعد البدء.
فيما يلي بعض البرامج التعليمية الجيدة نسبيًا:
ثلاثة. JS دليل البدء
هذا برنامج تعليمي تمهيدي جيد الوزن لثلاثة. يتمتع المؤلف بأسلوب كتابة جيد للغاية ويتم تفسير المعرفة الأساسية بشكل واضح وسهلة الفهم.
دليل تطوير Three.JS (النسخة الصينية الأولى)
تعلم ثلاثة. js- الطبعة الثانية
تعلم Three.JS: مكتبة JavaScript 3D لـ WebGL هي الكتاب القليلة والأفضل تمهيديًا من Three.js ، والذي يشرح الوظائف المختلفة لـ Three.js بطريقة أكثر شمولاً .
إذا كانت لديك القدرة ، فمن المستحسن قراءة الإصدار الثاني من الإصدار الإنجليزية ، الذي تم نشره في عام 2015 ، وهو مختلف جدًا عن Three.js الحالي.
تتم ترجمة النسخة الصينية من الإصدار الأول من الكتاب الأصلي المنشور في عام 2012. معظم المفاهيم قابلة للتطبيق ، ولكن العديد من التفاصيل قد تغيرت.
Three.JS البرنامج التعليمي
هذه ترجمة لبرنامج تعليمي أجنبي ، مع ما مجموعه ستة مقالات . لا أشرح الكثير ، لكن الأمر يتعلق بكيفية استخدام كل وظيفة أساسية. إنه أكثر ملاءمة للطلاب الذين لديهم بعض مؤسسات الرسومات.
بالطبع ، هذه المواد بالتأكيد ليست كافية خلال عملية التعلم الفعلية. عند مواجهة المشكلات ، لا يزال يتعين عليك التحقق من المواد بنفسك. ومع ذلك ، أود أن أذكرك بأن Three.js يتم تحديثها بشكل متكرر ، والآن هو إصدار R80. منذ إصدار R1 في أبريل 2010 ، هذا هو الإصدار 72 (تم تخطي بعض أرقام الإصدار في الوسط). لذلك ، قد لا تكون بعض المعلومات الموجودة على الإنترنت مناسبة للإصدار الحالي ، لذلك تحتاج إلى الانتباه إلى التعريف (المعلومات الموصى بها مسبقًا لديها أيضًا مثل هذه المشكلات).
بعض المفاهيم في ثلاثة.
لعرض رسومات ثلاثية الأبعاد على الشاشة ، تكون الفكرة عمومًا مثل هذا:
بناء مساحة ثلاثية الأبعاد
في ثلاثة ، يطلق عليه المشهد (المشهد) لتحديد نقطة مراقبة وتحديد اتجاه/زاوية المراقبة ، إلخ.
ثلاثة يدعوها الكاميرا (الكاميرا) لإضافة كائنات للمراقبة إلى المشهد
هناك العديد من أنواع الكائنات في ثلاثة ، بما في ذلك شبكة ، خط ، نقاط ، إلخ. جميعها ترث من فئة Object3D تجعل المشهد المرصود إلى منطقة محددة على الشاشة.
استخدم العارض في ثلاثة للقيام بذلك
دعونا نلقي نظرة على هذه المفاهيم بثلاثة بالتفصيل.
مشهد
المشهد عبارة عن حاوية لجميع الكائنات ، كما أنه يتوافق مع العالم ثلاثي الأبعاد الذي ننشئه.
نظام إحداثيات الكاميرا
الكاميرا مراقب في العالم ثلاثي الأبعاد. من أجل مراقبة هذا العالم ، يجب علينا أولاً وصف الموقف في الفضاء.
يتم استخدام نظام الإحداثيات اليمنى المشتركة في ثلاثة.
إسقاط ثلاثي الأبعاد
هناك نوعان من الكاميرات في ثلاث ، وهما كاميرا الإسقاط الهجائية ثلاثة. الكاميرا الرئوية وكاميرا عرض المنظور ثلاثة.
يظهر الفرق بين الإسقاط المتعامد وإسقاط المنظور في الشكل أعلاه. الصورة اليسرى هي إسقاط متعامد. يتم عرض الضوء المنبعث من الكائن بالتوازي مع الشاشة ، والمربعات البعيدة والقريبة هي نفس الحجم ؛ الصورة الصحيحة هي إسقاط منظور ، وهو كبير في القريب والصغيرة في أقصى حد وصغيرة ، والذي يتماشى مع شعورنا المعتاد بالنظر إلى الأشياء.
ويكيبيديا: الإسقاط ثلاثي الأبعاد
كاميرا الإسقاط المتعامد
ملاحظة: تتوافق "وجهة النظر" في الشكل مع الكاميرا في ثلاثة.
هنا نضيف مفهومًا للجسم البصري: الجسم البصري هو جسم هندسي ، وسيتم رؤية الأشياء فقط في الجسم البصري ، وسيتم قطع الأشياء خارج الجسم البصري. هذا هو إزالة العمليات غير الضرورية.
يعد جسم عرض كاميرا الإسقاط الإملائي مكعبًا. مُنشئ EthrographicCamera هو كما يلي: EthrographicCamera (يسار ، يمين ، أعلى ، أسفل ، بالقرب ، بعيدًا)
يمكن اعتبار الكاميرا نفسها نقطة ، بينما يشير اليسار إلى المسافة بين الطائرة اليسرى والكاميرا في الاتجاه الأيسر والأيمن. وينطبق الشيء نفسه على المعلمات الأخرى. لذلك ، تحدد المعلمات الستة مواقف الوجوه الستة لجسم المشاهدة على التوالي.
يمكن افتراض تقريبًا أن الكائنات في جسم المشاهدة يتم إسقاطها بالتوازي مع المستوى القريب ، ثم يتم تقديم الصور الموجودة على المستوى القريب على الشاشة.
كاميرا إسقاط المنظور
جسم عرض كاميرا الإسقاط المنظور هو منصة من أربع حافة ، ومُنشئها على النحو التالي: PerspectiveCamera (FOV ، الجانب ، بالقرب ، بعيدًا)
يتوافق FOV مع المنظور في الشكل ، وهو الزاوية بين الجانبين العلوي والسفلي. الجانب هو نسبة العرض إلى الارتفاع للطائرة القريبة. إضافة المسافة القريبة من الطائرة بالقرب من المسافة البعيدة ، وهي الطريقة الوحيدة لتحديد المشهد البصري.
تتوافق كاميرات الإسقاط المنظور مع شعورنا المعتاد بمشاهدة الأشياء ، لذلك في معظم الحالات ، نستخدم كاميرات الإسقاط المنظور لإظهار التأثيرات ثلاثية الأبعاد.
أشياء
مع الكاميرا ، عليك أن تنظر إلى شيء ما ، أليس كذلك؟ أضف بعض الكائنات إلى المشهد.
هناك العديد من الكائنات للعرض في ثلاثة ، وكلها موروثة من فئة Object3D. هنا ننظر أساسا إلى الشبكة والنقاط.
شبكة
نعلم جميعًا أنه في عالم الكمبيوتر ، يتم توصيل القوس بواسطة مقطع خط محدود يتكون من نقاط محدودة. عندما يكون هناك العديد من الخطوط ، يبدو وكأنه قوس ناعم.
النموذج ثلاثي الأبعاد في أجهزة الكمبيوتر متشابهة. الممارسة الشائعة هي وصفها باستخدام شبكة من المثلثات. نسمي هذا النموذج نموذج الشبكة.
هذا هو أرنب ستانفورد الشهير. يشبه موقعه في الرسومات ثلاثية الأبعاد موقع لينا ، وهو مجال معروف لمعالجة الصور الرقمية.
انظر إلى هذا الأرنب ، مع زيادة عدد المثلثات ، يصبح سطحه أكثر سلاسة/دقيقة.
في الثالثة ، يكون مُنشئ الشبكة كما يلي: شبكة (هندسة ، مواد)
الهندسة هي شكلها ، والمواد هي المواد.
ليس فقط الشبكة ، يتم استخدام هذين الخصائص لإنشاء العديد من الكائنات. دعنا نلقي نظرة على هاتين الأمتين المهمة.
الهندسة
الهندسة ، الشكل ، بديهية للغاية. يستخدم Geometry النموذج لتخزين مجموعة النقاط والعلاقة بين النقاط (التي تشكل مثلثًا) لتحقيق الغرض من وصف شكل كائن.
يوفر Three العديد من الأشكال الأساسية مثل المكعبات (في الواقع المكعبات) ، والطائرات (المستطيلات في الواقع) ، والكرات ، والدوائر ، والأسطوانات ، والجداول المستديرة ؛
يمكنك أيضًا بناء الأشكال عن طريق تحديد موضع كل نقطة بنفسك ؛
بالنسبة للأشكال الأكثر تعقيدًا ، يمكننا أيضًا استيرادها من خلال ملفات النماذج الخارجية.
مادة
المواد ، المادة ، وهذا ليس بديهية مثل الشكل.
المواد هي في الواقع مجموعة من جميع السمات البصرية باستثناء شكل سطح الكائن ، مثل اللون والملمس والنعومة والشفافية والانعكاس ومؤشر الانكسار واللمعان.
سنتحدث هنا عن العلاقة بين المواد والخريطة والملمس.
تم ذكر المواد أعلاه ، وتشمل الخرائط وغيرها.
الملصقات هي في الواقع "لصق" و "لصق" ، والتي تتضمن الصور ومكان نشر الصور.
أما بالنسبة للملمس ، فهي في الواقع "صورة".
يقدم Three مجموعة متنوعة من المواد للاختيار من بينها ، ويمكنها اختيار الانعكاس المنتشر/المضاربة بحرية ومواد أخرى.
نقاط
بعد الحديث عن شبكة ، دعونا نلقي نظرة على كائن آخر - نقاط.
النقاط هي في الواقع مجموعة من مجموعة من النقاط. كان يطلق عليه الجسيمات لفترة طويلة من قبل. تمت إعادة تسمية PointCloud في إصدار R68 ، وتم إعادة تسمية النقاط في إصدار R72. يرجع تغيير الاسم بشكل أساسي لأن Mr.Doob يعتقد أن أنظمة الجسيمات يجب أن تكون نظامًا كاملاً يتضمن معالجة الجسيمات والخصائص الفيزيائية ذات الصلة ، في حين أن النقاط في ثلاثة أبسط بكثير. لذلك في النهاية يدعى هذا الفصل نقاط.
التأثير النموذجي الذي يمكن استخدام النقاط لتحقيقه هو: المثال الرسمي
ضوء
قال الله: يجب أن يكون هناك ضوء!
تأثير الضوء والظل هو عامل مهم يثري الصورة.
يوفر Three مجموعة متنوعة من مصادر الضوء بما في ذلك ضوء محيط الضوء المحيط ، وضوء المصدر المصدر النقطة ، وأضواء كاشفة ، واتجاه خفيف الاتجاه ، وضوء نصف الكرة الأرضي والضوء الآخر.
فقط أضف مصدر الضوء المطلوب إلى المشهد.
العارض
تم بناء كائنات مختلفة في المشهد والضوء والكاميرات التي تلاحظ الأشياء ، فقد حان الوقت لتقديم ما تراه على الشاشة. هذا ما يقدمه.
يربط العارض كائن قماش ويمكنه تعيين خصائص مثل الحجم ولون الخلفية الافتراضي وما إلى ذلك.
اتصل بوظيفة عرض العارض ، مررًا في المشهد والكاميرا ، ويمكنك تقديم الصورة إلى قماش.
اجعل الصورة تحرك
الآن ، يمكن الحصول على صورة ثابتة ، كيف يمكن أن تتحرك؟
فكرة بسيطة للغاية هي تغيير الموضع والزاوية والخصائص المختلفة للكائن في المشهد ، ثم استدعاء وظيفة العرض لتقديمها.
فكيف تحدد توقيت إعادة الإشارة؟
يوفر لنا HTML5 طلب requestAnimFrame ، والذي يتصل تلقائيًا بالوظيفة التي تم تمريرها قبل كل صفحة من إعادة صياغة.
إذا قدمنا هذا في البداية:
Function Render () {Renderer.render (مشهد ، كاميرا) ؛}فقط قم بتغييره إلى هذا:
الدالة render () {requestAnimationFrame (render) ؛ Object.position.x += 1 ؛ Renderer.render (المشهد ، الكاميرا) ؛}يمكن أن يتحرك الكائن!
إعطاء الكستناء
دعنا نستخدم مثالًا بسيطًا لفرز هذه العملية.
أولاً ، اكتب صفحة مع عناصر قماش.
<! doctype html> <html> <head> <meta charset = "utf-8"> <title> cube </itlect> <script src = "http://sqimg.qq.com/qq_product_operations/mma/javanli_test/lib/there html ، الجسم {margin: 0 ؛ الحشو: 0 ؛ } #three_canvas {position: absolute ؛ العرض: 100 ٪ ؛ الارتفاع: 100 ٪ } </style> </head> <body> <canvas id = "three_canvas"> </canvas> </body> </html>دعونا نفعل الجزء JavaScript أدناه
تهيئة Renderer أولاً
الدالة initRenderer () {width = document.getElementById ('three_canvas'). clientwidth ؛ الارتفاع = document.getElementById ('three_canvas'). clientHeight ؛ العارض = جديد three.webglrenderer ({// bind canvas إلى canvas العارض: document.getElementById ('three_canvas')}) ؛ Renderer.Setsize (العرض ، الارتفاع) ؛ // قم بتعيين حجم التقديم على نفس القماش.سيناريو التهيئة:
دالة initscene () {scene = new Three.scene () ؛}تهيئة الكاميرا:
وظيفة initcamera () {// كاميرا إسقاط متعامد بسيطة ، والتي تواجه مركز منفذ العرض ، حجم منفذ العرض هو نفس حجم قماش. الكاميرا = جديد three.OthographicCamera (العرض / -2 ، العرض / 2 ، الارتفاع / 2 ، الارتفاع / -2 ، 1 ، 1000) ؛ // قم بتعيين كاميرا موقع الكاميرا. position.x = 0 ؛ camera.position.y = 0 ؛ camera.position.z = 200 ؛ // قم بتعيين كاميرا الاتجاه التصاعدي للكاميرا. up.x = 0 ؛ camera.up.y = 1 ؛ camera.up.z = 0 ؛ // اضبط موضع تركيز الكاميرا (في الواقع لتحديد اتجاه) كاميرا.لتحديد موضع الكاميرا واتجاهها بشكل فريد ، لا غنى عن سمات الموضع ، والتصاعد ، والرصين.
هنا أنشأنا كاميرا عرض متعامدة. أحافظ هنا على حجم العرض بما يتوافق مع دقة الشاشة فقط للراحة ، بحيث يتوافق طول الوحدة في نظام الإحداثيات مع بكسل من الشاشة.
نضع الكاميرا على محور z ، ونواجه أصل الإحداثيات ، والاتجاه العلوي للكاميرا هو محور Y. لاحظ أن اتجاه UP واتجاه Lookat يجب أن يكون عموديًا (ستعرف ما إذا كنت تقارن نفسك برأسك).
هنا مكعب يضاف إلى المشهد:
وظيفة initObject () {// قم بإنشاء مكعب بطول جانبي قدره 100 var geometry = جديد three.cubegeometry (100 ، 100 ، 100) ؛ Object = new Three.mesh (الهندسة ، three.meshnormalaterial ()) ؛ المشهد. add (كائن) ؛}لاحظ أننا نستخدم المادة العادية للمواد العادية ، بحيث يرتبط لون كل وجه من المكعب بالاتجاه الذي يواجه هذا الوجه ، مما يسهل مراقبة/تصحيح.
في هذا العرض التوضيحي البسيط ، لا أخطط لإضافة تأثيرات الضوء والظل ، ولا تستجيب المادة العادية للضوء.
أخيرًا ، قم بإنشاء حلقة رسوم متحركة
الدالة render () {requestAnimationFrame (render) ؛ Object.rotation.x += 0.05 ؛ Object.rotation.y += 0.05 ؛ Renderer.render (المشهد ، الكاميرا) ؛}كل إعادة طلاء يجعل المكعب يدور قليلاً.
عندما يتم تحميل الصفحة ، فقط اتصل بالوظائف السابقة
وظيفة threestart () {initrenderer () ؛ initcamera () ؛ initscene () ؛ initObject () ؛ render () ؛} window.onload = threestart () ؛يبدو أن العرض التوضيحي الكامل مثل هذا:
<! doctype html> <html> <head> <meta charset = "utf-8"> <title> cube </itlect> <script src = "http://sqimg.qq.com/qq_product_operations/mma/javanli_test/lib/there html ، الجسم {margin: 0 ؛ الحشو: 0 ؛ } #three_canvas {position: absolute ؛ العرض: 100 ٪ ؛ الارتفاع: 100 ٪ } </style> </head> <body> <canvas id = "three_canvas"> </canvas> <script> var ، الكاميرا ، المشهد ، الضوء ، الكائن ؛ var عرض ، الارتفاع ؛ الدالة initRenderer () {width = document.getElementById ('three_canvas'). clientwidth ؛ الارتفاع = document.getElementById ('three_canvas'). clientHeight ؛ REDERER = جديد three.webglrenderer ({canvas: document.getElementById ('Three_Canvas')}) ؛ Renderer.Setsize (العرض ، الارتفاع) ؛ Renderer.setClearColor (0xfffff ، 1.0) ؛ } وظيفة initCamera () {camera = new Three.OthographicCamera (العرض / -2 ، العرض / 2 ، الارتفاع / 2 ، الارتفاع / -2 ، 1 ، 1000) ؛ camera.position.x = 0 ؛ camera.position.y = 0 ؛ camera.position.z = 200 ؛ camera.up.x = 0 ؛ camera.up.y = 1 ؛ camera.up.z = 0 ؛ camera.lookat ({x: 0 ، y: 0 ، z: 0}) ؛ } function initscene () {scene = new Three.scene () ؛ } function initObject () {var geometry = new Three.Cubegeometry (100 ، 100 ، 100) ؛ Object = new Three.mesh (الهندسة ، three.meshnormalaterial ()) ؛ المشهد. add (كائن) ؛ } function render () {requestAnimationFrame (render) ؛ Object.rotation.x += 0.05 ؛ Object.rotation.y += 0.05 ؛ Renderer.render (المشهد ، الكاميرا) ؛ } الوظيفة threestart () {initRenderer () ؛ initcamera () ؛ initscene () ؛ initObject () ؛ يجعل()؛ } window.onload = threestart () ؛ </script> </body> </html>بعد توفير HTML ، فتحه ، سيتم عرض هذا المكعب الدوار في وسط الشاشة.
ملخص
هذا كل شيء لإدخال ثلاثة. يذكر هذه المقالة أساسًا مكونات مهمة في ثلاثة. في الواقع ، هناك العديد من الأشياء التي أريد تلخيصها ، لكن كتابتها في هذه المقالة قد تبدو مرهقة. تتمثل النية الأصلية لهذه المقالة في السماح للقراء بفهم بديهي وعامة لثلاثة. JS بعد قراءته ، ولا ينوي إشراك الكثير من التفاصيل.
ما سبق هو كل محتوى هذه المقالة. آمل أن يكون ذلك مفيدًا لتعلم الجميع وآمل أن يدعم الجميع wulin.com أكثر.