---
title: "مواقع ثلاثية الأبعاد: متى تستحق وكيف تبقى سريعة — Dardo"
description: "مواقع ثلاثية الأبعاد: متى تستحق العناء، ومقارنتها بالفيديو والصور، وما تعلّمناه لإبقاء عوالم Janus Observatory العشرة سريعة وقابلة للاستخدام دون WebGL."
url: "https://dardo.studio/ar/blog/3d-websites/"
language: "ar"
translations: {"en":"https://dardo.studio/en/blog/3d-websites/","es":"https://dardo.studio/es/blog/paginas-web-3d/","fr":"https://dardo.studio/fr/blog/sites-web-3d/","de":"https://dardo.studio/de/blog/3d-website/","it":"https://dardo.studio/it/blog/siti-web-3d/","pt":"https://dardo.studio/pt/blog/sites-3d/","nl":"https://dardo.studio/nl/blog/3d-websites/","sv":"https://dardo.studio/sv/blogg/3d-webbplatser/","pl":"https://dardo.studio/pl/blog/strony-internetowe-3d/","uk":"https://dardo.studio/uk/blog/3d-websites/","ru":"https://dardo.studio/ru/blog/3d-websites/","hi":"https://dardo.studio/hi/blog/3d-websites/","th":"https://dardo.studio/th/blog/3d-websites/","ja":"https://dardo.studio/ja/blog/3d-websites/","ko":"https://dardo.studio/ko/blog/3d-websites/","zh-Hans":"https://dardo.studio/zh-Hans/blog/3d-websites/","zh-Hant":"https://dardo.studio/zh-Hant/blog/3d-websites/"}
updated: "2026-10-13T01:10:16.289Z"
---

[المدونة](https://dardo.studio/ar/blog/)

# المواقع ثلاثية الأبعاد (3D): متى تستحق العناء وكيف تحافظ على سرعتها

متى تستحق المواقع ثلاثية الأبعاد مكانها، ومتى يكون الفيديو أو الصور أفضل، وكيف أبقينا عوالم Janus Observatory العشرة سريعة وسهلة الوصول وقابلة للاستخدام.

بقلم [Nicolás Cerón](https://dardo.studio/ar/studio/) ·12 أكتوبر 2026

![داخل قبة فلكية قديمة ليلًا: جهاز إسقاط نجوم نحاسي يلقي نقاطًا كهرمانية من الضوء على قبة كحلية، وفوقه يحوم كوكب قرمزي صغير متعدد الأوجه.](https://dardo.studio/_astro/01M4S57YNVSKTAW62QJ0T2N659_Z2oYIIr.webp)

## أهم النقاط

- تستحق العناصر ثلاثية الأبعاد العناء حين يكون الموضوع مكانيًا أو حين يشرح استكشافه ما لا تشرحه الصورة؛ وفي غير ذلك تعمل الصور أو الفيديو عادةً بشكل أفضل.
- ابنِ الصفحة بحيث تعمل دون WebGL، وتعامل مع الطبقة ثلاثية الأبعاد كتحسين إضافي؛ فذلك يُبقي النصوص والبيانات مقروءة لمحركات البحث أيضًا.
- في Janus Observatory، خفّضت نسخ gzip حجم نقل 59 نموذجًا ثلاثي الأبعاد من 15.8 ميغابايت إلى 8.2 ميغابايت، مع الاحتفاظ بالملفات الأصلية بديلًا احتياطيًا.
- ضع ميزانيات لـJavaScript ووزن النماذج قبل بدء النمذجة، وتحقق منها في كل إصدار.
- ضع حدًا أقصى لنسبة البكسلات، واحترم إعداد تقليل الحركة، وامنح كل تفاعل مسارًا عبر لوحة المفاتيح، واختبر على هواتف حقيقية متوسطة الفئة.

## الإجابة المختصرة

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

يستند هذا الدليل إلى مشروعين من مشاريعنا: [Janus Observatory](https://dardo.studio/ar/work/janus-observatory/)، وهو تجربة في المتصفح تضم عشرة عوالم ثلاثية الأبعاد، وdardo.studio، الذي تُفتتح صفحته الرئيسية بمشهد ثلاثي الأبعاد يُعرض في الوقت الفعلي.

## متى تستحق العناصر ثلاثية الأبعاد مكانها

- **يحتاج الزائر إلى رؤية شيء من أكثر من زاوية:** منتج، أو مبنى، أو قطعة من المعدات.
- **المكان هو القصة:** خريطة، أو مخطط موقع، أو رحلة عبر أماكن.
- **التفاعل يشرح نظامًا** أسرع من النص، كما في مقارنة السيناريوهات أو استكشاف البيانات.
- **تجربة العلامة هي المنتج:** عمليات الإطلاق والمعارض والحملات التي يهم فيها الجو العام ويتوقع الزوار أن يستكشفوا.

## متى لا تستحق

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

## ثلاثي الأبعاد أم فيديو أم صور؟

| الخيار                                                     | مناسب لـ                                                 | انتبه إلى                                                                                        |
| ---------------------------------------------------------- | -------------------------------------------------------- | ------------------------------------------------------------------------------------------------ |
| عرض ثلاثي الأبعاد في الوقت الفعلي باستخدام WebGL أو WebGPU | الاستكشاف والتدوير والمقارنة والاستجابة لمدخلات المستخدم | وزن النماذج والشيفرة، والحمل على معالج الرسوميات (GPU)، وأعمال إمكانية الوصول، واختبار المتصفحات |
| الفيديو                                                    | عرض تسلسل أو أجواء بالطريقة نفسها في كل مرة              | حجم الملف، وقواعد التشغيل التلقائي، والترجمة النصية، وغياب التفاعل                               |
| الصور أو رسم متحرك قصير                                    | شرح فكرة واحدة بسرعة                                     | أقل رسوخًا في الذاكرة؛ ولا يمكن استكشافها                                                        |

يعمل [WebGL](https://developer.mozilla.org/en-US/docs/Web/API/WebGL%5FAPI) في كل المتصفحات الحديثة. أما [WebGPU](https://developer.mozilla.org/en-US/docs/Web/API/WebGPU%5FAPI) فأحدث وأسرع في بعض المهام، لكن دعمه لا يزال متفاوتًا، لذا خطّط لبديل احتياطي. فالمدخل ثلاثي الأبعاد في dardo.studio يحاول استخدام WebGPU أولًا ثم يرجع إلى WebGL 2، بينما صفحات الخدمات والأعمال والتواصل HTML عادي لا ينتظر أي مشهد ثلاثي الأبعاد.

## ما تعلّمناه من بناء Janus Observatory

يحوّل Janus Observatory عشرة سيناريوهات منشورة لمستقبل الأرض إلى قصة من 17 فصلًا وأطلس ومرصد، مع عشرة عوالم أصلية منخفضة المضلعات (low-poly) وعالِم فلك فضائي بمفاصل متحركة. ويعمل على الخطة المجانية لـCloudflare Workers، التي تضع حدًا لحجم التطبيق. ويسجّل تقرير الإصدار الخاص بالمشروع بتاريخ 27 سبتمبر 2026 ما تطلّبه الحفاظ على سرعته:

- **اضغط النماذج واحتفظ ببديل احتياطي.** تُشحن النماذج ثلاثية الأبعاد البالغ عددها 59 نموذجًا كنسخ gzip يبلغ مجموعها 8.2 ميغابايت بدلًا من 15.8 ميغابايت، أي أقل بنسبة 47.9% في التنزيل. أما المتصفحات التي لا تستطيع فك ضغطها فتحصل على الملفات الأصلية.
- **فك الترميز خارج الخيط الرئيسي، ثم التوقف.** يعمل فك ترميز Meshopt على عامل خلفي (background worker) واحد يتوقف بعد خمس ثوانٍ من الخمول.
- **ضع ميزانية لـJavaScript وألزم بها.** يبلغ حجم JavaScript الأولي للصفحة الرئيسية 197,059 بايت بعد ضغط gzip مقابل ميزانية قدرها 256,000 بايت، وتتحقق عملية البناء من ذلك.
- **انتبه لعواصف الطلبات.** أطلقت حلقة جلب مسبق تخميني (speculative prefetch) في حزمة Next.js وOpenNext ما مجموعه 11,704 طلبات في تتبّع واحد فاشل للمتصفح. وكان الحل إيقاف الجلب المسبق لتلك الروابط، وأصبحت الاختبارات تشترط ألا يصدر أي طلب تخميني.
- **ثبّت الدقة بدلًا من مطاردة معدل الإطارات.** تُعرض عناصر canvas بنسبة بكسلات جهاز ثابتة بين 1 و1.5. كما سحب التقرير رقمًا سابقًا لمعدل الإطارات كان يعتمد على خفض الدقة، لذا لا نذكر أي رقم.

## ابنِ الموقع ليعمل دون العناصر ثلاثية الأبعاد

لدى Janus قاعدة واحدة تحدد كل ما عداها: يجب أن تعمل التجربة الأساسية دون WebGL ودون ذكاء اصطناعي. فكل سجلات السيناريوهات العشرة تُحمَّل مع تعطيل JavaScript، وعناصر التحكم تعمل دون WebGL، والتدوير بلوحة المفاتيح والتركيز المرئي وتقليل الحركة بُنيت مع كل ميزة. وتسرد [صفحة إمكانية الوصول](https://janus-observatory.nicocerond.workers.dev/accessibility) الخاصة به عناصر التحكم والمكافئات غير البصرية والحدود المعروفة. والهدف هو المستوى AA من [WCAG 2.2](https://www.w3.org/TR/WCAG22/)، ويُتحقق منه باختبارات آلية في Chromium وFirefox وWebKit.

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

## قائمة تحقق لصفحة ثلاثية الأبعاد سريعة وسهلة الوصول

1. **اكتب الصفحة دون عناصر ثلاثية الأبعاد أولًا.** إذا لم تكن نسخة HTML مفهومة، فلن تصلحها العناصر ثلاثية الأبعاد.
2. **حدّد ما الذي تشرحه العناصر ثلاثية الأبعاد**، واحذف كل ما وُجد فقط ليبدو مبهرًا.
3. **ضع ميزانيات** لـJavaScript ووزن النماذج وحجم الخامات (textures) قبل أن تبدأ النمذجة، وتحقق منها في عملية البناء.
4. **اضغط النماذج** بأدوات مثل [meshoptimizer](https://meshoptimizer.org/)، وقدّمها بصيغة [glTF](https://www.khronos.org/gltf/)، واحتفظ ببديل غير مضغوط حين تعتمد على ميزات أحدث في المتصفحات مثل [DecompressionStream](https://developer.mozilla.org/en-US/docs/Web/API/DecompressionStream).
5. **حمّل المشهد بعد المحتوى**، وفقط حين يوشك أن يظهر.
6. **ضع حدًا أقصى لنسبة البكسلات** حتى لا تعرض الشاشات عالية الكثافة أربعة أضعاف البكسلات.
7. **احترم** [prefers-reduced-motion](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion)، وامنح كل تفاعل مسارًا عبر لوحة المفاتيح، وضع مكافئًا نصيًا بجانب كل عنصر canvas.
8. **اختبر على هواتف حقيقية متوسطة الفئة** وعلى أكثر من محرك متصفح، ثم تابع [Core Web Vitals](https://web.dev/articles/vitals) بعد الإطلاق.

## كم يكلّف

تضيف العناصر ثلاثية الأبعاد وقتًا للنمذجة والتحسين والاختبار فوق التصميم والتطوير، والبدائل الاحتياطية جزء من العمل لا إضافة عليه. وحين نسعّرها، تظهر في بند «حركة مخصصة أو عناصر ثلاثية الأبعاد أو بيانات تفاعلية» ضمن عوامل التكلفة التي نصفها في دليلنا حول [تكلفة تصميم موقع إلكتروني في كولومبيا](https://dardo.studio/ar/blog/website-cost-colombia/).

## كيف تبني Dardo المواقع ثلاثية الأبعاد

نصمّم التجارب ثلاثية الأبعاد ونبنيها من خلال خدمة [المواقع التفاعلية ثلاثية الأبعاد](https://dardo.studio/ar/services/interactive-3d-websites/)، وأعمال الحركة والتمرير الأخف من خلال [التطوير الإبداعي](https://dardo.studio/ar/services/creative-development/). ففي [Hyper](https://dardo.studio/ar/work/hyper/) بنينا قصة ثلاثية الأبعاد يقودها التمرير باستخدام React Three Fiber، تحوّل الإشارات المتفرقة إلى ملف عميل واحد. وإذا كانت لديك فكرة تحتاج إلى مساحة لتُفهم، [حدّثنا عنها](https://dardo.studio/ar/contact/?service=interactive-3d-websites).

## الأسئلة الشائعة

**هل تضر المواقع ثلاثية الأبعاد بـSEO؟**

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

**هل تعمل المواقع ثلاثية الأبعاد على الهواتف؟**

يمكن ذلك، مع ميزانيات لحجم النماذج وJavaScript، وحد أقصى لنسبة البكسلات، واختبار على هواتف حقيقية متوسطة الفئة. ووفّر دائمًا نسخة تعمل دون WebGL.

**هل أستخدم WebGL أم WebGPU؟**

يعمل WebGL في كل المتصفحات الحديثة. أما WebGPU فأحدث وقد يكون أسرع، لكن دعمه لا يزال متفاوتًا، لذا إذا استخدمته فخطّط لبديل احتياطي بـWebGL، كما تفعل الصفحة الرئيسية لموقع dardo.studio.

**هل يمكن أن يكون الموقع ثلاثي الأبعاد سهل الوصول؟**

يمكن ذلك، إذا بُنيت إمكانية الوصول مع كل ميزة: عناصر تحكم عبر لوحة المفاتيح، وتركيز مرئي، وتقليل الحركة، ومكافئ نصي بجانب كل عنصر canvas. ويستهدف Janus Observatory المستوى AA من WCAG 2.2.

## المصادر ومراجع للقراءة

المصادر التي تستند إليها هذه الصفحة، مع تفاصيل إضافية من الناشرين الأصليين.

- [Janus Observatory: إمكانية الوصول](https://janus-observatory.nicocerond.workers.dev/accessibility) · janus-observatory.nicocerond.workers.dev
- [MDN: واجهة WebGL البرمجية (WebGL API)](https://developer.mozilla.org/en-US/docs/Web/API/WebGL%5FAPI) · developer.mozilla.org
- [MDN: واجهة WebGPU البرمجية (WebGPU API)](https://developer.mozilla.org/en-US/docs/Web/API/WebGPU%5FAPI) · developer.mozilla.org
- [MDN: DecompressionStream](https://developer.mozilla.org/en-US/docs/Web/API/DecompressionStream) · developer.mozilla.org
- [MDN: prefers-reduced-motion](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion) · developer.mozilla.org
- [Khronos Group: glTF](https://www.khronos.org/gltf/) · khronos.org
- [meshoptimizer](https://meshoptimizer.org/) · meshoptimizer.org
- [W3C: إرشادات إمكانية الوصول إلى محتوى الويب (WCAG) 2.2](https://www.w3.org/TR/WCAG22/) · w3.org
- [web.dev: Web Vitals](https://web.dev/articles/vitals) · web.dev

[Nicolás Cerón](https://dardo.studio/ar/studio/)

نيكولاس سيرون هو مؤسس Dardo، استوديو للهوية البصرية وتصميم وتطوير المواقع الإلكترونية في بوغوتا، كولومبيا.

## مقالات ذات صلة

- [**كم تكلفة تصميم موقع إلكتروني في كولومبيا في 2026؟ أسعار حقيقية وما الذي يحرّك عرض السعر**تكلفة تصميم موقع إلكتروني في كولومبيا: أسعار منشورة ومؤرخة من مزوّدين في بوغوتا، والتكاليف السنوية الثابتة للنطاق والاستضافة، وما يحرّك عرض السعر فعلًا.](https://dardo.studio/ar/blog/website-cost-colombia/)
- [**نقل موقع Framer إلى Astro: كيف تنقل موقعك دون أن تخسر تصميمه أو ترتيبه في نتائج البحث**نقل موقع Framer إلى Astro إعادة بناء، فـFramer لا يتيح تصدير HTML. ما الذي تلتقطه أولًا، وما الذي يتعطل، وكيف تحافظ على التصميم والروابط والترتيب.](https://dardo.studio/ar/blog/framer-to-astro/)
- [**نقل موقع Webflow إلى Astro: كيف تنقل موقعك دون أن تخسر محتواه أو تصميمه أو ترتيبه في نتائج البحث**نقل موقع Webflow إلى Astro: تصدير الشيفرة لا يشمل محتوى CMS والنماذج والبحث واللغات. ما تأخذه من Webflow، وما تعيد بناءه، وكيف تحافظ على ترتيبك.](https://dardo.studio/ar/blog/webflow-to-astro/)
- [**نقل موقع WordPress إلى Astro: بنمط headless أو انتقال كامل، دون أن تخسر ترتيبك في نتائج البحث**نقل موقع WordPress إلى Astro: طريقتان للانتقال، وما تصدّره، وكيف تحافظ على عناوين Yoast والروابط الدائمة والمرفوعات، والروابط التي تنساها معظم عمليات الترحيل.](https://dardo.studio/ar/blog/wordpress-to-astro/)

## واصل الاستكشاف.

- [الخدمة · **مواقع ثلاثية الأبعاد تفاعلية باستخدام Three.js وWebGL**](https://dardo.studio/ar/services/interactive-3d-websites/)

- [مشروعك · **ابدأ المحادثة**](https://dardo.studio/ar/contact/)