كيفية بناء نموذج للواقع الافتراضي بمعاينة عبر الأجهزة في الوقت الفعلي

نشرت: 2022-03-10

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

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

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

التطوير من أجل الواقع الافتراضي

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

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

المتطلبات الأساسية

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

الوصول إلى الإنترنت ، وتحديداً موقع glitch.com ؛
سماعة رأس للواقع الافتراضي (اختيارية ، موصى بها). أستخدم Google Cardboard ، والذي يتم تقديمه بسعر 15 دولارًا للقطعة.

المزيد بعد القفز! أكمل القراءة أدناه ↓

الخطوة 1: إعداد نموذج الواقع الافتراضي (VR)

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

انقر فوق "مشروع جديد" في الجزء العلوي الأيمن.
انقر فوق "hello-express" في القائمة المنسدلة.

ابدأ بالانتقال إلى glitch.com — (معاينة كبيرة)

بعد ذلك ، انقر فوق views / index.html في الشريط الجانبي الأيسر. سوف نشير إلى هذا باسم "المحرر" الخاص بك.

ستكون الخطوة التالية هي النقر على views / index.html في الشريط الجانبي الأيسر والذي سيشار إليه باسم "المحرر". — (معاينة كبيرة)

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

مرة أخرى في المحرر الخاص بك ، استبدل HTML الحالي بالنموذج المعياري التالي لنموذج VR.

 <!DOCTYPE html> <html> <head> <script src="https://aframe.io/releases/0.7.0/aframe.min.js"></script> </head> <body> <a-scene> <!-- blue sky --> <a-sky color="#a3d0ed"></a-sky> <!-- camera with wasd and panning controls --> <a-entity camera look-controls wasd-controls position="0 0.5 2" rotation="0 0 0"></a-entity> <!-- brown ground --> <a-box shadow shadow="receive:true" color="#847452" width="10" height="0.1" depth="10"></a-box> <!-- start code here --> <!-- end code here --> </a-scene> </body> </html>

تصفح انظر ما يلي.

عند العودة إلى المعاينة الخاصة بك ، سترى ألوان bakground الأزرق والبني. — (معاينة كبيرة)

لمعاينة هذا على سماعة رأس VR ، استخدم عنوان URL في omnibar. في الصورة أعلاه ، عنوان URL هو https://point-and-click-vr-game.glitch.me/ . تم إعداد بيئة العمل الخاصة بك الآن ؛ لا تتردد في مشاركة عنوان URL هذا مع العائلة والأصدقاء. في الخطوة التالية ، ستقوم بإنشاء نموذج واقع افتراضي.

الخطوة الثانية: بناء نموذج شجرة

ستقوم الآن بإنشاء شجرة ، باستخدام الأوليات من aframe.io. هذه كائنات قياسية قام Aframe ببرمجتها مسبقًا لسهولة الاستخدام. على وجه التحديد ، يشير Aframe إلى الكائنات ككيانات . هناك ثلاثة مفاهيم تتعلق بجميع الكيانات لتنظيم مناقشتنا حول:

الهندسة والمواد
محاور التحول
التحولات النسبية.

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

يبسط Aframe هذا المفهوم بالنسبة لنا من خلال تحديد العناصر الأولية ، مثل <a-box> و <a-sphere> و <a-cylinder> وغيرها الكثير لجعل مواصفات الهندسة وموادها أبسط. ابدأ بتحديد كرة خضراء. في السطر 19 في الكود ، بعد  ، أضف ما يلي.

 <!-- start code here --> <a-sphere color="green" radius="0.5"></a-sphere> <!-- new line --> <!-- end code here -->

ثانيًا ، هناك ثلاثة محاور لتحويل الجسم على طول. يعمل المحور x أفقيًا ، حيث تزيد قيم x كلما تحركنا لليمين. يعمل المحور y عموديًا ، حيث تزداد قيم y كلما تحركنا لأعلى. ينفد المحور z من شاشتك ، حيث تزداد قيم z كلما تحركنا نحوك. يمكننا ترجمة الكيانات أو تدويرها أو قياسها على طول هذه المحاور الثلاثة.

على سبيل المثال ، لترجمة كائن "صحيح" ، نقوم بزيادة قيمة x الخاصة به. لتدوير جسم مثل قمة ، نقوم بتدويره على طول المحور ص. قم بتعديل السطر 19 لتحريك الكرة "لأعلى" - وهذا يعني أنك بحاجة إلى زيادة قيمة y للكرة. لاحظ أنه تم تحديد جميع التحويلات كـ <x> <y> <z> ، مما يعني زيادة قيمة y ، فأنت بحاجة إلى زيادة القيمة الثانية. بشكل افتراضي ، توجد جميع الكائنات في الموضع 0 ، 0 ، 0. قم بإضافة مواصفات position أدناه.

 <!-- start code here --> <a-sphere color="green" radius="0.5" position="0 1 0"></a-sphere> <!-- edited line --> <!-- end code here -->

ثالثًا ، جميع التحولات مرتبطة بوالدها . لإضافة جذع لشجرتك ، أضف أسطوانة داخل الكرة أعلاه. هذا يضمن أن يكون موضع جذعك متناسبًا مع موضع الكرة. في الأساس ، هذا يحافظ على شجرتك معًا كوحدة واحدة. أضف كيان <a-cylinder> بين علامتي <a-sphere ...> و </a-sphere> .

 <a-sphere color="green" radius="0.5" position="0 1 0"> <a-cylinder color="#84651e" position="0 -0.9 0" radius="0.05"></a-cylinder> <!-- new line --> </a-sphere>

لجعل هذه العظام المجردة الخالية من الأشجار ، أضف المزيد من أوراق الشجر ، في شكل دائرتين أخضرتين.

 <a-sphere color="green" radius="0.5" position="0 0.75 0"> <a-cylinder color="#84651e" position="0 -0.9 0" radius="0.05"></a-cylinder> <a-sphere color="green" radius="0.35" position="0 0.5 0"></a-sphere> <!-- new line --> <a-sphere color="green" radius="0.2" position="0 0.8 0"></a-sphere> <!-- new line --> </a-sphere>

انتقل مرة أخرى إلى المعاينة الخاصة بك ، وسترى الشجرة التالية:

عند العودة إلى المعاينة ، ستتمكن الآن من رؤية شجرة خضراء موضوعة في الخلفية. — (معاينة كبيرة)

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

الخطوة 3: إضافة انقر فوق التفاعل إلى النموذج

لجعل الكيان تفاعليًا ، ستحتاج إلى:

أضف رسم متحرك ،
اجعل هذه الرسوم المتحركة تؤدي إلى النقر.

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

 <a-entity camera look-controls wasd-controls position="0 0.5 2" rotation="0 0 0"> <a-entity cursor="fuse: true; fuseTimeout: 250" position="0 0 -1" geometry="primitive: ring; radiusInner: 0.02; radiusOuter: 0.03" material="color: black; shader: flat" scale="0.5 0.5 0.5" raycaster="far: 20; interval: 1000; objects: .clickable"> <!-- add animation here --> </a-entity> </a-entity>

يضيف ما سبق مؤشرًا يمكنه تشغيل إجراء النقر. لاحظ objects: .clickable property. هذا يعني أن جميع الكائنات التي تحتوي على الفئة "قابلة للنقر" ستؤدي إلى تشغيل الرسوم المتحركة وستتلقى أمر "click" عند الاقتضاء. ستضيف أيضًا رسمًا متحركًا إلى مؤشر النقر ، حتى يعرف المستخدمون متى يبدأ المؤشر نقرة. هنا ، سوف يتقلص المؤشر ببطء عند الإشارة إلى كائن قابل للنقر ، ثم ينطلق بعد ثانية للإشارة إلى أن الكائن قد تم النقر عليه. استبدل التعليق  بالكود التالي:

 <a-animation begin="fusing" easing="ease-in" attribute="scale" fill="backwards" from="1 1 1" to="0.2 0.2 0.2" dur="250"></a-animation>

انقل الشجرة إلى اليمين بمقدار وحدتين وأضف فئة "قابلة للنقر" إلى الشجرة ، عن طريق تعديل السطر 29 لمطابقة ما يلي.

 <a-sphere color="green" radius="0.5" position="2 0.75 0" class="clickable">

بعد ذلك ، سوف:

حدد رسمًا متحركًا ،
تشغيل الرسوم المتحركة بنقرة واحدة.

نظرًا لكيان الرسوم المتحركة سهل الاستخدام لـ Aframe ، يمكن إجراء كلتا الخطوتين في تتابع سريع.

أضف علامة <a-animation> في السطر 33 ، مباشرة بعد علامة <a-cylinder> ولكن قبل نهاية </a-sphere> .

 <a-animation begin="click" attribute="position" from="2 0.75 0" to="2.2 0.75 0" fill="both" direction="alternate" repeat="1"></a-animation>

تحدد الخصائص المذكورة أعلاه عددًا من التكوينات للرسوم المتحركة. الرسوم المتحركة:

يتم تشغيله بواسطة حدث click
يعدل position الشجرة
يبدأ من الموضع الأصلي 2 0.75 0
ينتهي بـ 2.2 0.75 0 (تحريك 0.2 وحدة إلى اليمين)
ينعش عند السفر من وإلى الوجهة
الرسوم المتحركة البديلة بين السفر من وإلى الوجهة
يكرر هذه الرسوم المتحركة مرة واحدة. هذا يعني أن الكائن يتحرك مرتين في المجموع - مرة إلى الوجهة ومرة أخرى إلى الموضع الأصلي.

أخيرًا ، انتقل إلى المعاينة ، واسحب من المؤشر إلى شجرتك. بمجرد أن تستقر الدائرة السوداء على الشجرة ، ستنتقل الشجرة إلى اليمين وإلى الخلف.

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

وتتمثل المهمة في فتح البوابة وإخفاء الشجرة خلف البوابة ، من خلال النقر على عناصر مختلفة في المشهد. — (معاينة كبيرة)

بعد ذلك ، قمنا بإعداد خادم nodeJS بسيط لخدمة العرض التوضيحي الثابت الخاص بنا.

الخطوة 4: إعداد خادم NodeJS

في هذه الخطوة ، سنقوم بإعداد خادم nodeJS أساسي وظيفي يخدم نموذج VR الحالي الخاص بك. في الشريط الجانبي الأيسر للمحرر ، حدد package.json .

ابدأ بحذف الأسطر 2-4.

 "//1": "describes your app and its dependencies", "//2": "https://docs.npmjs.com/files/package.json", "//3": "updating this file will download and update your packages",

قم بتغيير الاسم إلى mirrorvr .

 { "name": "mirrorvr", // change me "version": "0.0.1", ...

تحت dependencies ، أضف socket.io .

 "dependencies": { "express": "^4.16.3", "socketio": "^1.0.0", },

قم بتحديث عنوان URL الخاص بالمستودع ليطابق المشكلة الحالية. يسمى مشروع خلل المثال point-and-click-vr-game . استبدل ذلك باسم مشروع الخلل الخاص بك.

 "repository": { "url": "https://glitch.com/edit/#!/point-and-click-vr-game" },

أخيرًا ، قم بتغيير علامة "glitch" إلى "vr" .

 "keywords": [ "node", "vr", // change me "express" ]

تحقق جيدًا من أن package.json الخاص بك يطابق الآن ما يلي.

 { "name": "mirrorvr", "version": "0.0.1", "description": "Mirror virtual reality models", "main": "server.js", "scripts": { "start": "node server.js" }, "dependencies": { "express": "^4.16.3", "socketio": "^1.0.0" }, "engines": { "node": "8.x" }, "repository": { "url": "https://glitch.com/edit/#!/point-and-click-vr-game" }, "license": "MIT", "keywords": [ "node", "vr", "express" ] }

تحقق جيدًا من أن التعليمات البرمجية الخاصة بك من الأجزاء السابقة تطابق ما يلي ، في views/index.html .

 <!DOCTYPE html> <html> <head> <script src="https://aframe.io/releases/0.7.0/aframe.min.js"></script> </head> <body> <a-scene> <!-- blue sky --> <a-sky color="#a3d0ed"></a-sky> <!-- camera with wasd and panning controls --> <a-entity camera look-controls wasd-controls position="0 0.5 2" rotation="0 0 0"> <a-entity cursor="fuse: true; fuseTimeout: 250" position="0 0 -1" geometry="primitive: ring; radiusInner: 0.02; radiusOuter: 0.03" material="color: black; shader: flat" scale="0.5 0.5 0.5" raycaster="far: 20; interval: 1000; objects: .clickable"> <a-animation begin="fusing" easing="ease-in" attribute="scale" fill="backwards" from="1 1 1" to="0.2 0.2 0.2" dur="250"></a-animation> </a-entity> </a-entity> <!-- brown ground --> <a-box shadow shadow="receive:true" color="#847452" width="10" height="0.1" depth="10"></a-box> <!-- start code here --> <a-sphere color="green" radius="0.5" position="2 0.75 0" class="clickable"> <a-cylinder color="#84651e" position="0 -0.9 0" radius="0.05"></a-cylinder> <a-sphere color="green" radius="0.35" position="0 0.5 0"></a-sphere> <a-sphere color="green" radius="0.2" position="0 0.8 0"></a-sphere> <a-animation begin="click" attribute="position" from="2 0.75 0" to="2.2 0.75 0" fill="both" direction="alternate" repeat="1"></a-animation> </a-sphere> <!-- end code here --> </a-scene> </body> </html>

قم بتعديل server.js الموجود.

ابدأ باستيراد العديد من أدوات NodeJS المساعدة.

يعبر
هذا هو إطار عمل الويب الذي سنستخدمه لتشغيل الخادم.
http
هذا يسمح لنا بإطلاق برنامج خفي ، والاستماع إلى النشاط على المنافذ المختلفة.
socket.io
تطبيق مآخذ التوصيل الذي يسمح لنا بالاتصال بين جانب العميل وجانب الخادم في الوقت الفعلي تقريبًا.

أثناء استيراد هذه الأدوات المساعدة ، نقوم أيضًا بتهيئة تطبيق ExpressJS. لاحظ أن أول سطرين مكتوبان بالفعل من أجلك.

 var express = require('express'); var app = express(); /* start new code */ var http = require('http').Server(app); var io = require('socket.io')(http); /* end new code */ // we've started you off with Express,

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

 // https://expressjs.com/en/starter/basic-routing.html app.get('/', function(request, response) { response.sendFile(__dirname + '/views/index.html'); });

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

 // listen for requests :) var listener = app.listen(process.env.PORT, function() { console.log('Your app is listening on port ' + listener.address().port); });

بمجرد الانتهاء من التحرير ، يقوم Glitch تلقائيًا بإعادة تحميل الخادم. انقر فوق "إظهار" في الجزء العلوي الأيسر لمعاينة التطبيق الخاص بك.

تطبيق الويب الخاص بك هو الآن قيد التشغيل. بعد ذلك ، سنرسل رسائل من العميل إلى الخادم.

الخطوة 5: إرسال المعلومات من العميل إلى الخادم

في هذه الخطوة ، سنستخدم العميل لتهيئة الاتصال بالخادم. سيقوم العميل أيضًا بإبلاغ الخادم إذا كان هاتفًا أو سطح مكتب. للبدء ، قم باستيراد ملف Javascript الذي سيصبح موجودًا قريبًا في views/index.html .

بعد السطر 4 ، قم بتضمين نص جديد.

 <script src="/client.js" type="text/javascript"></script>

في السطر 14 ، أضف camera-listener إلى قائمة خصائص كيان الكاميرا.

 <a-entity camera-listener camera look-controls...> ... </a-entity>

ثم انتقل إلى public/client.js في الشريط الجانبي الأيسر. احذف جميع تعليمات جافا سكريبت في هذا الملف. بعد ذلك ، حدد وظيفة الأداة المساعدة التي تتحقق مما إذا كان العميل جهازًا محمولاً.

 /** * Check if client is on mobile */ function mobilecheck() { var check = false; (function(a){if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[aw])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4))) check = true;})(navigator.userAgent||navigator.vendor||window.opera); return check; };

بعد ذلك ، سنحدد سلسلة من الرسائل الأولية لتبادلها مع جانب الخادم. تحديد كائن socket.io جديد لتمثيل اتصال العميل بالخادم. بمجرد توصيل المقبس ، قم بتسجيل رسالة إلى وحدة التحكم.

 var socket = io(); socket.on('connect', function() { console.log(' * Connection established'); });

تحقق مما إذا كان الجهاز متحركًا ، وأرسل المعلومات المقابلة إلى الخادم ، باستخدام وظيفة emit .

 if (mobilecheck()) { socket.emit('newHost'); } else { socket.emit('newMirror'); }

هذا يختتم إرسال رسالة العميل. الآن ، قم بتعديل رمز الخادم لتلقي هذه الرسالة والرد بشكل مناسب. افتح ملف server.js .

تعامل مع التوصيلات الجديدة ، واستمع على الفور لنوع العميل. في نهاية الملف ، أضف ما يلي.

 /** * Handle socket interactions */ io.on('connection', function(socket) { socket.on('newMirror', function() { console.log(" * Participant registered as 'mirror'") }); socket.on('newHost', function() { console.log(" * Participant registered as 'host'"); }); });

مرة أخرى ، قم بمعاينة التطبيق بالنقر فوق "إظهار" في أعلى اليسار. قم بتحميل نفس عنوان URL على جهازك المحمول. في جهازك ، سترى ما يلي.

 listening on *: 3000 * Participant registered as 'host' * Participant registered as 'mirror'

هذا هو أول تمرير بسيط للرسائل ، حيث يرسل العميل المعلومات مرة أخرى إلى الخادم. قم بإنهاء عملية NodeJS قيد التشغيل. في الجزء الأخير من هذه الخطوة ، سنطلب من العميل إرسال معلومات الكاميرا مرة أخرى إلى الخادم. افتح public/client.js .

في نهاية الملف ، قم بتضمين ما يلي.

 var camera; if (mobilecheck()) { AFRAME.registerComponent('camera-listener', { tick: function () { camera = this.el.sceneEl.camera.el; var position = camera.getAttribute('position'); var rotation = camera.getAttribute('rotation'); socket.emit('onMove', { "position": position, "rotation": rotation }); } }); }

احفظ وأغلق. افتح ملف الخادم server.js للاستماع إلى حدث onMove هذا.

أضف ما يلي ، في newHost block الخاص بكود المقبس.

 socket.on('newHost', function() { console.log(" * Participant registered as 'host'"); /* start new code */ socket.on('onMove', function(data) { console.log(data); }); /* end new code */ });

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

الخطوة 6: إرسال المعلومات من الخادم إلى العميل

في هذه الخطوة ، سترسل معلومات الكاميرا الخاصة بالمضيف إلى جميع المرايا. افتح ملف الخادم الرئيسي ، server.js .

قم بتغيير معالج حدث onMove إلى ما يلي:

 socket.on('onMove', function(data) { console.log(data); // delete me socket.broadcast.emit('move', data) });

يضمن معدِّل broadcast أن يرسل الخادم هذه المعلومات إلى جميع العملاء المتصلين بالمقبس ، باستثناء المرسل الأصلي. بمجرد إرسال هذه المعلومات إلى العميل ، ستحتاج بعد ذلك إلى ضبط كاميرا المرآة وفقًا لذلك. افتح البرنامج النصي للعميل ، public/client.js .

هنا ، تحقق مما إذا كان العميل عبارة عن سطح مكتب. إذا كان الأمر كذلك ، احصل على بيانات النقل وسجل وفقًا لذلك.

 if (!mobilecheck()) { socket.on('move', function(data) { console.log(data); }); }

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

افتح البرنامج النصي للعميل مرة أخرى ، على public/client.js . أخيرًا نضبط كاميرا العميل اعتمادًا على المعلومات المرسلة.

قم بتعديل معالج الحدث أعلاه لحدث move .

 socket.on('move', function(data) { /* start new code */ camera.setAttribute('rotation', data["rotation"]); camera.setAttribute('position', data["position"]); /* end new code */ });

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

خاتمة

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

تمتد هذه المفاهيم إلى ما هو أبعد من webVR ، حيث تمتد فكرة الهندسة والمواد إلى SceneKit على iOS (المرتبط بـ ARKit) و Three.js (العمود الفقري لـ Aframe) والمكتبات ثلاثية الأبعاد الأخرى. تتيح لنا وحدات البناء البسيطة هذه مجتمعةً قدرًا كبيرًا من المرونة في إنشاء لعبة مغامرات كاملة النقاط والنقر. والأهم من ذلك ، أنها تسمح لنا بإنشاء أي لعبة بواجهة تعتمد على النقر.

فيما يلي العديد من الموارد والأمثلة لمزيد من الاستكشاف:

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

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