بدء استخدام 3.js

مقدمة

لقد استخدمت Three.js لبعض تجاربي، وهو يُؤدي دورًا رائعًا في تبسيط المشاكل المتعلّقة بالبدء باستخدام الأشكال الثلاثية الأبعاد في المتصفّح. باستخدامه، يمكنك إنشاء كاميرات وعناصر وأضواء ومواد وغير ذلك، و يمكنك اختيار أداة التقديم، ما يعني أنّه يمكنك تحديد ما إذا كنت تريد أن يتم رسم المشهد باستخدام لوحة HTML 5 أو WebGL أو SVG. وبما أنّه مفتوح المصدر، يمكنك أيضًا المشاركة في المشروع. ولكن الآن، سأركّز على ما تعلمته من خلال استخدام هذا المحرّك، وسأوضّح لك بعض الأساسيات.

على الرغم من روعة Three.js، قد تواجهك أحيانًا مشاكل. عادةً ما تحتاج إلى قضاء وقت طويل في استخدام الأمثلة والهندسة العكسية والبحث عن وظائف معيّنة (في حالتي بالتأكيد) وطرح الأسئلة من خلال GitHub في بعض الأحيان. إذا كان لديك أسئلة، يُرجى العِلم أنّني وجدت أنّ Mr. doob وAlteredQualia مفيدين للغاية.

1. الأساسيات

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

في عالمنا الثلاثي الأبعاد، سنوفّر بعض العناصر التالية، وسأرشدك إلى كيفية إنشائها:

  1. مشهد
  2. عارض
  3. كاميرا
  4. عنصر أو عنصران (مع المواد)

يمكنك بالتأكيد تنفيذ بعض الإجراءات الرائعة، ونأمل أن تتابع تنفيذها وأن تبدأ في تجربة المحتوى الثلاثي الأبعاد في المتصفّح.

2. الدعم

ملاحظة سريعة حول الدعم في المتصفّحات من تجربتي، متصفّح Chrome من Google هو أفضل متصفّح للعمل معه من حيث أدوات التحويل المتوافقة، و سرعة محرّك JavaScript الأساسي. يتيح Chrome استخدام Canvas وWebGL وSVG، وهو سريع جدًا. ويأتي Firefox في المرتبة الثانية بفارق بسيط، وذلك مع ظهور الإصدار 4. يبدو أنّ محرّك JavaScript أبطأ قليلاً من محرّك Chrome، ولكنّه يتوافق بشكل رائع مع تقنيات العرض. إنّ متصفحَي Opera وSafari في مرحلة إضافة ميزة WebGL، ولكن الإصدارَين الحاليَين لا يتيحان سوى استخدام canvas. يتوافق متصفّح Internet Explorer (الإصدار 9 والإصدارات الأحدث) مع ميزة عرض اللوحة فقط، ولم أسمع أيّ معلومات عن تخطيط Microsoft لإضافة إمكانات WebGL.

3- معلومات تمهيدية

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

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

بناءً على ذلك، بافتراض أنّك نزّلت وضمّنت مكتبة three.js في ملف HTML، كيف يمكنك إعداد مشهد؟ مثال:

// set the scene size
var WIDTH = 400,
HEIGHT = 300;

// set some camera attributes
var VIEW_ANGLE = 45,
ASPECT = WIDTH / HEIGHT,
NEAR = 0.1,
FAR = 10000;

// get the DOM element to attach to
// - assume we've got jQuery to hand
var $container = $('#container');

// create a WebGL renderer, camera
// and a scene
var renderer = new THREE.WebGLRenderer();
var camera = new THREE.PerspectiveCamera(
                VIEW_ANGLE,
                ASPECT,
                NEAR,
                FAR );

var scene = new THREE.Scene();

// the camera starts at 0,0,0 so pull it back
camera.position.z = 300;

// start the renderer
renderer.setSize(WIDTH, HEIGHT);

// attach the render-supplied DOM element
$container.append(renderer.domElement);

ليس الأمر صعبًا جدًا.

4. إنشاء شبكة

لدينا إذًا مشهد وكاميرا وبرنامج عرض (اخترت WebGL في نموذج الرمز البرمجي)، ولكن ليس لدينا ما نرسمه. تتيح لك أداة Three.js تحميل بعض أنواع الملفات العادية المختلفة، ما يُعدّ أمرًا رائعًا إذا كنت بصدد تصدير نماذج من Blender أو Maya أو Cinema4D أو أيّ شيء آخر. للحفاظ على بساطة الأمور (هذه الخطوة تهدف إلى البدء بعد كل شيء) سأتحدث عن العناصر الأساسية. الأشكال الأساسية هي شبكات هندسية، وهي أشكال أساسية نسبيًا مثل الكرات والمستويات والمكعبات والأسطوانات. تتيح لك مكتبة Three.js إنشاء هذه الأنواع من الأشكال الأساسية بسهولة:

// set up the sphere vars
var radius = 50, segments = 16, rings = 16;

// create a new mesh with sphere geometry -
// we will cover the sphereMaterial next!
var sphere = new THREE.Mesh(
new THREE.SphereGeometry(radius,
segments,
rings),

sphereMaterial);

// add the sphere to the scene
scene.add(sphere);

حسنًا، ولكن ماذا عن مادة الكرة؟ في الرمز، استخدمناvariabelsphereMaterial ولكن لم نحدّده بعد. أولاً، نحتاج إلى الحديث عن المواد بمزيد من التفصيل.

5- المواد

لا شك أنّ هذه هي إحدى الأجزاء الأكثر فائدة في Three.js. يوفّر لك عددًا من المواد الشائعة (والمفيدة جدًا) لتطبيقها على شبكاتك:

  1. "أساسي"، ما يعني أنّه يتم عرض العناصر "غير مضاءة"
  2. Lambert
  3. فؤاد

هناك المزيد من الإعدادات، ولكن سأترك لك مهمة اكتشاف هذه الإعدادات بنفسك. في ما يتعلّق بـ WebGL على وجه الخصوص، يمكن أن تكون هذه المواد مفيدة جدًا. لماذا؟ لأنّه في WebGL، عليك كتابة مواد مظلّلة لكل ما يتم عرضه. تشكّل Shaders موضوعًا كبيرًا بحدّ ذاته، ولكن باختصار، يتم كتابتها بلغة GLSL (لغة Shader في OpenGL)، التي تُعلم وحدة معالجة الرسومات (GPU) بكيفية ظهور العنصر. وهذا يعني أنّك بحاجة إلى محاكاة العمليات الحسابية للإنارة، والانعكاس وما إلى ذلك. ويمكن أن يصبح الأمر معقّدًا جدًا بسرعة كبيرة. بفضل Three.js، ليس عليك إجراء ذلك إذا لم تكن تريد ذلك لأنّه يزيل ذلك عنك. إذا كنت تريد كتابة مواد تشويش، يمكنك إجراء ذلك أيضًا باستخدام MeshShaderMaterial، لذا فهو إعداد مرن.

في الوقت الحالي، لنطبّق مادة Lambert على الكرة:

// create the sphere's material
var sphereMaterial = new THREE.MeshLambertMaterial(
{
// a gorgeous red.
color: 0xCC0000
});

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

6- أضواء.

إذا كنت تريد عرض المشهد الآن، ستظهر لك دائرة حمراء. على الرغم من أنّه تم تطبيق مادة Lambert، لا يتوفّر ضوء في المشهد، لذلك ستعود Three.js تلقائيًا إلى ضوء محيطي كامل، وهو مماثل لتأثير التلوين المسطّح. لنصلح ذلك باستخدام نقطة ضوء بسيطة:

// create a point light
var pointLight = new THREE.PointLight( 0xFFFFFF );

// set its position
pointLight.position.x = 10;
pointLight.position.y = 50;
pointLight.position.z = 130;

// add to the scene
scene.add(pointLight);

7- عرض

لقد أعددنا كل شيء للعرض بشكل رائع. ولكن علينا العمل على تنفيذ ما يلي:

// draw!
renderer.render(scene, camera);

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

8. خصائص العناصر الشائعة

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

// sphere geometry
sphere.geometry

// which contains the vertices and faces
sphere.geometry.vertices // an array
sphere.geometry.faces // also an array

// its position
sphere.position // has x, y and z properties
sphere.rotation // same
sphere.scale // ... same

9. Dirty Little Secrets

أودّ فقط الإشارة سريعًا إلى مشكلة في Three.js، وهي أنّه في حال تعديل رؤوس شبكة مثلاً، ستلاحظ في حلقة التقديم أنّه لن يحدث أي تغيير. لماذا؟ يرجع ذلك إلى أنّ Three.js (حسب علمي) تُخزِّن مؤقتًا data for a mesh كنوع من تحسين الأداء. ما عليك فعله فعليًا هو إبلاغ Three.js بأنّه حدث تغيير كي تتمكّن من إعادة احتساب ما تحتاج إليه. يمكنك إجراء ذلك من خلال ما يلي:

// changes to the vertices
sphere.geometry.__dirtyVertices = true;

// changes to the normals
sphere.geometry.__dirtyNormals = true;

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

الخاتمة

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