Bagikan melalui

Tutorial: Membuat aplikasi WebXR pertama Anda menggunakan Babylon.js

Tutorial ini akan menunjukkan kepada Anda cara membuat aplikasi Mixed Reality dasar menggunakan Babylon.js dan Visual Studio Code. Aplikasi yang akan Anda buat akan merender kubus, memungkinkan Anda memutarnya untuk menampilkan wajah lain, dan menambahkan interaksi. Dalam tutorial ini, Anda akan mempelajari cara:

  • Menyiapkan lingkungan pengembangan
  • API Babylon.js untuk membuat elemen 3D dasar
  • Membuat halaman web baru
  • Berinteraksi dengan elemen 3D
  • Menjalankan aplikasi di Simulator Windows Mixed Reality

Prasyarat

Memulai

Untuk membuat proyek ini dari awal, mulailah dengan proyek Visual Studio Code (VSCode).

Catatan

Menggunakan VSCode tidak wajib, tetapi kami akan menggunakannya untuk kenyamanan sepanjang tutorial. Pengembang JavaScript yang lebih berpengalaman dapat menggunakan editor lain pilihan mereka, bahkan Notepad yang paling sederhana.

  1. Unduh file tunggal Babylon.js atau gunakan versi online yang dapat ditemukan di situs web Babylon.js resmi. Anda juga dapat mengkloning seluruh proyek Babylon.js dari GitHub

  2. Buat file kosong dan simpan sebagai halaman html, misalnya index.html

  3. Buat markup html dasar dan referensikan file javascript Babylon.js. Kode akhir seperti yang ditunjukkan di bawah ini:

    <html>
    <head>
        <title>Babylon.js sample code</title>
        <script src="https://cdn.babylonjs.com/babylon.js"></script>
    </head>
<body>
</body>
</html>

  4. Tambahkan elemen HTML kanvas di dalam isi untuk merender konten Babylon.js. Perhatikan bahwa kanvas memiliki atribut id, yang memungkinkan Anda mengakses elemen HTML ini dari JavaScript nanti.

    <html>
    <head>
        <title>Babylon.js sample code</title>
        <script src="https://cdn.babylonjs.com/babylon.js"></script>
        <style>
            body,#renderCanvas { width: 100%; height: 100%;}
        </style>
    </head>
<body>
    <canvas id="renderCanvas"></canvas>
</body>
</html>

  5. Kanvas menempati seluruh halaman web. Yang melengkapi halaman web kami. Pada titik ini, halaman web siap. Anda dapat membukanya di browser apa pun dan memastikan tidak ada kesalahan yang ditampilkan, meskipun belum ada pengalaman imersif.

Langkah berikutnya

Tutorial Berikutnya: 2. Menyiapkan adegan