بدء استخدام 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 "لوحة الرسم" و WebGL وSVG، وهو سريع للغاية. وسرعان ما يأتي بعد ذلك فايرفوكس بعد ظهور الإصدار 4. ويبدو أن محرك JavaScript أبطأ من حيث اللمس من متصفِّح Chrome، ولكن دعمه لتقنيات العرض رائع من جديد. تعمل كل من Opera وSafari حاليًا على إضافة التوافق مع WebGL، غير أنّ إصداراتهما الحالية لا تتيح سوى استخدام لوحة الرسم. يدعم Internet Explorer (الإصدار 9 والإصدارات الأحدث) عرض اللوحات فقط، ولم أسمع أي شيء من Microsoft تخطط لإضافة إمكانات WebGL.

3- ضبط المشهد

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

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

إذًا، لنفترض أنّك نزّلت وضمّنت ثلاثة.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);

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

5- المواد

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

  1. "أساسي" أيّ أنّه يعرض الحالة "غير مضيئة"
  2. لامبرت
  3. فونغ

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

لكن في الوقت الحالي، لنستخدم مادة لامبرت على الكرة:

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

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

6. أضواء.

إذا كنت ستعرض المشهد الآن، فسترى دائرة حمراء. على الرغم من تطبيق مادة لامبرت، لا يوجد أي ضوء في المشهد، ولذلك فإن 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، وهو أذكى طريقة للتعامل مع الرسوم المتحركة في المتصفح. إذا لم تكن هذه النسخة متوافقة بالكامل حتى الآن، فأنصحك بإلقاء نظرة على محتوى Paul Ireland's.

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. الأسرار الصغيرة المتسخة

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

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

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

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

الخلاصة

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