مواقع ثلاثية الأبعاد تفاعلية باستخدام Three.js وWebGL

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

راسلنا عبر واتساب
Dardo / رسم توضيحي تحريري
في هذه الصفحة

متى يحتاج الموقع إلى الأبعاد الثلاثية؟

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

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

ما الذي يشمله مشروع موقع ثلاثي الأبعاد

يحدد العرض المخرجات الداخلة في النطاق، ومن ينشئ الأصول ثلاثية الأبعاد أو يوفرها، وكيفية قبول كل بند.

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

Janus Observatory: واجهة ثلاثية الأبعاد لعشرة مستقبلات محتملة

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

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

الأداء وتحسين محركات البحث للمواقع ثلاثية الأبعاد

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

يُقاس الأداء على الأصول والأجهزة المستهدفة الفعلية، بدلًا من الوعد بمعدل إطارات موحد. نسجّل تسلسل التحميل، وتفاعلًا نموذجيًا، واستهلاك الذاكرة عند الحاجة، وأي خفض بصري مقبول على الهواتف الأضعف، سعيًا إلى بلوغ حدود Core Web Vitals من Google. نحن لا نضمن الترتيب في نتائج البحث؛ لكننا نتأكد من ألا تقف الطبقة ثلاثية الأبعاد بين محتواك والزاحف.

الحلول البديلة والحركة المخفضة وإمكانية الوصول

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

ما الذي يحدد تكلفة الموقع ثلاثي الأبعاد؟

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

المرحلة الأولى شريحة عمل صغيرة على هاتف ومتصفح مكتبي متفق عليهما، بنص حقيقي وأصل واحد نموذجي والتفاعل الفعلي. وهي تكشف مشكلات التنقل وحجم الملفات وزمن الإطار قبل إنتاج الباقي. كما يحدد العرض من يستطيع استبدال المحتوى والنماذج بعد الإطلاق. Dardo فريق من ثلاثة أشخاص في بوغوتا بقيادة المؤسس Nicolás Cerón، يعمل بالإنجليزية أو الإسبانية وفق توقيت شرق الولايات المتحدة ووسطها.

أسئلة قبل أن تختار

كم تبلغ تكلفة موقع ثلاثي الأبعاد؟

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

هل المواقع ثلاثية الأبعاد سيئة لتحسين محركات البحث؟

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

هل تعمل مواقع Three.js على الهواتف؟

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

هل يحتاج الموقع التفاعلي ثلاثي الأبعاد دائمًا إلى WebGL؟

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

من يُنشئ النماذج ثلاثية الأبعاد؟

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

كم يستغرق بناء موقع ثلاثي الأبعاد؟

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

هل يمكنكم إضافة مشهد ثلاثي الأبعاد إلى موقعنا الحالي؟

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

أعمال ودراسات ذات صلة

Janus Observatory: واجهة المشروع المنشورتجربة بحثية منفّذة / رسوميات تفاعليةJanus Observatoryاستكشف المدخل والأطلس والمرصد في هذا المشروع المطوَّر مع Blue Marble Space، ثم اقرأ أدلة التنفيذ وحدود البحث. يُظهر هذا التسليم التفاعلي؛ ولا يدّعي نتيجة تحويل للعميل.اطّلع على المشروع

من الفكرة إلى موجز تفاعلي

ابدأ مما يجب على الزائر استكشافه، لا من مؤثر بصري. اطّلع على Janus Observatory، وحدد الأصول والحل البديل، ثم اطلب من Dardo عرضًا مبنيًا على مشهد نموذجي.