تحميل نماذج ثلاثية الأبعاد

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

يوفر هذا الدليل سير عمل موصى به لمعظم المستخدمين ، واقتراحات لما يجب تجربته إذا لم تسير الأمور كما هو متوقع.

قبل أن نبدأ

إذا كنت جديدًا في تشغيل خادم محلي ، فابدأ بكيفية إدارة الأشياء محليًا [link:#manual/introduction/How-to-run-things-locally how to run things locally] أولاً. يمكن تجنب العديد من الأخطاء الشائعة أثناء عرض النماذج ثلاثية الأبعاد عن طريق استضافة الملفات بشكل صحيح.

سير العمل الموصى به

حيثما أمكن ، نوصي باستخدام glTF (تنسيق نقل GL). كلا النسختين .GLB و .GLTF من التنسيق مدعومة بشكل جيد. نظرًا لأن glTF يركز على تسليم أصول وقت التشغيل ، فهو مضغوط للإرسال وسريع التحميل. تتضمن الميزات الشبكات والمواد والأنسجة والجلود والهياكل العظمية والأهداف المتحولة والرسوم المتحركة والأضواء والكاميرات.

تتوفر ملفات glTF عامة على مواقع مثل Sketchfab، أو أدوات متنوعة تتضمن تصدير glTF:

إذا كانت أدواتك المفضلة لا تدعم glTF ، ففكر في طلب تصدير glTF من المؤلفين ، أو النشر على the glTF roadmap thread.

عندما لا يكون glTF خيارًا ، تتوفر أيضًا التنسيقات الشائعة مثل FBX أو OBJ أو COLLADA ويتم صيانتها بانتظام.

التحميل

يتم تضمين عدد قليل فقط من عناصر التحميل (على سبيل المثال [page:ObjectLoader]) بشكل ألي مع three.js - يجب عليك إضافة الآخرين إلى تطبيقك بشكل فردي.

import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';

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

var loader = new GLTFLoader(); loader.load( 'path/to/model.glb', function ( gltf ) { scene.add( gltf.scene ); }, undefined, function ( error ) { console.error( error ); } );

انظر [page:GLTFLoader GLTFLoader documentation] لمزيد من التفاصيل.

إستكشاف الأخطاء وإصلاحها

إن كنت قد أمضيت ساعات في تصميم تحفة فنية ، وقمت بتحميلها في صفحة الويب ، و- لا! 😭 إنه مشوه أو مفقود تمامًا. ابدأ بالخطوات التالية لاستكشاف الأخطاء وإصلاحها:

  1. تحقق من وحدة تحكم جافا سكريبت بحثًا عن أخطاء ، وتأكد من استخدام رد اتصال onError عند استدعاء .load () لتسجيل النتيجة.
  2. اعرض النموذج في تطبيق آخر. بالنسبة إلى glTF ، تتوفر عارضات السحب والإفلات لـ three.js و babylon.js. إذا ظهر النموذج بشكل صحيح في تطبيق واحد أو أكثر ، إرفع إعلان وجود خطأ ضد المكتبة. إذا تعذر عرض النموذج في أي تطبيق ، فإننا نشجع بشدة على تسجيل خطأ في التطبيق المستخدم لإنشاء النموذج.
  3. حاول تكبير النموذج لأعلى أو لأسفل بعامل 1000. يتم قياس العديد من الأمثلة بشكل مختلف ، وقد لا تظهر الأمثلة الكبيرة إذا كانت الكاميرا داخل النموذج.
  4. حاول إضافة مصدر ضوء وتحديد موضعه. قد يكون النموذج مخفيًا في الظلام.
  5. ابحث عن طلبات النسيج الفاشلة في علامة تبويب الشبكة ، مثل C:\\Path\To\Model\texture.jpg. استخدم المسارات المتعلقة بنموذجك بدلاً من ذلك ، مثل images/texture.jpg - قد يتطلب ذلك تعديل ملف النموذج في محرر نصي.

طلب المساعدة

إذا مررت بعملية استكشاف الأخطاء وإصلاحها أعلاه ولا يزال نموذجك لا يعمل ، فإن الطريقة الصحيحة لطلب المساعدة ستوصلك إلى حل بشكل أسرع. انشر سؤالاً على منتدى المكتبة three.js forum وحيثما أمكن ، قم بتضمين النموذج الخاص بك (أو نموذج أبسط بنفس المشكلة) بأي تنسيقات متوفرة لديك. قم بتضمين معلومات كافية لشخص آخر لإعادة إنتاج المشكلة بسرعة - من الناحية المثالية ، عرض توضيحي مباشر.