غالبًا ما يُنظر إلى الويب على أنه وسيط ثنائي الأبعاد. ولكي نكون منصفين ، فهو كذلك. هذا ما تم تصميمه ل.
ما هو أكثر من ذلك ، فإن إضافة الرسومات ثلاثية الأبعاد ، التي يتم بثها مباشرة ، تحتوي على مكونات إضافية مطلوبة تقليديًا. أعطتنا ماكروميديا Shockwave ، Unity أعطتنا Unity Web Player ، وطوال الوقت ، استخدمنا الرسومات ثلاثية الأبعاد للألعاب ، معظمها.
ولكن HTML5 و CSS3 وبعض جافا سكريبت الابتكاري قاموا بالكثير لتغيير ذلك. أوه ، لا يزال يستخدم في الغالب للألعاب ، ولكن يمكنك أن تأخذها إلى أبعد من ذلك ، ودمج الرسومات في موقع عادي بسهولة أكبر من أي وقت مضى.
بالتأكيد ، لا يزال لدينا مخاوف قابلية الاستخدام. لا يزال الموقع الذي يعتمد على الرسومات ثلاثية الأبعاد للتنقل أو المحتوى الأساسي فكرة رهيبة. ومع ذلك ، عندما تستخدم مع التحسين التدريجي ، 3D هو وسيلة قابلة للحياة ، وحتى ودية الأداء لأخذ الأمور درجة.
تحقيقا لهذه الغاية ، أقدم voxel.css .
voxel.css عبارة عن إطار يستخدم CSS3 للقيام بالرفع الثقيل لتحويل الكائنات ثلاثية الأبعاد. يتم استخدام جافا سكريبت لإضافة التفاعلية ، وتحريك الرسوم المتحركة ، إلى حد كبير كل شيء آخر.
حسنًا ، هذه هي CSS التي نتحدث عنها. لن تحصل على رسومات على مستوى Crysis. كما يوحي اسم هذا الإطار ، ما تحصل عليه هو الكثير من المكعبات. اعتقد ماين كرافت في المتصفح. (وسوف يقوم شخص ما ببناء ماين كرافت مع هذا في ثلاثة ... اثنين ...)
لا يزال ، يمكنك القيام ببعض الأشياء المثيرة للإعجاب مع الرسومات ممتلئ الجسم. فكر في الأمر على أنه يأخذ فنًا من 8 بتات إلى مستوى جديد تمامًا.
يتطلب التنفيذ الأساسي لـ voxel.css فقط تضمين المكتبة و 15 سطرًا من الكود. يؤدي ذلك إلى إنشاء مشهد افتراضي قابل للتحديث يمكنك من خلاله تعديل النماذج ونمط الإشارة والنقر.
يمكنك بعد ذلك عرض هذه المشاهد على أي صفحة ويب وتحريكها حسب الرغبة.
استخدم PNG for transparent ، أو GIF للصور المتحركة ، أو ملف SVG لقابلية غير محدودة. استخدم JPG لأسباب غير معروفة ، أو تنسيق WebP لأنك تعجبك الأشياء التي لم يتم تنفيذها في جميع المتصفحات حتى الآن.
هناك حتى التجريبي ذلك يستخدم لقطات حية من كاميرا الويب الخاصة بك كما القوام للكتل.
مرة أخرى ، إنها CSS3. يمكنك استخدام قوة العرض العليا لبطاقة الرسومات الخاصة بالجهاز (أو الشريحة ، حسب الحالة) لعرض عملك. لا داعي للقلق بشأن الرسومات المتقطعة على أي شيء ولكن أبطأ الأجهزة المحمولة. (يجب أن تستخدم التراجع لأولئك في أي حال).
voxel.css هي طريقة بسيطة وغير منطقية للحصول على بعض الخير الثلاثي الأبعاد في تطبيق الويب أو الصفحة أو الموقع أو اللعبة. جرّب ذلك ، وانظر إلى العروض التوضيحية ، واعرف ما إذا كان مناسبًا لمشروعك.