Three.js

ما هي Three.js؟

‏Three.js مكتبة JavaScript مفتوحة المصدر ترسم الرسوم ثلاثية الأبعاد داخل المتصفح. بدأها Ricardo Cabello المعروف باسم Mr.doob، وصدرت أول مرة على GitHub عام 2010، ويعمل عليها اليوم مجتمع واسع من المساهمين. وتعمل عبر WebGL، الواجهة المدمجة في المتصفح التي تتيح له استخدام معالج الرسوميات في الجهاز، فلا حاجة إلى إضافة أو تطبيق.

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

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

أين نستخدم Three.js

نستخدم الأبعاد الثلاثة عندما تُظهر ما لا تستطيع الصورة إظهاره. وفي مشاريع عملائنا يعني ذلك عادةً:

• عروض منتجات تفاعلية

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

• مشاهد افتتاحية ثلاثية الأبعاد

  تحمل الشاشة الأولى من الصفحة الرئيسية مشهدًا ثلاثي الأبعاد يتفاعل مع حركة الفأرة أو مع التمرير. ويُحمَّل النص والأزرار أولًا، وتترك العلامة انطباعًا أول يبقى في الذاكرة.

• سرد ثلاثي الأبعاد مع التمرير

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

• عناصر العلامة ثلاثية الأبعاد

  في مشاريع الهوية نحوّل الشعار أو رمز العلامة إلى نموذج ثلاثي الأبعاد في Blender، ثم يظهر النموذج نفسه في الصور الإعلانية وبشكل تفاعلي على الموقع.

لماذا Three.js؟

• تعمل داخل المتصفح

  لا يحتاج الزائر إلى تثبيت أي شيء: يُفتح المشهد في متصفح حديث على الهاتف أو الحاسوب، داخل الصفحة مباشرة.

• تحكم إبداعي كامل

  لا تُختار الإضاءة والمواد وحركة الكاميرا والتفاعل من قالب جاهز، بل تُصمَّم لعلامتك، ويُبنى كل مشهد للقصة التي عليه أن يرويها.

• مفتوحة ومجرّبة

  تُطوَّر المكتبة علنًا منذ عام 2010، ولها توثيق مفصّل وأمثلة كثيرة. وهي مجانية وتقرأ صيغًا قياسية مثل glTF.

كيف نعمل على مشروعك

نبدأ بسؤال: ما الذي ينبغي أن تُظهره الأبعاد الثلاثة ولا تستطيع الصورة إظهاره؟ ثم نخطط المشهد في Figma، ونجهّز النماذج أو نحسّنها في Blender ونصدّرها بصيغة glTF، وبعدها نبني المشهد في الشيفرة بالإضاءة وحركات الكاميرا والتفاعل.

قبل الإطلاق نختبر على هواتف متوسطة الفئة إلى جانب الحواسيب، ونقيس التحميل عبر PageSpeed Insights. ونتأكد من أن المشهد لا يُحمَّل إلا عند ظهوره على الشاشة، وأن صورة ثابتة تظهر حيث لا يمكن تشغيله، وأن خيار «تقليل الحركة» يُحترم.

تصميم المواقع وتطويرها