مولّد كود تضمين ثلاثي الأبعاد

أربع طرق لوضع نموذج على صفحة، وكلها كاملة

تضمين نموذج ثلاثي الأبعاد من تلك المهام التي يكون فيها الكود النموذجي صحيحًا تقريبًا على الدوام. المقتطف الموجود في التوثيق يغفل معالج تغيير الحجم. وتنسى تدوينة المدونة استدعاء controls.update()، فيتوقف التخميد عن العمل دون أي تحذير. ويتخطى مثال React حدَّ Suspense فيفشل عند أول عملية عرض. أما هذا المولّد فيخرج الكود كاملًا، وبداخله الإعدادات التي اخترتها فعلًا.

<model-viewer>

مكوّن الويب من Google هو أقصر طريق من الصفر إلى عارض يعمل: وسم <script type="module"> واحد وعنصر مخصص واحد. وهو يتكفل وحده بالتحكم بالكاميرا والدوران التلقائي والواقع المعزز على Android وiOS معًا والإضاءة القائمة على الصور وصورة الملصق. إن أردت وضع نموذج على صفحة تسويقية بعد ظهر اليوم، فاستخدم هذا.

يتضمن الوسم المولَّد الخاصية touch-action="pan-y"، وهي سهلة الإغفال، وهي الفارق بين عارض يبدو أصيلًا على الهاتف وآخر يتنازع مع تمرير الصفحة.

Three.js

لمشهد تتحكم به بنفسك. يستورد المقتطف من three/addons/* — وهو مسار تصدير فرعي حقيقي داخل حزمة three، لذا يعمل مع أي أداة تجميع — ثم يهيئ المُصيِّر مع Tone Mapping من نوع ACES وقيمة التعريض التي اخترتها، ويبني بيئة استوديو محايدة عبر PMREMGenerator وRoomEnvironment، ويضيف OrbitControls مع التخميد، ويحمّل النموذج عبر GLTFLoader، ويعالج تغيير الحجم، ويعمل من خلال renderer.setAnimationLoop() بدلًا من requestAnimationFrame المجرد، حتى تستمر الحلقة نفسها بالعمل إذا دخلت الصفحة لاحقًا في WebXR.

React Three Fiber

نسخة React: حزمة @react-three/fiber للوحة الرسم، وحزمة @react-three/drei من أجل useGLTF وOrbitControls وEnvironment وContactShadows. ويُستدعى useGLTF.preload() خارج المكوّن ليبدأ الجلب قبل أن يعرض React، ويقع النموذج داخل حدِّ Suspense مع بديل تقدم حقيقي مدفوع بـuseProgress.

صفحة HTML مستقلة

ملف index.html كامل: تعريف النوع، ووسم viewport، والأنماط، وسكربت CDN، والعارض. احفظه وارفعه إلى أي استضافة ثابتة، وانتهى الأمر. وهذا ليس نفسه المقتطف الأول: ذاك جزء يُدرَج في صفحة قائمة، وهذا ملف كامل.

مسافة الكاميرا

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