مقدمة
Three.js هي مكتبة 3DJS ، واحدة من أكثر أطر المصدر المفتوح على شبكة الإنترنت. بالإضافة إلى WebGL ، يوفر Three.js أيضًا عارضًا يعتمد على علامات القماش و SVG. يوصى باستخدام Chrome أو Firefox لتصحيح الأخطاء.
1. الكاميرا
تحدد الكاميرا في الرسومات كيف يتم عرض المساحة ثلاثية الأبعاد إلى الشاشات ثنائية الأبعاد.
لطرق الإسقاط ، تنقسم الكاميرات إلى كاميرات الإسقاط المتعامد وكاميرات إسقاط المنظور.
2. الفرق ونطاق تطبيق الكاميرتين
الإسقاط المتعامد:
إسقاط المنظور:
الإسقاط المتعامد يشبه الصورة في فئة الرياضيات ؛ على الرغم من أن إسقاط المنظور له نقطة أساسية ، إلا أن الكائنات في المسافة أصغر من الكائنات الموجودة في القريب ، وأكبر وأصغر في القريب.
لبرامج الرسم والنمذجة ، عادة ما يتم استخدام الإسقاط المتعامد ؛ بالنسبة لمعظم التطبيقات الأخرى ، عادة ما يتم استخدام إسقاط المنظور.
3. كاميرا الإسقاط المتعامد
مُنشئ كاميرا الإسقاط المتعامدة:
Three.OthographicCamera (يسار ، يمين ، أعلى ، أسفل ، بالقرب ، بعيدًا)
تمثل المعلمات الستة مواقع الوجوه الست التي تم التقاطها بواسطة كاميرا الإسقاط المتعامد.
من بينها ، بالقرب من المسافة الرأسية بين الطائرة القريبة والنقطة المركزية للكاميرا ؛ يمثل بكثير المسافة الرأسية بين الطائرة البعيدة والنقطة المركزية للكاميرا .
للحفاظ على النسبة الأفقية والرأسية للكاميرا ، يجب أن تكون نسبة (اليمين اليسرى) إلى (القاع العلوي) متسقة مع نسبة العرض إلى الارتفاع من القماش.
كما يتضح من الشكل ، يجب أن تكون قيم القريبة والبعيدة إيجابية ، وبعيدة . إذا كانت القيمتين الأخيرتين (0 ، 0) ، أي ، القيم القريبة والبعيدة هي نفسها ، فإن عمق جسم المشاهدة قد اختفى ، ويتم الضغط على جسم المشاهدة بأكمله في طائرة ، وستكون الشاشة غير صحيحة.
4. مثال كاميرا الإسقاط المتعامد
رمز المصدر:
<! doctype html> <html> <head> <meta charset = "utf-8"> <title> 3.js test 2 </title> </head> <body onload = "init ()"> <canvas id = "maincanvas"> </slanvas> <sript type = "text/javascript" type = "text/javaScript"> function init () {var renderer = new three.webglrenderer ({canvas: document.getElementById ('maincanvas')}) ؛ Renderer.setClearColor (0x0000000) ؛ var scene = new Three.scene () ؛ // قم بتعيين الكاميرا var camera = new Three.OthographicCamera (-2 ، 2 ، 1.5 ، -1.5 ، 1 ، 10) ؛ camera.position.set (0 ، 0 ، 5) ؛ //camera.lookat(new Three.Vector3 (0 ، 0 ، 0)) ؛ المشهد. add (الكاميرا) ؛ // إنشاء مكعب var cube = جديد three.mesh (new three.cubegeometry (1 ، 1 ، 1) ، three.meshbasicmaterial ({color: 0xff0000 ، wireframe: true})) ؛ المشهد. Add (Cube) ؛ // renderder.render (المشهد ، الكاميرا) ؛ } </script> </body> </html> حيث ، إذا كانت خاصية السلكية لـ THREE.MeshBasicMaterial صحيحة ، فسيتم تقديم المادة في إطار سلكي.
يمكنك أن ترى أن الحافة خلف الوضع الحالي ستتزامن تمامًا مع الحافة الموجودة في المقدمة:
4.1 تغيير نسبة الطول وعرض العرض
هنا ، تكون نسبة العرض إلى الارتفاع في قماش 4: 3 ، والمسافة الأفقية للكاميرا هي 4 ، والمسافة العمودية هي 3 ، وبالتالي تظل نسبة الطول والعرض دون تغيير (1: 1).
إذا تم تقليل المسافة الأفقية للكاميرا إلى 2 ،
var camera = new Three.OthographicCamera (-1،1،1.5 ، -1.5،1،10) ؛
سيتم إطالة الكائنات:
أصبح مجال رؤية الكاميرا أضيق ، مما أدى إلى زيادة في النسبة الجانبية للمكعب في مجال الرؤية ، والذي يتجلى في توسيع المكعب.
4.2 تغيير موضع الكاميرا
موضع الكاميرا في المثال هو (0،0،5). نظرًا لأن الكاميرا توضع في الاتجاه السلبي للمحور z افتراضيًا ، يمكنك رؤية المكعب في الأصل.
انقل موضع الكاميرا بمقدار وحدة واحدة إلى اليمين:
var camera = new Three.OthographicCamera (-2،2،1.5 ، -1.5،1،10) ؛ camera.position.set (1،0،5) ؛
تواجه الكاميرا الكائن ، بحيث تتحرك الكاميرا إلى اليمين والكائن الذي يتم إضاءة التحركات اليسرى:
4.3 تغيير موضع العرض
اضبط العرض على اليمين:
var camera = new Three.OthographicCamera (-1،3،1.5 ، -1.5،1،10) ؛ camera.position.set (1،0،5) ؛
تماما مثل تحريك الكاميرا بشكل صحيح.
4.4 تغيير زاوية الكاميرا
camera.position.set (4 ، -3،5) ؛ camera.lookat (new Three.vector3 (0 ، 0 ، 0)) ؛
ولكن الآن تراقب الكاميرا على طول الاتجاه السلبي للمحور z ، لذلك لا يمكن ملاحظة المكعب ، لا يُرى سوى قطعة من اللون الأسود. يمكننا تحديد اتجاه الأصل من خلال وظيفة lookat:
camera.lookat (new Three.vector3 (0 ، 0 ، 0)) ؛
لاحظ أن وظيفة lookAt تقبل مثيلًا لـ THREE.Vector3 ، لا تكتبها camera.lookAt(0, 0, 0)
حسنًا ، ما سبق هو المحتوى الكامل لكاميرا Three.JS تعلم الكاميرا المتعامدة. آمل أن يكون من المفيد للجميع أن يتعلموا ثلاثة. سيقوم المحرر بتحديث المقالات حول ثلاثة. JS واحدة تلو الأخرى. يرجى الاستمرار في الانتباه إلى wulin.com.