✌🏾 🥄 🙎🏾 مقدمة إلى 3D: أساسيات Three.js 🈳 🍿 🐟

يتغير تعقيد الويب يوميًا ، وتتزايد قدراته بنفس السرعة ، خاصة مع العرض ثلاثي الأبعاد. من بدأ للتو في الانضمام إلى موضوع ثلاثي الأبعاد - مرحبًا بك في القط.

دعنا نذهب من بعيد

WebGL هي مكتبة برامج لجافا سكريبت تسمح لك بإنشاء رسومات ثلاثية الأبعاد تعمل في المتصفحات. تعتمد هذه المكتبة على بنية مكتبة OpenGL. يستخدم WebGL لغة برمجة تظليل GLSL ، والتي تحتوي على بنية تشبه C. يعتبر WebGL مثيرًا للاهتمام حيث تم تصميم الشفرة مباشرة في المتصفح. لهذا ، يستخدم WebGL كائن اللوحة الذي تم تقديمه في HTML5.

العمل مع WebGL ، ومع التظليل على وجه الخصوص ، عملية تستغرق وقتًا إلى حد ما. في عملية التطوير ، من الضروري وصف كل نقطة وخط ووجه وما إلى ذلك. من أجل تصور كل هذا ، نحتاج إلى تسجيل جزء كبير من التعليمات البرمجية. لزيادة سرعة التطوير ، تم تطوير مكتبة Three.js .

Three.js هي مكتبة JavaScript تحتوي على مجموعة من الفئات المحددة مسبقًا لإنشاء وعرض رسومات ثلاثية الأبعاد تفاعلية في WebGL.

Three.js لـ WebGL هو نفس jQuery لـ JavaScript. تقدم المكتبة بناء جملة ، وملخصات من الصداع المرتبط بالأبعاد الثلاثية في المتصفح. لنلق نظرة عامة ونرى كيف نبدأ إذا كنت جديدًا في عالم 3D.

المزيد عن Three.js

مكتبة Three.js ، كما ذكرنا سابقًا ، تجعل العمل مع WebGL أسهل. عند استخدام Three.js ، ليست هناك حاجة لكتابة تظليل (ولكن لا يزال هناك احتمال) ، ويصبح من الممكن العمل على مفاهيم مألوفة.

يعمل عدد كبير من المطورين في المكتبة. الإيكولوجي والمطور الرئيسي هو ريكاردو كوبيلو ، المعروف باسم مستعار إبداعي Mr.Doob .

يمكن مقارنة رسومات النمذجة باستخدام Three.js بالمجموعة ، حيث لدينا الفرصة للعمل مع مفاهيم مثل المشهد والضوء والكاميرا والأشياء وموادها.

تشمل ثلاثة ما يسمى بحيتان Three.js:

المشهد - نوع من النظام الأساسي حيث يتم وضع جميع الكائنات التي نقوم بإنشائها ؛
الكاميرا - في الواقع - هذه هي "العين" التي سيتم توجيهها إلى المشهد. تلتقط الكاميرا وتعرض الأشياء الموجودة على المسرح ؛
Renderer - متخيل يسمح لك بعرض مشهد تم التقاطه بواسطة الكاميرا.

يحتوي Three.js على عدة أنواع من الكاميرات:

كاميرا المنظور
كاميرا ستيريو
الكاميرا التقويمية
كاميرا المكعب

الأكثر شيوعًا هي كاميرا المنظور وكاميرا التقويمية.

كاميرا المنظور

هذا هو وضع العرض الأكثر شيوعًا المستخدم لعرض مشهد ثلاثي الأبعاد.

تم تصميم كاميرا المنظور لمحاكاة ما تراه العين البشرية. تدرك الكاميرا جميع الأشياء في إسقاط منظور ، أي: كلما كان الجسم بعيدًا عنا ، كلما بدا أصغر.

تأخذ كاميرا المنظور 4 حجج:

FOV Field Of View (/ ) — , .
Aspect ratio — , , . . , , .
Near & Far — , . , , , .

Orthographic Camera

في وضع الإسقاط هذا ، يظل حجم الكائن في الصورة المعروضة ثابتًا ، بغض النظر عن بعده عن الكاميرا. أي أنه جهاز تحكم عن بعد على مسافة غير محدودة من الأشياء.

في هذه الحالة ، تظل جميع الخطوط العمودية متعامدة ، وكلها متوازية - موازية. إذا حركنا الكاميرا ، فلن يتم تشويه الخطوط والأشياء.

يمكن أن يكون ذلك مفيدًا عند عرض المشاهد ثنائية الأبعاد وعناصر واجهة المستخدم.

إضاءة

بدون إضاءة على المسرح ، ستحصل على الانطباع بأنك في غرفة مظلمة. بالإضافة إلى ذلك ، من خلال إضاءة المسرح ، يمكنك إعطاء قدر أكبر من الواقعية. من الناحية الفنية ، يمكن ضبط كل إضاءة على اللون.

أمثلة الإضاءة:

Ambient Light — , ; , .
Directional Light — , . , , , , ; , .
Point Light — , . ( ).
بقعة ضوء - ينبعث هذا الضوء من نقطة واحدة في اتجاه واحد ، على طول المخروط ، ويتوسع كلما ابتعدت عن مصدر الضوء.

إنشاء كائنات على المسرح

يسمى الكائن الذي تم إنشاؤه على الجزء الرئيسي بالشبكة.

Mesh عبارة عن فئة تمثل كائنات تستند إلى شبكة مضلعة مثلثة.

يأخذ هذا الفصل حجتين:

الهندسة - تصف الشكل (موضع القمم ، الوجوه ، نصف القطر ، إلخ.)
المادة - تصف مظهر الأشياء (اللون ، والملمس ، والشفافية ، وما إلى ذلك)

لنحاول إنشاء شكلين بسيطين: المكعب والكرة.

أولاً ، انتقل إلى الموقع three.js ، وقم بتنزيل أحدث إصدار من المكتبة. ثم ربطنا المكتبة في رئيس القسم أو إلى بداية الجسم قسم من ثيقتنا، والانتهاء من ذلك:

<!DOCTYPE html>
<html>
  <head>
    <meta charset=utf-8>
    <title>First Three.js app</title>
    <style>
      body { margin: 0; }
      canvas { width: 100%; height: 100% }
      </style>
  </head>
  <body>
    <script src="js/three.js"></script>
    <script>
      //  Javascript .
    </script>
  </body>
</html>

علاوة على ذلك ، حتى نتمكن من عرض الكائن الذي تم إنشاؤه ، من الضروري إنشاء مشهد وإضافة كاميرا وتكوين التجسيد.

إضافة مشهد:

var scene = new THREE.Scene();

أضف كاميرا منظور:

var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );

تأخذ الكاميرا 4 معلمات المذكورة أعلاه:

زاوية الرؤية أو مجال الرؤية ، في حالتنا هي زاوية قياسية 75 ؛
المعلمة الثانية هي نسبة العرض إلى الارتفاع أو نسبة العرض إلى الارتفاع ؛
المعلمتان الثالثة والرابعة هي الحد الأدنى والأقصى للمسافة من الكاميرا ، والتي ستقع في العرض.

قم بإضافة وتكوين العرض:

var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

ما قمنا به: قم أولاً بإنشاء كائن تجسيد ، ثم قم بتعيين حجمه وفقًا لحجم المساحة المرئية ، وأخيرًا أضفه إلى الصفحة لإنشاء عنصر قماش فارغ سنعمل معه.

بعد إنشاء التجسيد ، نشير إلى مكان عرض علامة قماش الرسم . في حالتنا، واضاف نحن لفي الجسم العلامة .

لإنشاء المكعب نفسه ، قمنا أولاً بتعيين الشكل الهندسي:

var geometry = new THREE.BoxGeometry( 10, 10, 10);

يتم إنشاء مكعب باستخدام فئة BoxGeometry . هذا فصل يحتوي على رؤوس ووجهات المكعب. نقوم بنقل الأحجام:

العرض : عرض المكعب ، حجم الجوانب على طول المحور س
الارتفاع : ارتفاع المكعب ، أي حجم الجانب ص
عمق : عمق المكعب ، أي حجم الجانب على المحور Z

لتلوين المكعب ، اضبط المادة:

var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );

في حالتنا ، يتم تعيين MeshBasicMaterial ويتم تمرير معلمة اللون 0x00ff00 ، أي اللون الاخضر. تستخدم هذه المادة بشكل أساسي لإعطاء الشكل لونًا موحدًا. الجانب السلبي هو أن الرقم يختفي في العمق. لكن هذه المادة مفيدة تمامًا عند عرض الإطارات السلكية باستخدام المعلمة {wireframe: true} .

الآن نحن بحاجة إلى كائن شبكة يأخذ الهندسة ويطبق المواد عليه:

var cube = new THREE.Mesh( geometry, material );
scene.add( cube );

camera.position.z = 25;

أضف شبكة إلى المشهد وحرك الكاميرا حيث يتم إضافة جميع الكائنات بعد طريقة scene.add () بشكل افتراضي مع الإحداثيات (0،0،0) ، والتي بسببها ستكون الكاميرا والمكعب في نفس النقطة.

من أجل تحريك المكعب ، نحتاج إلى رسم كل شيء داخل حلقة التجسيد باستخدام requestAnimationFrame :

function render() {
        requestAnimationFrame( render );
  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;      
  renderer.render( scene, camera );
}
render();

requestAnimationFrame هو طلب للمتصفح الذي تريد تحريك شيء ما. نقوم بتمريرها لدالة استدعاء ، أي وظيفة تقديم ().

هنا نضع معلمات سرعة الدوران. ونتيجة لذلك ، فإن الحلقة تعرض المشهد 60 مرة في الثانية وتتسبب في تدوير المكعب.

الآن دعونا نرسم كرة:

var geometry = new THREE.SphereGeometry(1, 32, 32);

لبناء المجال ، يتم استخدام فئة SphereGeometry ، والتي تهتم بما يلي:

نصف القطر (القيمة الافتراضية هي 1)
widthSegments - عدد الأجزاء الأفقية (مثلثات). الحد الأدنى للقيمة هو 3 ، والقيمة الافتراضية هي 8
heightSegments - عدد المقاطع الرأسية. القيمة الدنيا هي 2 ، والقيمة الافتراضية هي 6

بالمناسبة ، كلما حددت عدد المثلثات ، كلما كان سطح الكرة أكثر نعومة.

بعد ذلك ، نحاول استخدام مادة أخرى - MeshNormalMaterial - مادة متعددة الألوان تقارن المتجهات العادية بألوان RGB:

var material = new THREE.MeshNormalMaterial();
var sphere = new THREE.Mesh( geometry, material );
scene.add( sphere );
camera.position.z = 3;

هناك الكثير من أنواع المواد. يمكن دمج بعض المواد وتطبيقها في وقت واحد على شكل واحد. اقرأ المزيد هنا .

الخطوة الأخيرة هي تعيين دورة التقديم:

function render() {
	requestAnimationFrame( render );
	sphere.rotation.x += 0.01;
  sphere.rotation.y += 0.01;
  renderer.render( scene, camera );
}
render();

ونحصل على ما يلي:

دعونا نحاول إنشاء شكل أكثر تعقيدًا ، وتطبيق مادة أكثر تعقيدًا.

كمثال ، خذ مادة MeshPhongMaterial ، التي تأخذ في الاعتبار الإضاءة. لذلك ، نحتاج أولاً إلى إضافة بعض الضوء إلى المشهد. نضيف أدناه بقعة ضوء بلون أصفر ونضع موضعها على محور الإحداثيات:

var scene = new THREE.Scene();
var spotLight = new THREE.SpotLight(0xeeeece);
spotLight.position.set(1000, 1000, 1000);
scene.add(spotLight);
var spotLight2 = new THREE.SpotLight(0xffffff);
spotLight2.position.set( -200, -200, -200);
scene.add(spotLight2);

يشع SpotLight ، كما هو مذكور أعلاه ، من نقطة واحدة في اتجاه واحد ، على طول المخروط ، ويمتد كلما ابتعدت عن مصدر الضوء. بالإضافة إلى اللون ، يمكن أن يأخذ الضوء الموضعي الحجج: الشدة ، المسافة ، الزاوية ، الظليل ، الاضمحلال ، وكذلك الظلال.

يمكنك أن تقرأ عن أنواع أخرى من الضوء وقدراتها هنا .

الآن حدد الشكل نفسه:

var geometry = new THREE.TorusGeometry( 10, 3, 16, 100 );

تم تصميم فئة TorusGeometry لبناء توري أو "بكرات". تأخذ هذه الفئة المعلمات التالية:

نصف القطر ، الافتراضي هو 1 ؛
قطر الأنبوب ، الافتراضي 0.4 ؛
الأجزاء الشعاعية أو عدد أجزاء المثلث ، افتراضات إلى 8 ؛
أجزاء أو عدد أجزاء الوجه ، الافتراضي هو 6

إضافة مادة:

var material = new THREE.MeshPhongMaterial( {
color: 0xdaa520,
specular: 0xbcbcbc,
 } );

هذه المواد مخصصة للأسطح اللامعة. نعطيه لونًا ذهبيًا ، ونضيف خاصية مرآوية ، مما يؤثر على بريق المادة ولونها. اللون الافتراضي هو 0x111111 - رمادي غامق.

تقدم ، وهنا ما انتهى به الأمر:

استنتاج

بمساعدة ما يقرب من سطرين من التعليمات البرمجية ، قمنا بإنشاء شكلين بسيطين ، وواحد أكثر تعقيدًا بعض الشيء. بطبيعة الحال ، يحتوي Three.js على الكثير من الميزات. Three.js لديها الكثير من الأشكال داخل الصندوق ، المواد ، أنواع الإضاءة ، إلخ. هذا مجرد جزء صغير من الأساسيات.

تتيح لك مكتبة Three.js إنشاء وإنشاء أشياء صحية حقًا. فيما يلي بعض الأمثلة الثابتة:

المثال 1
المثال 2
المثال 3

إذا كنت ترغب في بدء تعلم 3D في JavaScript ، يمكنك العثور على كل ما تحتاجه هنا أو هنا .

مقدمة إلى 3D: أساسيات Three.js