|
|
@@ -0,0 +1,135 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html lang="ar">
|
|
|
+
|
|
|
+<head>
|
|
|
+ <meta charset="utf-8">
|
|
|
+ <base href="../../../" />
|
|
|
+ <script src="list.js"></script>
|
|
|
+ <script src="page.js"></script>
|
|
|
+ <link type="text/css" rel="stylesheet" href="page.css" />
|
|
|
+</head>
|
|
|
+
|
|
|
+<body class="rtl">
|
|
|
+ <h1>تحميل نماذج ثلاثية الأبعاد</h1>
|
|
|
+
|
|
|
+ <p>
|
|
|
+ تتوفر النماذج ثلاثية الأبعاد في مئات من تنسيقات الملفات ، ولكل منها أغراض مختلفة وميزات متنوعة وتعقيد متفاوت. برغم من أن
|
|
|
+ <a href="https://github.com/mrdoob/three.js/tree/dev/examples/jsm/loaders" target="_blank" rel="noopener">
|
|
|
+ مكتبة three.js توفر العديد من عناصر التحميل</a>، فإن اختيار التنسيق المناسب وسير العمل سيوفر الوقت والإحباط لاحقًا. يصعب العمل مع بعض التنسيقات ، أو أنها غير فعالة في تجارب الوقت الفعلي ، أو ببساطة غير مدعومة بالكامل في هذا الوقت.
|
|
|
+ </p>
|
|
|
+
|
|
|
+ <p>
|
|
|
+ يوفر هذا الدليل سير عمل موصى به لمعظم المستخدمين ، واقتراحات لما يجب تجربته إذا لم تسير الأمور كما هو متوقع.
|
|
|
+ </p>
|
|
|
+
|
|
|
+ <h2>قبل أن نبدأ</h2>
|
|
|
+
|
|
|
+ <p>
|
|
|
+ إذا كنت جديدًا في تشغيل خادم محلي ، فابدأ بكيفية إدارة الأشياء محليًا [link:#manual/introduction/How-to-run-things-locally how to run things locally] أولاً. يمكن تجنب العديد من الأخطاء الشائعة أثناء عرض النماذج ثلاثية الأبعاد عن طريق استضافة الملفات بشكل صحيح.
|
|
|
+ </p>
|
|
|
+
|
|
|
+ <h2>سير العمل الموصى به</h2>
|
|
|
+
|
|
|
+ <p>
|
|
|
+ حيثما أمكن ، نوصي باستخدام glTF (تنسيق نقل GL). كلا النسختين <small> .GLB </small> و <small> .GLTF </small> من التنسيق مدعومة بشكل جيد. نظرًا لأن glTF يركز على تسليم أصول وقت التشغيل ، فهو مضغوط للإرسال وسريع التحميل. تتضمن الميزات الشبكات والمواد والأنسجة والجلود والهياكل العظمية والأهداف المتحولة والرسوم المتحركة والأضواء والكاميرات.
|
|
|
+ </p>
|
|
|
+
|
|
|
+ <p>
|
|
|
+ تتوفر ملفات glTF عامة على مواقع مثل
|
|
|
+ <a href="https://sketchfab.com/models?features=downloadable&sort_by=-likeCount&type=models" target="_blank" rel="noopener">
|
|
|
+ Sketchfab</a>، أو أدوات متنوعة تتضمن تصدير glTF:
|
|
|
+ </p>
|
|
|
+
|
|
|
+ <ul>
|
|
|
+ <li><a href="https://github.com/KhronosGroup/glTF-Blender-IO" target="_blank" rel="noopener">glTF-Blender-IO</a> بواسطة مجموعة Khronos</li>
|
|
|
+ <li><a href="https://github.com/KhronosGroup/COLLADA2GLTF" target="_blank" rel="noopener">COLLADA2GLTF</a> بواسطة مجموعة Khronos</li>
|
|
|
+ <li><a href="https://github.com/facebookincubator/FBX2glTF" target="_blank" rel="noopener">FBX2GLTF</a> بواسطة Facebook</li>
|
|
|
+ <li><a href="https://github.com/AnalyticalGraphicsInc/obj2gltf" target="_blank" rel="noopener">OBJ2GLTF</a> بواسطة Analytical Graphics Inc</li>
|
|
|
+ <li><a href="https://www.allegorithmic.com/products/substance-painter" target="_blank" rel="noopener">Substance Painter</a> بواسطة Allegorithmic</li>
|
|
|
+ <li><a href="https://www.foundry.com/products/modo" target="_blank" rel="noopener">Modo</a> بواسطة Foundry</li>
|
|
|
+ <li><a href="https://www.marmoset.co/toolbag/" target="_blank" rel="noopener">Toolbag</a> بواسطة Marmoset</li>
|
|
|
+ <li><a href="https://www.sidefx.com/products/houdini/" target="_blank" rel="noopener">Houdini</a> بواسطة SideFX</li>
|
|
|
+ <li><a href="https://labs.maxon.net/?p=3360" target="_blank" rel="noopener">Cinema 4D</a> بواسطة MAXON</li>
|
|
|
+ <li>و <a href="https://github.com/khronosgroup/gltf#gltf-tools" target="_blank" rel="noopener">المزيد…</a></li>
|
|
|
+ </ul>
|
|
|
+
|
|
|
+ <p>
|
|
|
+ إذا كانت أدواتك المفضلة لا تدعم glTF ، ففكر في طلب تصدير glTF من المؤلفين ، أو النشر على
|
|
|
+ <a href="https://github.com/KhronosGroup/glTF/issues/1051" target="_blank" rel="noopener">the glTF roadmap thread</a>.
|
|
|
+ </p>
|
|
|
+
|
|
|
+ <p>
|
|
|
+ عندما لا يكون glTF خيارًا ، تتوفر أيضًا التنسيقات الشائعة مثل FBX أو OBJ أو COLLADA ويتم صيانتها بانتظام.
|
|
|
+ </p>
|
|
|
+
|
|
|
+ <h2>التحميل</h2>
|
|
|
+
|
|
|
+ <p>
|
|
|
+ يتم تضمين عدد قليل فقط من عناصر التحميل (على سبيل المثال [page:ObjectLoader]) بشكل ألي مع
|
|
|
+ three.js - يجب عليك إضافة الآخرين إلى تطبيقك بشكل فردي.
|
|
|
+ </p>
|
|
|
+
|
|
|
+ <code>
|
|
|
+ import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
|
|
|
+ </code>
|
|
|
+
|
|
|
+ <p>
|
|
|
+ بمجرد قيامك باستيراد عنصر التحميل ، فأنت جاهز لإضافة نموذج إلى المشهد الخاص بك. يختلف بناء الجملة باختلاف عناصر التحميل - عند استخدام تنسيق آخر ، تحقق من الأمثلة والوثائق الخاصة بهذا المُحمل. بالنسبة إلى glTF ، سيكون الاستخدام مع البرامج النصية العامة:
|
|
|
+ </p>
|
|
|
+
|
|
|
+ <code>
|
|
|
+ var loader = new GLTFLoader();
|
|
|
+
|
|
|
+ loader.load( 'path/to/model.glb', function ( gltf ) {
|
|
|
+
|
|
|
+ scene.add( gltf.scene );
|
|
|
+
|
|
|
+ }, undefined, function ( error ) {
|
|
|
+
|
|
|
+ console.error( error );
|
|
|
+
|
|
|
+ } );
|
|
|
+ </code>
|
|
|
+
|
|
|
+ <p>
|
|
|
+ انظر [page:GLTFLoader GLTFLoader documentation] لمزيد من التفاصيل.
|
|
|
+ </p>
|
|
|
+
|
|
|
+ <h2>إستكشاف الأخطاء وإصلاحها</h2>
|
|
|
+
|
|
|
+ <p>
|
|
|
+ إن كنت قد أمضيت ساعات في تصميم تحفة فنية ، وقمت بتحميلها في صفحة الويب ، و- لا! 😭 إنه مشوه أو مفقود تمامًا. ابدأ بالخطوات التالية لاستكشاف الأخطاء وإصلاحها:
|
|
|
+ </p>
|
|
|
+
|
|
|
+ <ol>
|
|
|
+ <li>
|
|
|
+ تحقق من وحدة تحكم جافا سكريبت بحثًا عن أخطاء ، وتأكد من استخدام رد اتصال <em> onError </em> عند استدعاء <em> .load () </em> لتسجيل النتيجة.
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ اعرض النموذج في تطبيق آخر. بالنسبة إلى glTF ، تتوفر عارضات السحب والإفلات لـ
|
|
|
+ <a href="https://gltf-viewer.donmccurdy.com/" target="_blank" rel="noopener">three.js</a> و
|
|
|
+ <a href="http://sandbox.babylonjs.com/" target="_blank" rel="noopener">babylon.js</a>. إذا ظهر النموذج بشكل صحيح في تطبيق واحد أو أكثر ،
|
|
|
+ <a href="https://github.com/mrdoob/three.js/issues/new" target="_blank" rel="noopener">إرفع إعلان وجود خطأ ضد المكتبة</a>.
|
|
|
+ إذا تعذر عرض النموذج في أي تطبيق ، فإننا نشجع بشدة على تسجيل خطأ في التطبيق المستخدم لإنشاء النموذج.
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ حاول تكبير النموذج لأعلى أو لأسفل بعامل 1000. يتم قياس العديد من الأمثلة بشكل مختلف ، وقد لا تظهر الأمثلة الكبيرة إذا كانت الكاميرا داخل النموذج.
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ حاول إضافة مصدر ضوء وتحديد موضعه. قد يكون النموذج مخفيًا في الظلام.
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ ابحث عن طلبات النسيج الفاشلة في علامة تبويب الشبكة ، مثل <em>C:\\Path\To\Model\texture.jpg</em>. استخدم المسارات المتعلقة بنموذجك بدلاً من ذلك ، مثل <em> images/texture.jpg</em> - قد يتطلب ذلك تعديل ملف النموذج في محرر نصي.
|
|
|
+ </li>
|
|
|
+ </ol>
|
|
|
+
|
|
|
+ <h2>طلب المساعدة</h2>
|
|
|
+
|
|
|
+ <p>
|
|
|
+ إذا مررت بعملية استكشاف الأخطاء وإصلاحها أعلاه ولا يزال نموذجك لا يعمل ، فإن الطريقة الصحيحة لطلب المساعدة ستوصلك إلى حل بشكل أسرع. انشر سؤالاً على منتدى المكتبة
|
|
|
+ <a href="https://discourse.threejs.org/" target="_blank" rel="noopener">three.js forum</a> وحيثما أمكن ، قم بتضمين النموذج الخاص بك (أو نموذج أبسط بنفس المشكلة) بأي تنسيقات متوفرة لديك. قم بتضمين معلومات كافية لشخص آخر لإعادة إنتاج المشكلة بسرعة - من الناحية المثالية ، عرض توضيحي مباشر.
|
|
|
+ </p>
|
|
|
+
|
|
|
+</body>
|
|
|
+
|
|
|
+</html>
|
Hassan Muhamad