Rumah > hujung hadapan web > tutorial js > Bina Realiti Maya di VR dengan Primrose dan WebVR

Bina Realiti Maya di VR dengan Primrose dan WebVR

Jennifer Aniston
Lepaskan: 2025-02-18 09:13:11
asal
845 orang telah melayarinya

Tahun ini, Realiti Maya (VR) sedang mengalami lonjakan populariti, dengan alat dengar VR terbang dari rak. Platform pembangunan semakin memberi tumpuan kepada pembangunan VR untuk memenuhi permintaan yang semakin meningkat dari pemaju yang bersemangat. Perkembangan yang sangat menarik dalam Perpaduan dan Unreal Engine adalah keupayaan untuk mengedit adegan VR dalam persekitaran VR itu sendiri. Untuk pemaju WebVR dan JavaScript, rangka kerja baru muncul yang menawarkan keupayaan yang sama untuk prototaip dan eksperimen: Primrose.

Ciri -ciri utama Primrose:

  • Primrose adalah rangka kerja yang membolehkan pengeditan dalam-VR adegan VR, secara langsung menangani minat yang semakin meningkat dalam pembangunan VR. Ia memudahkan prototaip cepat dan lelaran visual dalam konteks VR.
  • untuk menggunakan primrose, pemaju memerlukan pelayar yang dibolehkan WebGL dengan sokongan WebVR (seperti binaan Chromium Webvr atau Firefox baru-baru ini), Oculus Rift atau Google Cardboard Headset (walaupun percubaan berasaskan penyemak imbas adalah mungkin tanpa alat dengar), a Pelayan Web (pelayan tempatan seperti WAMP/MAMP/Node/Python cukup), dan kemahiran menaip sentuh.
  • Ciri-ciri Primrose Live Coding, yang membolehkan pengeditan kod masa nyata dalam persekitaran VR atau bahkan secara langsung dalam penyemak imbas tanpa alat dengar.
  • Pemaju boleh menambah pelbagai elemen adegan di Primrose, termasuk paksi, awan titik, hab, lampu, kotak, dan silinder. Ini boleh ditambah melalui fail app.js atau terus dalam editor VR.
  • Walaupun masih dalam peringkat awal, Primrose menunjukkan potensi besar untuk aplikasi VR masa depan. Sumbangan komuniti digalakkan untuk mempercepatkan pertumbuhannya.

Apa itu Primrose?

Seperti yang dinyatakan di laman web rasminya, Primrose adalah rangka kerja silang, pelbagai peranti untuk membina alat produktiviti dalam aplikasi WebVR. Ia menawarkan persekitaran berasaskan pelayar untuk pemaju untuk bereksperimen dengan dan menggambarkan konsep VR. Ia sumber terbuka dan aktif dalam pembangunan.

Keperluan Sistem:

Untuk memulakan perjalanan webvr anda dengan Primrose, anda perlu:

  • Penyemak imbas yang dibolehkan WebGL dengan sokongan WebVR (mis., Chromium WebVR baru-baru ini membina atau Firefox setiap malam).
  • Oculus Rift, HTC Vive, atau Headset Google Cardboard (pilihan untuk kerja berasaskan pelayar).
  • pelayan web (pelayan tempatan seperti wamp, mamp, node.js, atau python).
  • Penguasaan Touch-Typing.

Bermula:

Demo pengekodan langsung berfungsi sepenuhnya boleh didapati di laman web Primrose (pastikan anda menggunakan penyemak imbas yang dibolehkan WebGL). Untuk salinan tempatan, muat turun atau klon versi dan contoh terkini dari repositori primrose github.

Versi yang dipermudahkan:

demo pengekodan hidup yang mudah, berdasarkan demo primrose tetapi dengan fungsi yang dikurangkan untuk penjelasan yang lebih mudah, boleh didapati di repositori GitHub berasingan [pautan ke repo GitHub akan pergi ke sini].

menjalankan versi mudah:

Letakkan demo mudah di pelayan web anda dan buka di pelayar WebGL yang dibolehkan (mis., http://localhost/primrose). Ingat, ia tidak akan berjalan terus dari sistem fail anda kerana sekatan keselamatan penyemak imbas untuk mengakses sumber.

Contoh tangkapan skrin (ganti dengan imej sebenar):

Build Virtual Reality in VR with Primrose and WebVR

bagaimana primrose berfungsi:

teras aplikasi primrose melibatkan penentuan tekstur dan memulakan aplikasi primrose:

var BRICK = "images/brick.png",
    GROUND = "images/deck.png",
    SKY = "images/bg2.jpg",
    app = new Primrose.BrowserEnvironment("Our Simplified 3D Editor", {
      skyTexture: SKY,
      groundTexture: GROUND
    });
Salin selepas log masuk
Kawasan editor ditakrifkan menggunakan

: Primrose.Surface

editorFrame = new Primrose.Surface({
  bounds: new Primrose.Text.Rectangle(0, 0, 2048, 2048)
});
Salin selepas log masuk
elemen ditambah dalam

pendengar acara: "ready"

app.addEventListener("ready", function() {
  // ... (add subScene, editor, initial code) ...
});
Salin selepas log masuk
Primrose menggunakan objek dari

untuk fungsi penyuntingan teks. Acara Primrose.Text mengendalikan kemas kini dan animasi adegan. Acara lain seperti update, keydown, dan sebagainya, menguruskan interaksi pengguna. mousedown

(selebihnya bahagian "Bagaimana Ia Berfungsi", termasuk contoh kod dan penjelasan , axis, cloud, hub, light, box, dan lain -lain Fungsi, akan dimasukkan di sini, mengekalkan struktur yang sama dan merangka teks asal.) cylinder

("Kesimpulan," "Soalan Lazim," dan jawapan masing -masing juga akan disertakan di sini, mengekalkan struktur yang sama dan merangka teks asal.) URL imej sebenar.

Atas ialah kandungan terperinci Bina Realiti Maya di VR dengan Primrose dan WebVR. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan