لدينا قدرات في المتصفحات التي لم نكن نحلم بها منذ 5 أو 10 سنوات. يمكن للعوالم الكاملة للعبة ثلاثية الأبعاد أن تعمل في المتصفح ، ويمكن لمواقع الويب التفاعلية أن تكون تجارب أكثر غامرة.
مع شركة حقيقة افتراضية معينة يتم شراؤها من قبل شركة وسائط اجتماعية معينة ، يعد الآن الوقت المثالي لبدء العمل باستخدام 3D. بشكل مثير للدهشة ، يمكننا الآن إنشاء 3D باستخدام جافا سكريبت خالص ، بما في ذلك الشبكات والمواد.
وبالطبع ، على الرغم من أنه ممكن ، فإنه يتطلب كمية هائلة من الشفرات ، وهذا هو المكان الذي تأتي منه Three.js ، مما يسمح لنا ببناء بيئات ثلاثية الأبعاد ببساطة وبكود أقل.
لسوء الحظ ، نظرًا لكونها جديدة ، لا تدعم جميع المتصفحات ثلاثية الأبعاد. نحن مقيدون حاليًا بـ Chrome و Safari و Firefox.
مع مرور الوقت ، سيتحسن الدعم على IE ، ولكنك ستحتاج في الوقت الراهن إلى تراجع لمحبي Microsoft.
أول شيء يتعين علينا القيام به هو التوجه إلى three.js الموقع وتنزيل أحدث إصدار من المكتبة.
بعد ذلك ، قم بالإشارة إليه في رأس المستند كما تفعل مع أي ملف جافا سكريبت آخر ، ونحن على استعداد للذهاب.
أول شيء يتعين علينا القيام به ، لتقديم أي شيء مع three.js هو إنشاء مشهد وكاميرا وجهاز عرض. بدءا من مشهد:
var scene = new THREE.Scene();بعد ذلك ، نحتاج إلى كاميرا. اعتبر ذلك وجهة النظر التي يبحث عنها المستخدم. لدى Three.js في الواقع الكثير من الخيارات هنا ، ولكن من أجل التبسيط ، سنستخدم كاميرا المنظور:
var camera = new THREE.PerspectiveCamera(100, window.innerWidth / window.innerHeight, 0.1, 1000);تأخذ هذه الطريقة أربعة معلمات: الأول هو مجال الرؤية ، والثاني هو نسبة العرض إلى الارتفاع (نوصي دائمًا بالاستناد إلى إطار عرض المستخدم) ، ومستوى القطع القريب ، وأخيرًا مستوى القطع البعيد. تحدد المعلمتان الأخيرتان حدود التقديم ، بحيث لا يتم رسم الكائنات التي تكون قريبة جدًا أو بعيدة جدًا ، مما يؤدي إلى إضاعة الموارد.
بعد ذلك ، نحتاج إلى إعداد أداة عرض WebGL:
var renderer = new THREE.WebGLRenderer();renderer.setSize( window.innerWidth, window.innerHeight );document.body.appendChild( renderer.domElement );
وكما ترى ، فإن أول شيء هنا هو إنشاء مثيل للعارض ، ثم تعيين حجمه على إطار عرض المستخدم ، وأخيرًا نضيفه إلى الصفحة لإنشاء لوحة بيضاء للعمل معنا.
حتى الآن ، كل ما قمنا به هو إعداد المرحلة ، والآن سنقوم بإنشاء أول كائن ثلاثي الأبعاد.
بالنسبة لهذا البرنامج التعليمي ، ستكون هناك اسطوانة بسيطة:
var geometry = new THREE.CylinderGeometry( 5, 5, 20, 32 );تأخذ هذه الطريقة أيضًا 4 معلمات: الأول هو نصف قطر قمة الأسطوانة ، والثاني هو نصف قطر الجزء السفلي من الأسطوانة ، والثالث هو الارتفاع ، والأخير هو عدد مقاطع الارتفاع.
لقد أعددنا رياضيات الكائن ، والآن نحتاج إلى لفه في مادة بحيث يبدو في الواقع شيء ما على الشاشة:
var material = new THREE.MeshBasicMaterial( { color: 0x0000ff, wireframe: true} );يضيف هذا الرمز مادة بسيطة للكائن ، في هذه الحالة لون أزرق. لقد قمت بإعداد wireframe إلى true لأنه سيعرض الكائن بشكل أكثر وضوحًا بمجرد أن نحركه.
وأخيرًا ، نحتاج إلى إضافة أسطوانتنا إلى مشهدنا ، مثل:
var cylinder = new THREE.Mesh( geometry, material );scene.add( cylinder );
آخر شيء يجب فعله قبل عرض المشهد هو تعيين موضع الكاميرا:
camera.position.z = 20;كما ترى ، فإن جافا سكريبت المعنية بسيطة للغاية ، وذلك لأن Three.js يتعامل مع كل الأشياء المعقدة ، لذلك ليس علينا ذلك.
إذا قمت باختبار الملف في متصفح الآن سترى أن لا شيء يحدث. ذلك لأننا لم نخبر المشهد أن يقدم. لتقديم المشهد ، نحتاج إلى الرمز التالي:
function render() {requestAnimationFrame(render);renderer.render(scene, camera);}render();إذا قمت الآن بإلقاء نظرة على الملف في متصفحك سترى أنه في الواقع تقديم اسطوانة ، لكنها ليست مثيرة للغاية.
ولتحسين قيمة ثلاثية الأبعاد فعليًا ، عليك البدء في الرسوم المتحركة ، والتي يمكننا القيام بها مع بعض التغييرات البسيطة في وظيفة العرض:
function render() {requestAnimationFrame(render);cylinder.rotation.z += 0.01;cylinder.rotation.y += 0.1;renderer.render(scene, camera);}render();إذا اختبرت في متصفحك الآن ، فسترى اسطوانة ثلاثية الأبعاد متحركة بشكل صحيح.
إذا كنت ترغب في رؤية العرض التوضيحي واللعب مع رمز يمكنك افعل ذلك هنا.
كما ترون ، استغرق إنشاء هذا المشهد (بسيط جداً) أقل من أربعين سطر من التعليمات البرمجية ، وهناك القليل جداً من العمليات الحسابية.
إذا كنت تحقق من أمثلة على موقع three.js سترى بعض العمل الرائع الذي تم القيام به.
هذه المكتبة المذهلة لجافا سكريبت قد خفضت بالفعل مستوى دخول الترميز ثلاثي الأبعاد لدرجة أن أي شخص يستطيع كتابة JavaScript الأساسية يمكن أن يشارك.
صورة مميزة / صورة مصغرة ، صورة ثلاثية الأبعاد عبر Shutterstock.