1. تعطل المتصفح بعد الظهر

في العام الماضي، بيم تولت شركة استشارات تقنية مشروعًا لتصميم نماذج مرئية على الويب لقطاع البناء. بدت المتطلبات واضحة بما فيه الكفاية: عرض نموذج Revit مقدم من العميل في المتصفح، مع دعم التنقل الافتراضي، والنقر على المكونات، وفحص العقار.

اعتقد فريق المشروع أن الأمر سيكون بسيطًا. تثبيت three.js، ثم البحث عن أداة لتحويل ملفات .rvt إلى .جلبقم بتحميله باستخدام GLTFLoader، وانتهى الأمر.

ثم أرسل العميل ملفات النموذج.

كان حجم الأرشيف المضغوط 12 جيجابايت.

بعد الاستخراج، بلغ حجم ملف النموذج الرئيسي الواحد 8.7 جيجابايت. لجأ الفريق إلى أداة تقليدية لتحويله إلى صيغة glTF، واستغرقت عملية التحويل 40 دقيقة، وأنتجت ملفًا بصيغة glb بحجم 6 جيجابايت. قاموا بإضافته إلى مشروعهم Three.js، و...

انتقل المتصفح مباشرة إلى شاشة بيضاء.

كانت وحدة التحكم تحتوي على سطر واحد: نفاد الذاكرة.

بصراحة، كان الفريق مصدوماً. لم يكن الأمر يتعلق ببطء الأداء، ولا بانخفاض معدل الإطارات - بل لم يكن يعمل على الإطلاق.

ثانياً: محاولات الإنقاذ (ولماذا فشلت جميعها)

وعلى مدى الأسبوعين التاليين، قام الفريق بالبحث في كل منتدى تقني استطاعوا العثور عليه.

المحاولة الأولى: ضغط دراكو

قاموا بضغط ملف glTF باستخدام برنامج Draco ثم قاموا بتحميله. انخفض حجم الملف من 6 جيجابايت إلى 1.8 جيجابايت - بدا هذا واعدًا.

لكن عملية تحليل كود جافا سكريبت الرئيسية استغرقت أكثر من 90 ثانية، وخلالها تجمدت الصفحة تمامًا. كان على المستخدمين الانتظار دقيقة ونصف بعد فتح الصفحة. لم يكن أحد ليقبل بذلك.

المحاولة الثانية: مستوى التفاصيل اليدوي

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

المحاولة الثالثة: التحويل السحابي

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

بعد ما يقرب من شهر من المعاناة، توصلت شركة الاستشارات في مجال نمذجة معلومات المباني (BIM) إلى نتيجة يصعب تقبلها:

لا يوجد أي خلل في Three.js بحد ذاته. تكمن المشكلة في أنه يتعامل مع بيانات ثلاثية الأبعاد/نمذجة معلومات المباني (BIM) ذات جودة صناعية، وليس مع أصول ألعاب. هذان عالمان مختلفان تماماً.

بعد أن عجزت شركة استشارات BIM عن حل المشكلة بفريقها الخاص، لجأت إلى شركة 3D Expert Co.,Ltd.

ثالثًا: الأساس التقني لخبير ثلاثي الأبعاد

تتمتع شركة 3D Expert Co.,Ltd.، التي يقع مقرها الرئيسي في أوساكا، اليابان، بخبرة تراكمت على مر السنين في مجال معالجة نماذج وبيانات ثلاثية الأبعاد/BIM واسعة النطاق. لم يكن هذا حلاً تم تجميعه على عجل، بل إن فريق العمل منخرط منذ فترة طويلة في الجوانب الأساسية لتحليل البيانات ثلاثية الأبعاد على المستوى الصناعي، والمعالجة الخفيفة، وعرض الويب عالي الأداء، مع فهم دقيق للهياكل الداخلية للتنسيقات الصناعية الشائعة، بما في ذلك Revit وIFC وSolidWorks وBentley.

فور تلقي فريق خبراء التصميم ثلاثي الأبعاد طلب المساعدة من شركة استشارات نمذجة معلومات المباني (BIM)، تمكنوا من تحديد المشكلة بسرعة. وخلال تحليلهم، قاموا بتقسيم نقاط الضعف التي تواجهها مكتبة Three.js مع النماذج الكبيرة إلى أربع طبقات:

لم يكن هذا بالأمر الذي يمكن إصلاحه بتحديث بسيط لـ Three.js، بل تطلب تغييرات هيكلية جذرية في أساس عملية العرض. وهذا تحديدًا هو المجال الذي يتمتع فيه فريق 3D Expert بخبرة سنوات طويلة.

رابعاً: مقارنة الحلول المتاحة

قام فريق خبراء التصميم ثلاثي الأبعاد بمراجعة كل حل تمكنوا من إيجاده:

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

بالاستناد إلى سنوات من الخبرة التقنية المتراكمة، قدم فريق خبراء التصميم ثلاثي الأبعاد إجابتهم الخاصة: أداة تحميل rapid3D لـ three.js.

خامساً: كيف يحل برنامج rapid3D Loader الخاص بـ three.js هذه المشاكل

لا يُعدّ rapid3D Loader for three.js مجرد غلاف لـ Three.js، ولا هو أداة بسيطة لتحويل الصيغ. بل هو مسار عمل متكامل يبدأ من تحويل النموذج وينتهي بعرض الواجهة الأمامية.

الهندسة المعمارية: نموذج المنتج والمستهلك

┌─────────────────────────────┐ ┌───────────────────────────────────┐ │ مولد ملفات الخيارات (المنتج)│ ────► │ برنامج تحميل rapid3D JS حزمة │ │ │ │ (للمستخدم) │ │ · تعمل محليًا، بدون استخدام السحابة │ │ · منشورة كحزمة npm │ │ تحميلات │ │ · تُدمج في مشاريع Three.js │ │ · تحليل أصلي لأكثر من 20 تنسيقًا │ │ · تحميل متوازي متعدد العمال │ │ تنسيقات │ │ · تحميل LOD ديناميكي متعدد المستويات │ │ · توليد هندسة .opt │ │ · عرض الأجزاء + عرض النسخ │ │ ملفات │ │ عرض │ │ · توليد خاصية .db │ │ · واجهة برمجة تطبيقات مفتوحة │ │ قواعد بيانات │ │ │ │ · إصدار ويندوز متوفر │ │ │ │ للتنزيل │ │ │ └───────────────────────────┘ └───────────────────────────────────┘ 

المزايا الأساسية لهذا التصميم:

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

أربع تقنيات أساسية ترفع الأداء إلى مستويات قياسية

1. تحميل قائمة انتظار متعددة العمال

// تحميل الملفات الكبيرة باستخدام Three.js الأصلي: أحادي الخيوط، ويتوقف عند التوقف const loader = new GLTFLoader (); loader.load ( 'model.glb' , ( gltf ) => { // قد تستغرق هذه الخطوة 90 ثانية، وخلالها تكون الصفحة غير مستجيبة تمامًا scene.add ( gltf.scene ); }); // مُحمِّل rapid3D: معالجة متوازية متعددة العمال في الخلفية // واجهة برمجة التطبيقات بسيطة بنفس القدر، ولكن يتم تعيين خيوط العامل تلقائيًا داخليًا rapidLoader.load ( 'model.opt' , { onProgress : ( percent ) => console.log ( ` ${percent} %` ) // تتوفر ملاحظات التقدم }); 

يتم تقسيم عملية تحليل الملفات الكبيرة إلى مهام متوازية، مما يتيح الاستفادة الكاملة من وحدات المعالجة المركزية متعددة النوى. لا حاجة للمطورين لإدارة سلاسل العمل يدويًا.

2. تحميل مستوى التفاصيل الديناميكي متعدد المستويات

هذه هي التقنية الأساسية وراء قدرة برنامج rapid3D Loader على التحميل في أقل من ثانية. فبدلاً من تحميل النموذج بأكمله في الذاكرة دفعة واحدة، يقوم البرنامج بتحميل بيانات النموذج ديناميكيًا بمستويات دقة مختلفة بناءً على زاوية رؤية الكاميرا والمسافة. ما يراه المستخدم هو ما يتم تحميله، أما ما لا يراه فلا يستهلك موارد النظام.

هذا يعني أنه حتى عند التعامل مع نموذج Revit بحجم 8.7 جيجابايت، لا يحتاج المستخدمون إلى انتظار تحميل الملف بالكامل، فالبيانات المطلوبة لعرض الشاشة الأولي ضئيلة، مما يُبقي أوقات التحميل أقل من 10 ثوانٍ. من عرض شامل للحرم الجامعي إلى لقطة مقرّبة لمسمار واحد، يقوم نظام التحميل متعدد المستويات (LOD) بجدولة موارد النموذج ديناميكيًا بمستويات دقة مختلفة بناءً على مسافة الكاميرا، ومساحة الشاشة، وسرعة الحركة، مع الحفاظ على معدلات إطارات ثابتة طوال الوقت.

3. عرض الأجزاء + العرض المُستنسخ

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

4. استبعاد الأجزاء غير المرئية + الاستبعاد الديناميكي + الرسم المخزن مؤقتًا

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

سلامة البيانات: أكثر ما يُثير إعجاب عملاء نمذجة معلومات المباني (BIM)

بعد إتمام معظم حلول تحويل التنسيق، يصبح النموذج عبارة عن مجموعة من "الشبكات المجوفة". تنقر على أحد المكونات ولا يتعرف البرنامج حتى على ماهيته - هل هو جدار؟ عمود؟ أنبوب؟ كل شيء ضائع.

يختلف برنامج rapid3D Loader عن غيره. فمن خلال إضافات تصدير مخصصة (إضافة لكل من Revit وBentley وTekla وRhino وNavisworks وSolidWorks وInventor وSiemens NX وPTC Creo)، فإنه يحافظ على معرفات المكونات والعلاقات الهرمية ومعلمات المواد والخصائص الاحترافية إلى جانب استخراج البيانات الهندسية، ويخزنها في ملفات قاعدة بيانات ذات هياكل جداول موثقة بشكل عام.

وهذا يُمكّنك من القيام بأشياء مثل هذه:

// اختيار مكون const mesh = pickMesh (event); const componentId = mesh. userData . componentId ; // استعلام عن الخصائص الكاملة من ملف قاعدة البيانات const properties = await dbLoader. getComponentProperties (componentId); console . log (properties); // { // id: 'wall-001', // type: 'Structural Wall', // material: 'C30 Concrete', // thickness: 200, // mm // level: 'F2', // ... // } 

هذا أمر بالغ الأهمية لتطبيقات BIM - حيث يمكن للمستخدمين النقر على عمود وعرض معلومات المكونات الكاملة.

مجموعة التنسيقات المدعومة شاملة: Revit، SolidWorks، Bentley، Tekla، IFC، FBX، STEP، 3DXML، skp، dae، stp، stl، iges، rvm، vue، obj - تغطي جميع تنسيقات 3D الصناعية السائدة.

سادساً: التكامل بسيط في الواقع

العملية برمتها تتكون من ثلاث خطوات فقط:

الخطوة 1: قم بتنزيل مولد ملفات Opt

ثَبَّتَ مولد ملفات الخيارات (أداة تحويل تنسيق النموذج) على نظام ويندوز، حدد ملف النموذج الخاص بك، ثم اختر .opt كصيغة تصدير. يتم كل شيء محليًا - لا يتم تحميل أي شيء.

التحميل من: https://www.opt3ds.com/ أو https://www.3dexpert.jp/

الخطوة الثانية: تثبيت حزمة npm

npm install opt-rapid3d-loader 

حزمة npm: https://www.npmjs.com/package/opt-rapid3d-loader

الخطوة 3: اكتب بضعة أسطر من التعليمات البرمجية

import { RapidLoader } from 'opt-rapid3d-loader' ; const scene = new THREE . Scene (); // ... كود تهيئة Three.js الخاص بك ... const loader = new RapidLoader (); loader. load ( 'path/to/model.opt' , { onProgress : ( p ) => updateLoadingBar (p), onComplete : ( model ) => { scene. add (model); // كل شبكة في النموذج هي شبكة Three.js قياسية // منطق التفاعل الحالي، والظلال، وكود العمل — لا حاجة لأي تغييرات } }); 

يقوم برنامج التحميل بإنتاج كائنات شبكة Three.js القياسية، مما يعني أن كل ما كتبته سابقًا متوافق تمامًا. لا حاجة للبدء من جديد.

سابعاً: بيانات الأداء في العالم الحقيقي

الاختبارات التي أجريت على نفس الجهاز (i7-12700 / 32 جيجابايت من ذاكرة الوصول العشوائي / RTX 3060 / Chrome 120):

استخدم الحل الأصلي برنامج GLTFLoader مع ضغط Draco. تسبب النموذج بحجم 8.7 جيجابايت في حدوث خطأ نفاد الذاكرة - لم يبدأ التشغيل أصلاً.

شكراً لـ تقنية تحميل مستوى التفاصيل الديناميكية متعددة المستوياتلا يحتاج برنامج rapid3D Loader إلى انتظار تحميل النموذج بالكامل قبل عرض الشاشة الأولية. يتم تحميل كل من نموذج Revit بحجم 8.7 جيجابايت ونموذج IFC بحجم 1.2 جيجابايت في أقل من 10 ثوانٍ. بالمقارنة مع Three.js الأصلي، تتحسن سرعة تحميل النماذج بمقدار 3 أضعاف أو أكثر، ويتحسن معدل عرض الإطارات للنماذج الكبيرة بمقدار 10 أضعاف أو أكثر.انخفضت استدعاءات الرسم من 12000 إلى 380 - لا يمكن تمييزها بصريًا، لكن استقرار معدل الإطارات يتحدث عن نفسه.

تم حل المشكلة التي لم تستطع شركة استشارات BIM حلها بسهولة تامة باستخدام برنامج rapid3D Loader.

ثامناً: حالات الاستخدام

إذا كان مشروعك يستوفي أيًا من هذه المعايير، فمن المفيد قضاء نصف ساعة لتجربة عرض توضيحي:

• يلزم تحميل تنسيقات نماذج ثلاثية الأبعاد/BIM احترافية مثل Revit / SolidWorks / IFC
• يتجاوز حجم ملف النموذج الواحد 500 ميجابايت
• لدى العميل متطلبات أمنية خاصة بالبيانات (لا يمكن التحميل إلى السحابة).
• الحاجة إلى تفاعل على مستوى المكونات (النقر للاستعلام عن الخصائص، والتعليق اللوني، والإظهار/الإخفاء، وما إلى ذلك).
• لا أريد أن أكون مقيدًا بحل مغلق المصدر، وأحتاج إلى مواصلة التطوير بالاعتماد على Three.js

الصناعات المعنية: بناء السفن/الهندسة البحرية، والفضاء، والطاقة، والبتروكيماويات، والتصنيع المتقدم، والمدن الذكية، والتصميم المعماري - أي مشروع تصور ويب يستخدم نماذج ثلاثية الأبعاد احترافية.

تاسعاً: نبذة عن شركة ثري دي إكسبيرت المحدودة.

تتخذ شركة 3D Expert Co.,Ltd. من مدينة أوساكا اليابانية مقرًا لها، وتتمتع بسنوات من الخبرة المتراكمة في مجال معالجة نماذج وبيانات ثلاثية الأبعاد/BIM واسعة النطاق. وتكرس الشركة جهودها لسد الفجوة التقنية بين محركات العرض ثلاثي الأبعاد العامة والبيانات الصناعية، موفرةً لعملائها مسارًا متكاملًا بدءًا من تحويل تنسيق النموذج وصولًا إلى العرض عالي الأداء على الويب.

أداة تحميل rapid3D لـ three.js يُعدّ هذا المنتج الأساسي لفريق 3D Expert، حيث يجمع بين تحويل الصيغ، والمعالجة الخفيفة، والعرض عالي الأداء، والتفاعل مع البيانات، كل ذلك في مسار متكامل واحد. وبما أن الناتج عبارة عن كائنات Three.js Mesh قياسية، فلن تكون مقيدًا بأي نظام بيئي احتكاري.

كيفية البدء

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

بعد تنزيل برنامج Opt file Generator، حدد .opt كصيغة تصدير، ويمكن لحزمة rapid3D Loader JS تحميلها وعرضها مباشرة.

الخاتمة

يُعدّ Three.js أداةً رائعة، لكنّه مصمّم كمحرك عرض ثلاثي الأبعاد للأغراض العامة، وليس كحلّ BIM صناعيّ. عند التعامل مع بيانات صناعية حقيقية، تبرز طبقة كاملة من التقنيات المفقودة التي يجب سدّها، وهذا تحديدًا ما يعمل عليه فريق 3D Expert منذ سنوات.

يُسدّ برنامج rapid3D Loader الخاص بـ three.js هذه الثغرة. أهم ما يمكن استخلاصه بعد استخدامه: أخيرًا، ستتوقف عن التعامل مع النماذج الكبيرة. ركّز على كتابة منطق الأعمال، وركّز على بناء التفاعلات.

إذا كنت تعمل أيضاً على تصميم نماذج ثلاثية الأبعاد للويب، يسعدنا التواصل معك. شاركنا تجاربك، والتحديات التي واجهتك، والحلول التي جربتها - لنتحدث.

شركة ثري دي إكسبيرت المحدودة 📍 أوساكا، اليابان 🌐 https://www.opt3ds.com/ | https://www.3dexpert.jp/ 📦 npm: https://www.npmjs.com/package/opt-rapid3d-loader

© 2010–2026 شركة ثري دي إكسبيرت المحدودة. جميع الحقوق محفوظة.