كل المشاريع/INFINITY ENGINEERING CONSULTANT — INTERACTIVE BIM SITE

نظرة عامة

Infinity Engineering Consultant شركة متخصّصة في BIM والهندسة الإنشائية، احتاجت موقعًا بالدقّة والحداثة نفسها التي تتّسم بها الأعمال التي تقدّمها. أُنجز الموقع من طرفه إلى طرفه كعمل واجهة أمامية بمطوّر واحد، وهو يعرض نماذج إنشائية ونماذج BIM حقيقية مباشرةً داخل المتصفّح باستخدام Three.js وWebGL — لا لقطات شاشة مسطّحة — مع بديل سلس للأجهزة التي لا تدعم WebGL.

وفوق أساس من Next.js 15 مولَّد استاتيكيًا ومُقدَّم من شبكة Vercel الطرفية، يعرض الموقع إحدى عشرة خدمة، وثمانية قطاعات صناعية، ومسار تسليم من خمس خطوات، وخريطة تفاعلية للانتشار العالمي تمتدّ عبر ستّ دول في ثلاث قارّات. ويسري في الموقع كلّه نموذج محتوى يضع السرّية أولًا: مخطّطات العملاء تُرسم كطبقات CSS غير قابلة للتنزيل، وأشرطة العناوين في Revit تُقتطع، ولا تدخل أسماء العملاء أو عناوينهم في البيانات إطلاقًا — فيُبهر المعرض دون أن يكشف ملفات عميل أو هويته.

التحدي

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

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

تصميم النظام

كيف يعمل

01/04
01

عرض نموذج BIM داخل المتصفّح

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

  1. 1يفتح الزائر صفحة مولَّدة استاتيكيًا تُقدَّم فورًا من الحافة
  2. 2يُشغّل Three.js مُصيِّر WebGL ويطلب نموذج المبنى أو النموذج الإنشائي بصيغة GLTF
  3. 3يتدفّق النموذج ليصير مشهدًا ثلاثي الأبعاد تفاعليًا ومُضاءً في الواجهة الرئيسية وأقسام التخصّصات
  4. 4وإذا أفاد الجهاز بعدم دعم WebGL، يستبدل بديلٌ سلس المشهدَ بصورة ثابتة — فلا تظهر واجهة رئيسية معطّلة أبدًا
02

عرض مخطّط عميل دون السماح بخروجه

نموذج المحتوى الذي يضع السرّية أولًا — ظاهر على الصفحة، وغير قابل للتنزيل أبدًا، وغير منسوب إلى أحد أبدًا.

  1. 1بيانات المخطّطات لا تحمل أسماء عملاء أو عناوين، وأشرطة العناوين في Revit مُقتطعة مسبقًا
  2. 2كل مخطّط يُرسم كطبقة خلفية CSS بدلًا من مصدر صورة قابل للتنزيل
  3. 3مرشّحات المعرض ونوافذ العرض المكبّر تُعرض من تلك الطبقات المحميّة وحدها
  4. 4يرى الزائر جودة العمل، بينما يبقى الملف الأصلي والعميل في طيّ الخصوصية
03

من البناء إلى الحافة العالمية

كيف يبقى تحميل موقع ثقيل غنيّ بالوسائط سريعًا لزوّاره في أي مكان في العالم.

  1. 1دفعة كود واحدة تبني تطبيق Next.js 15 وتولّد الصفحات استاتيكيًا
  2. 2تُحسَّن الأصول ويُقسَّم الكود ليجلب المتصفّح ما تحتاجه كل شاشة فقط
  3. 3تُنشر النسخة على Vercel وتُخزَّن مؤقتًا عبر شبكتها الطرفية العالمية
  4. 4يُخدَم الزوّار من أقرب نقطة طرفية، فيبقى الرسم الأول سريعًا حتى بعيدًا عن الخادم الأصلي
04

تمرير موجَّه عبر عرض الخدمات

كيف يحوّل تنسيق التجربة كتالوج خدمات عميقًا إلى رحلة واضحة ومتدرّجة الإيقاع.

  1. 1تظهر الأقسام مع التمرير وتتصاعد الإحصاءات عدديًا لحظة دخولها مجال الرؤية
  2. 2تُحرّك خريطة الانتشار العالمي أقواسها لتجعل حضور الشركة ملموسًا
  3. 3تتكشّف الخدمات والقطاعات ومسار العمل كوحدات سهلة التصفّح وقابلة للتصفية
  4. 4كل مرحلة تُعيد ترتيب عناصرها بنظافة عبر نقاط التوقّف، من الهاتف إلى الشاشة العريضة

أبرز الميزات

  • نماذج مبانٍ ونماذج إنشائية ثلاثية الأبعاد بالزمن الحقيقي داخل المتصفّح (Three.js / WebGL وGLTF) مع بديل تلقائي عند عدم توفّر WebGL
  • خريطة تفاعلية للانتشار العالمي — ستّ دول في ثلاث قارّات، بأقواس متحرّكة وإحصاءات مشاريع لكل دولة
  • معرض مشاريع يضع السرّية أولًا — مخطّطات العملاء معروضة كطبقات CSS غير قابلة للتنزيل، وأشرطة العناوين مُقتطعة، وصفر بيانات شخصية للعملاء
  • إحدى عشرة خدمة وثمانية قطاعات صناعية معروضة كمنظومة قابلة للتصفية وسهلة التصفّح
  • شريط إحصاءات متحرّك — المشاريع وأشهر التسليم والدول والخدمات — بعدّادات تنطلق مع التمرير
  • مسار عمل هندسي من خمس خطوات وتفصيل للتخصّصات يجعلان الخدمة المجرّدة ملموسة
  • تجربة متجاوبة بالكامل، منسّقة الحركة مع التمرير ومضبوطة لتبقى الحركة انسيابية على كل جهاز
  • مولَّد استاتيكيًا على Next.js 15 ومُقدَّم من شبكة Vercel الطرفية لأزمنة تحميل سريعة عالميًا

Outcomes

  • سلّمتُ موقعًا يبرهن على دقّة الشركة — نماذج BIM ثلاثية الأبعاد حيّة بدل لقطات الشاشة المسطّحة — كبناء واجهة أمامية بمطوّر واحد
  • استوفيتُ معيار سرّية غير معتاد: كل مخطّط عميل يبقى غير قابل للتنزيل وكل هوية عميل تبقى خاصّة، دون أي تنازل عن الأثر البصري
  • أبقيتُ صفحة ثقيلة غنيّة بالوسائط سريعة وعالمية عبر التوليد الاستاتيكي على Next.js 15 والتقديم من شبكة Vercel الطرفية، مع مسار بديل سلس للأجهزة التي لا تدعم WebGL
  • صغتُ عرض خدمات معقّدًا — 11 خدمة و8 قطاعات وانتشارًا في ستّ دول — في رحلة واضحة وسهلة التصفّح ومركّزة على التحويل

أعمال أخرى

TourAxis preview
منصّة سفر

TourAxis

سوق سياحي مُحوكَم لتخطيط الرحلات وحجزها ودفع تكاليفها

عرض المشروع