Three.js

Three.js هي مكتبة JavaScript مفتوحة المصدر تعرض رسومات ثلاثية الأبعاد في متصفّحات الويب باستخدام [WebGL](/glossary/webgl). وهي تُخفي تعقيد واجهة WebGL، وتمنح المطوّرين أدوات عالية المستوى لبناء مَشاهد ثلاثية الأبعاد مزوّدة بكاميرات وإضاءة وموادّ وهندسة وحلقات حركة. أُنشئت Three.js في الأصل على يد ريكاردو كابيلو (Mr.doob) عام ٢٠١٠، وأصبحت أكثر مكتبات الثلاثي الأبعاد اعتمادًا على الويب، وتُستخدم في كلّ شيء من مُهيّئات المنتجات والجولات المعمارية إلى تصوّر البيانات والسرد التفاعلي. ولأنّها تعمل على وحدة معالجة الرسومات GPU عبر WebGL، تستطيع Three.js عرض مَشاهد معقّدة بمعدّل ٦٠ إطارًا في الثانية على الأجهزة الحديثة دون الحاجة إلى ملحقات أو تثبيت تطبيقات أصيلة.

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

Three.js هي محرّك العرض الأساسي خلف تجربة الكتاب التفاعلي في FlipLink. فعند رفع ملفّ PDF وإنشاء كتاب تفاعلي، يستخدم FlipLink مكتبة Three.js لعرض كلّ صفحة بوصفها سطحًا ثلاثي الأبعاد مع [حركات تقليب صفحات](/glossary/page-flip-animation) واقعية. ويُحسب كلّ قلب صفحة في الوقت الفعلي: تتشوّه الورقة على امتداد منحنى، ويصبح الوجه السفلي من الصفحة مرئيًا، وتتغيّر الظلال الديناميكية عبر النشرة المزدوجة. ويدعم المحرّك [أنواع غلاف](/glossary/cover-type) مختلفة — [الغلاف المقوّى](/glossary/hardcover) و[الغلاف الورقي](/glossary/paperback) — ولكلّ منها سلوك انحناء وآلية كعب مميّزان. تعرض Three.js المشهد بأكمله باستخدام وحدة معالجة الرسومات GPU لدى القارئ، فتبقى الحركات سلسة دون معالجة على جانب الخادم. كما يقدّم FlipLink [عارض مستندات](/glossary/document-viewer) قائمًا على PDF.js للحالات التي يُفضَّل فيها تخطيط أبسط، ممّا يتيح للنّاشرين اختيار الصيغة المناسبة لكلّ منشور.

في الأعماق، يتضمّن تكامل Three.js في FlipLink عدّة مراحل عرض. فكلّ صفحة من ملفّ PDF تُحوَّل إلى نقاط (راستر) ثمّ تُطبَّق كقوام (texture) على هندسة مستوية مقسّمة إلى أجزاء. وعندما يبدأ القارئ بقلب الصفحة، تُزاح رؤوس الهندسة على امتداد منحنى Bezier لمحاكاة انحناء الورق. ويُولّد مصدر ضوء اتّجاهي موضوع فوق الكتاب خرائط ظلال في الوقت الفعلي، فتُلقي الصفحة المنحنية ظلًّا على الصفحة التي تحتها. وتستخدم الكاميرا إسقاطًا منظوريًا، ممّا يمنح الكتاب إحساسًا طبيعيًا بالعمق لا توفّره الإسقاطات المتعامدة المسطّحة. وعلى الأجهزة ذات قدرة GPU المحدودة، تُقلّل Three.js تلقائيًا أعداد المضلّعات وتُبسّط حسابات الظلال للحفاظ على معدّل إطارات سلس. وتعمل خطّ أنابيب العرض بأكمله على جانب العميل، ممّا يعني عدم الحاجة إلى بثّ فيديو أو عرض من الخادم — فجهاز القارئ نفسه يتولّى كلّ شيء.

تستطيع تحويلات CSS 3D (`transform: rotateY()`, `perspective()`) قلب عناصر مسطّحة في فضاء ثلاثي الأبعاد، وتُستخدم أحيانًا في تأثيرات تقليب صفحات بسيطة. غير أنّ CSS 3D تعمل على عناصر DOM مستطيلة ولا يمكنها تشويهها — فالصفحة قد تدور لكنّها لا تنحني أو تنثني أو تُطوى. أمّا Three.js، فتعمل على هندسة شبكية مكوّنة من رؤوس كثيرة، وتستطيع لذلك محاكاة تشوّه الورق وتفاوت السماكة وانحناء الكعب وإلقاء الظلال. CSS 3D أخفّ وأسهل تنفيذًا للتفاعلات البسيطة من نمط قلب البطاقات، لكنّها لا تستطيع إعادة إنتاج [محاكاة الكتاب الواقعية](/glossary/realistic-book-simulation) التي يربطها القرّاء بكتاب مادّي. وبالنسبة إلى النّاشرين الذين يريدون مظهر وإحساس مستند مطبوع حقيقي، فإنّ Three.js هي المحرّك الذي يجعل ذلك ممكنًا.

تجلب Three.js عرض الرسومات ثلاثية الأبعاد المُسرَّع بـ GPU إلى المتصفّح، ممّا يُمكّن FlipLink من تقديم كتب تفاعلية بانحناء صفحات واقعي وظلال ديناميكية وعمق منظوري — تجربة لا تستطيع العارضات المسطّحة أو الحركات القائمة على CSS مجاراتها.