Cara Membangun Model Realitas Virtual Dengan Pratinjau Lintas Perangkat Waktu Nyata

Diterbitkan: 2022-03-10

Ringkasan cepat Dalam tutorial ini, kita akan memprogram objek tiga dimensi dan menambahkan interaksi sederhana ke objek ini. Selain itu, Anda dapat mempelajari cara membangun sistem penyampaian pesan sederhana antara klien dan server.

Realitas virtual (VR) adalah pengalaman yang berbasis di lingkungan yang dihasilkan komputer; sejumlah produk VR yang berbeda menjadi berita utama dan aplikasinya sangat beragam: untuk Olimpiade musim dingin, tim AS menggunakan realitas virtual untuk pelatihan atletik; ahli bedah bereksperimen dengan realitas virtual untuk pelatihan medis; dan yang paling umum, realitas virtual diterapkan pada game.

Kami akan fokus pada kategori aplikasi terakhir dan secara khusus akan fokus pada game petualangan point-and-click . Game semacam itu adalah kelas game kasual; tujuannya adalah untuk menunjuk dan mengklik objek di tempat kejadian, untuk menyelesaikan teka-teki. Dalam tutorial ini, kita akan membuat versi sederhana dari game semacam itu tetapi dalam realitas virtual. Ini berfungsi sebagai pengantar pemrograman dalam tiga dimensi dan merupakan panduan memulai mandiri untuk menerapkan model realitas virtual di web. Anda akan membangun dengan webVR, kerangka kerja yang memberikan keuntungan ganda — pengguna dapat memainkan game Anda di VR dan pengguna tanpa headset VR masih dapat memainkan game Anda di ponsel atau desktop.

Berkembang Untuk Realitas Virtual

Pengembang mana pun dapat membuat konten untuk VR saat ini. Untuk mendapatkan pemahaman yang lebih baik tentang pengembangan VR, mengerjakan proyek demo dapat membantu. Baca artikel terkait →

Di paruh kedua tutorial ini, Anda kemudian akan membuat "cermin" untuk desktop Anda. Ini berarti bahwa semua gerakan yang dilakukan pemain di perangkat seluler akan dicerminkan dalam pratinjau desktop. Ini memungkinkan Anda melihat apa yang dilihat pemain, memungkinkan Anda memberikan panduan, merekam permainan, atau sekadar menghibur tamu.

Prasyarat

Untuk memulai, Anda memerlukan yang berikut ini. Untuk paruh kedua tutorial ini, Anda memerlukan Mac OSX. Sedangkan kode dapat berlaku untuk platform apapun, petunjuk instalasi ketergantungan di bawah ini adalah untuk Mac.

Akses internet, khususnya ke glitch.com;
Headset realitas virtual (opsional, disarankan). Saya menggunakan Google Cardboard, yang ditawarkan seharga $15 per potong.

Lebih banyak setelah melompat! Lanjutkan membaca di bawah ini

Langkah 1: Menyiapkan Model Realitas Virtual (VR)

Pada langkah ini, kami akan menyiapkan situs web dengan satu halaman HTML statis. Ini memungkinkan kami untuk membuat kode dari desktop Anda dan secara otomatis menyebarkan ke web. Situs web yang digunakan kemudian dapat dimuat di ponsel Anda dan ditempatkan di dalam headset VR. Atau, situs web yang digunakan dapat dimuat oleh headset VR mandiri. Mulailah dengan menavigasi ke glitch.com. Kemudian,

Klik "Proyek Baru" di kanan atas.
Klik "halo-ekspres" di drop-down.

Mulailah dengan menavigasi ke glitch.com — (Pratinjau besar)

Selanjutnya, klik views/index.html di sidebar kiri. Kami akan menyebut ini sebagai "editor" Anda.

Langkah selanjutnya adalah mengklik views/index.html di sidebar kiri yang akan disebut sebagai “editor” Anda. — (Pratinjau besar)

Untuk melihat pratinjau halaman web, klik "Pratinjau" di kiri atas. Kami akan menyebutnya sebagai pratinjau Anda. Perhatikan bahwa setiap perubahan di editor Anda akan secara otomatis tercermin dalam pratinjau ini, kecuali bug atau browser yang tidak didukung.

Kembali ke editor Anda, ganti HTML saat ini dengan boilerplate berikut untuk model 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>

Navigasi lihat berikut ini.

Saat menavigasi kembali ke pratinjau Anda, Anda akan melihat warna bakground biru dan coklat. — (Pratinjau besar)

Untuk melihat pratinjau ini di headset VR Anda, gunakan URL di omnibar. Pada gambar di atas, URL-nya adalah https://point-and-click-vr-game.glitch.me/ . Lingkungan kerja Anda sekarang sudah diatur; jangan ragu untuk membagikan URL ini dengan keluarga dan teman. Pada langkah selanjutnya, Anda akan membuat model realitas virtual.

Langkah 2: Bangun Model Pohon

Anda sekarang akan membuat pohon, menggunakan primitif dari aframe.io. Ini adalah objek standar yang telah diprogram sebelumnya oleh Aframe untuk kemudahan penggunaan. Secara khusus, Aframe mengacu pada objek sebagai entitas . Ada tiga konsep, terkait dengan semua entitas, untuk mengatur diskusi kita seputar:

Geometri dan bahan,
sumbu transformasi,
Transformasi Relatif.

Pertama, geometri dan material adalah dua blok bangunan dari semua objek tiga dimensi dalam kode. Geometri mendefinisikan "bentuk" - kubus, bola, piramida, dan sebagainya. Bahan mendefinisikan sifat statis bentuk, seperti warna, reflektifitas, kekasaran.

Aframe menyederhanakan konsep ini untuk kita dengan mendefinisikan primitif, seperti <a-box> , <a-sphere> , <a-cylinder> dan banyak lainnya untuk membuat spesifikasi geometri dan materialnya lebih sederhana. Mulailah dengan mendefinisikan bola hijau. Pada baris 19 dalam kode Anda, tepat setelah  , tambahkan berikut ini.

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

Kedua, ada tiga sumbu untuk mengubah objek kita. Sumbu x berjalan horizontal, di mana nilai x meningkat saat kita bergerak ke kanan. Sumbu y berjalan vertikal, di mana nilai y meningkat saat kita bergerak ke atas. Sumbu z keluar dari layar Anda, di mana nilai z meningkat saat kami bergerak ke arah Anda. Kita dapat menerjemahkan, memutar, atau menskalakan entitas di sepanjang ketiga sumbu ini.

Misalnya, untuk menerjemahkan objek "benar", kami meningkatkan nilai x-nya. Untuk memutar objek seperti gasing, kita memutarnya sepanjang sumbu y. Ubah baris 19 untuk memindahkan bola "naik" — ini berarti Anda perlu meningkatkan nilai y bola. Perhatikan bahwa semua transformasi ditentukan sebagai <x> <y> <z> , artinya untuk meningkatkan nilai y, Anda perlu meningkatkan nilai kedua. Secara default, semua objek berada di posisi 0, 0, 0. Tambahkan spesifikasi position di bawah ini.

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

Ketiga, semua transformasi adalah relatif terhadap induknya. Untuk menambahkan batang pohon Anda, tambahkan silinder di dalam bola di atas. Ini memastikan bahwa posisi bagasi Anda relatif terhadap posisi bola. Intinya, ini menyatukan pohon Anda sebagai satu kesatuan. Tambahkan entitas <a-cylinder> di antara <a-sphere ...> dan </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>

Untuk membuat barebone tanpa pohon ini, tambahkan lebih banyak dedaunan, dalam bentuk dua bola hijau lagi.

 <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>

Arahkan kembali ke pratinjau Anda, dan Anda akan melihat pohon berikut:

Saat menavigasi kembali ke pratinjau Anda, Anda sekarang dapat melihat pohon hijau ditempatkan di latar belakang Anda. — (Pratinjau besar)

Muat ulang pratinjau situs web di headset VR Anda, dan lihat pohon baru Anda. Di bagian selanjutnya, kita akan membuat pohon ini menjadi interaktif.

Langkah 3: Tambahkan Interaksi Klik Untuk Model

Untuk membuat entitas menjadi interaktif, Anda perlu:

Tambahkan animasi,
Minta pemicu animasi ini di klik.

Karena pengguna akhir menggunakan headset realitas virtual, mengklik sama dengan menatap: dengan kata lain, menatap objek untuk "mengklik" di atasnya. Untuk melakukan perubahan ini, Anda akan mulai dengan kursor. Definisikan ulang kamera, dengan mengganti baris 13 dengan yang berikut ini.

 <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>

Di atas menambahkan kursor yang dapat memicu tindakan mengklik. Perhatikan objects: .clickable . Ini berarti bahwa semua objek dengan kelas "dapat diklik" akan memicu animasi dan menerima perintah "klik" jika sesuai. Anda juga akan menambahkan animasi ke kursor klik, sehingga pengguna tahu kapan kursor memicu klik. Di sini, kursor akan menyusut perlahan saat menunjuk ke objek yang dapat diklik, berhenti sesaat untuk menunjukkan bahwa objek telah diklik. Ganti komentar  dengan kode berikut:

 <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>

Pindahkan pohon ke kanan sebanyak 2 unit dan tambahkan kelas “dapat diklik” ke pohon, dengan memodifikasi baris 29 agar sesuai dengan yang berikut.

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

Selanjutnya, Anda akan:

Tentukan animasi,
Picu animasi dengan satu klik.

Karena entitas animasi Aframe yang mudah digunakan, kedua langkah dapat dilakukan secara berurutan dengan cepat.

Tambahkan <a-animation> pada baris 33, tepat setelah <a-cylinder> tetapi sebelum akhir </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>

Properti di atas menentukan sejumlah konfigurasi untuk animasi. Animasi:

Dipicu oleh acara click
Memodifikasi position pohon
Mulai dari posisi semula 2 0.75 0
Berakhir di 2.2 0.75 0 (bergerak 0.2 unit ke kanan)
Beranimasi saat bepergian ke dan dari tujuan
Animasi alternatif antara bepergian ke dan dari tujuan
Mengulangi animasi ini sekali. Ini berarti objek dianimasikan dua kali secara total — sekali ke tujuan dan sekali kembali ke posisi semula.

Terakhir, navigasikan ke pratinjau Anda, dan seret dari kursor ke pohon Anda. Setelah lingkaran hitam bertumpu pada pohon, pohon akan bergerak ke kanan dan ke belakang.

Setelah lingkaran hitam bertumpu pada pohon, pohon akan bergerak ke kanan dan ke belakang. — Pratinjau besar

Ini menyimpulkan dasar-dasar yang diperlukan untuk membangun game petualangan point-and-click, dalam realitas virtual. Untuk melihat dan memainkan versi yang lebih lengkap dari game ini, lihat adegan singkat berikut. Misinya adalah membuka gerbang dan menyembunyikan pohon di belakang gerbang, dengan mengklik berbagai objek di tempat kejadian.

Misinya adalah membuka gerbang dan menyembunyikan pohon di belakang gerbang, dengan mengklik berbagai objek di tempat kejadian. — (Pratinjau besar)

Selanjutnya, kami menyiapkan server nodeJS sederhana untuk melayani demo statis kami.

Langkah 4: Siapkan Server NodeJS

Pada langkah ini, kami akan menyiapkan server nodeJS fungsional dasar yang melayani model VR Anda yang sudah ada. Di bilah sisi kiri editor Anda, pilih package.json .

Mulailah dengan menghapus baris 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",

Ubah nama menjadi mirrorvr .

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

Di bawah dependencies , tambahkan socket.io .

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

Perbarui URL repositori agar sesuai dengan kesalahan Anda saat ini. Contoh proyek kesalahan bernama point-and-click-vr-game . Ganti itu dengan nama proyek kesalahan Anda.

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

Terakhir, Ubah tag "glitch" menjadi "vr" .

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

Periksa kembali apakah package.json Anda sekarang cocok dengan yang berikut ini.

 { "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" ] }

Periksa kembali apakah kode Anda dari bagian sebelumnya cocok dengan kode berikut, di 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>

Ubah server.js yang ada.

Mulailah dengan mengimpor beberapa utilitas NodeJS.

cepat
Ini adalah kerangka kerja web yang akan kita gunakan untuk menjalankan server.
http
Ini memungkinkan kita untuk meluncurkan daemon, mendengarkan aktivitas di berbagai port.
socket.io
Implementasi soket yang memungkinkan kita untuk berkomunikasi antara sisi klien dan sisi server hampir secara real-time.

Saat mengimpor utilitas ini, kami juga menginisialisasi aplikasi ExpressJS. Perhatikan bahwa dua baris pertama sudah ditulis untuk Anda.

 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,

Dengan utilitas yang dimuat, server yang disediakan selanjutnya menginstruksikan server untuk mengembalikan index.html sebagai beranda. Perhatikan tidak ada kode baru yang ditulis di bawah ini; ini hanyalah penjelasan dari kode sumber yang ada.

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

Terakhir, kode sumber yang ada menginstruksikan aplikasi untuk mengikat dan mendengarkan port, yaitu 3000 secara default kecuali ditentukan lain.

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

Setelah Anda selesai mengedit, Glitch secara otomatis memuat ulang server. Klik "Tampilkan" di kiri atas untuk melihat pratinjau aplikasi Anda.

Aplikasi web Anda sekarang aktif dan berjalan. Selanjutnya kita akan mengirimkan pesan dari client ke server.

Langkah 5: Kirim Informasi Dari Klien Ke Server

Pada langkah ini, kita akan menggunakan klien untuk menginisialisasi koneksi dengan server. Klien juga akan memberi tahu server apakah itu telepon atau desktop. Untuk memulai, impor file Javascript yang akan segera ada di views/index.html Anda.

Setelah baris 4, sertakan skrip baru.

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

Pada baris 14, tambahkan camera-listener ke daftar properti untuk entitas kamera.

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

Kemudian, navigasikan ke public/client.js di sidebar kiri. Hapus semua kode Javascript dalam file ini. Kemudian, tentukan fungsi utilitas yang memeriksa apakah klien adalah perangkat seluler.

 /** * 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; };

Selanjutnya, kita akan mendefinisikan serangkaian pesan awal untuk dipertukarkan dengan sisi server. Tentukan objek socket.io baru untuk mewakili koneksi klien ke server. Setelah soket terhubung, log pesan ke konsol.

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

Periksa apakah perangkat seluler, dan kirim informasi yang sesuai ke server, menggunakan fungsi emit .

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

Ini menyimpulkan pengiriman pesan klien. Sekarang, ubah kode server untuk menerima pesan ini dan bereaksi dengan tepat. Buka file server server.js .

Tangani koneksi baru, dan segera dengarkan jenis kliennya. Di akhir file, tambahkan yang berikut ini.

 /** * 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'"); }); });

Sekali lagi, pratinjau aplikasi dengan mengklik "Tampilkan" di kiri atas. Muat URL yang sama di perangkat seluler Anda. Di terminal Anda, Anda akan melihat yang berikut ini.

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

Ini adalah pengiriman pesan sederhana pertama, di mana klien kami mengirimkan informasi kembali ke server. Keluar dari proses NodeJS yang sedang berjalan. Untuk bagian terakhir dari langkah ini, kita akan meminta klien mengirim informasi kamera kembali ke server. Buka public/client.js .

Di bagian paling akhir file, sertakan yang berikut ini.

 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 }); } }); }

Simpan dan tutup. Buka file server server.js Anda untuk mendengarkan acara onMove ini.

Tambahkan yang berikut ini, di blok newHost dari kode soket Anda.

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

Sekali lagi, muat pratinjau di desktop dan perangkat seluler Anda. Setelah klien seluler terhubung, server akan segera mulai mencatat posisi kamera dan informasi rotasi, yang dikirim dari klien ke server. Selanjutnya, Anda akan menerapkan kebalikannya, di mana Anda mengirim informasi dari server kembali ke klien.

Langkah 6: Kirim Informasi Dari Server Ke Klien

Pada langkah ini, Anda akan mengirim informasi kamera host ke semua mirror. Buka file server utama Anda, server.js .

Ubah pengendali acara onMove menjadi berikut ini:

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

Pengubah broadcast memastikan bahwa server mengirimkan informasi ini ke semua klien yang terhubung ke soket, kecuali pengirim asli. Setelah informasi ini dikirim ke klien, Anda kemudian perlu mengatur kamera cermin yang sesuai. Buka skrip klien, public/client.js .

Di sini, periksa apakah klien adalah desktop. Jika demikian, terima data pemindahan dan log yang sesuai.

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

Muat pratinjau di desktop dan perangkat seluler Anda. Di browser desktop Anda, buka konsol pengembang. Kemudian, muat aplikasi di ponsel Anda. Segera setelah ponsel memuat aplikasi, konsol pengembang di desktop Anda akan menyala dengan posisi dan rotasi kamera.

Buka skrip klien sekali lagi, di public/client.js . Kami akhirnya menyesuaikan kamera klien tergantung pada informasi yang dikirim.

Ubah pengendali acara di atas untuk acara move .

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

Muat aplikasi di desktop dan ponsel Anda. Setiap gerakan ponsel Anda tercermin di cermin yang sesuai di desktop Anda! Ini menyimpulkan bagian cermin dari aplikasi Anda. Sebagai pengguna desktop, kini Anda dapat melihat pratinjau apa yang dilihat pengguna seluler Anda. Konsep yang diperkenalkan di bagian ini akan sangat penting untuk pengembangan lebih lanjut dari game ini, karena kami mengubah pemain tunggal menjadi permainan multipemain.

Kesimpulan

Dalam tutorial ini, kami memprogram objek tiga dimensi dan menambahkan interaksi sederhana ke objek ini. Selain itu, Anda membangun sistem penyampaian pesan sederhana antara klien dan server, untuk memengaruhi pratinjau desktop dari apa yang dilihat pengguna seluler Anda.

Konsep-konsep ini bahkan melampaui webVR, karena gagasan tentang geometri dan materi meluas ke SceneKit di iOS (yang terkait dengan ARKit), Three.js (tulang punggung untuk Aframe), dan pustaka tiga dimensi lainnya. Blok bangunan sederhana yang disatukan ini memungkinkan kami cukup fleksibel dalam membuat game petualangan tunjuk dan klik yang lengkap. Lebih penting lagi, mereka memungkinkan kami membuat game apa pun dengan antarmuka berbasis klik.

Berikut adalah beberapa sumber dan contoh untuk dijelajahi lebih lanjut:

MirrorVR
Implementasi penuh dari pratinjau langsung yang dibuat di atas. Hanya dengan satu tautan Javascript, tambahkan pratinjau langsung dari model realitas virtual apa pun di seluler ke desktop.
Sedikit demi sedikit
Galeri gambar anak-anak dan model realitas virtual yang sesuai untuk setiap gambar.
Sebuah bingkai
Contoh, dokumentasi pengembang, dan lebih banyak sumber daya untuk pengembangan realitas virtual.
Pengalaman Google Karton
Pengalaman untuk kelas dengan alat khusus untuk pengajar.

Lain kali, kami akan membangun game yang lengkap, menggunakan soket web untuk memfasilitasi komunikasi waktu nyata antar pemain dalam game realitas virtual. Jangan ragu untuk membagikan model Anda sendiri di komentar di bawah.