Bagikan melalui

Tutorial: Membangun piano di WebXR menggunakan Babylon.js

Membangun piano di dunia nyata membutuhkan banyak waktu, keterampilan, dan bahan. Bagaimana dengan membangun satu untuk dunia VR/AR?

Dalam seri tutorial ini, Anda akan mempelajari cara menggunakan Babylon.js untuk membuat aplikasi web Mixed Reality yang berisi piano standup 88-key yang berfungsi di dunia virtual. Di aplikasi yang sudah selesai, Anda dapat melakukan teleportasi ke piano dan memainkan tombol menggunakan pengontrol realitas campuran Anda.

Dalam seri tutorial ini, Anda akan mempelajari cara:

  • Membuat, memposisikan, dan menggabungkan jala untuk membangun keyboard piano
  • Mengimpor model Babylon.js bingkai piano standup
  • Menambahkan interaksi pointer ke setiap kunci piano
  • Mengaktifkan dukungan teleportasi dan multipointer di WebXR

Prasyarat

Memulai

Mari kita mulai dengan menyiapkan halaman web HTML yang akan berisi adegan Babylon.js.

  1. Buat folder bernama babylonjs-piano-tutorial dan buka folder di Visual Studio Code.

    Catatan

    Meskipun Anda dapat menggunakan editor kode apa pun untuk diikuti, kami akan menggunakan Visual Studio Code di seluruh tutorial ini untuk kenyamanan.

  2. Di dalam folder, buat file bernama index.html dan sisipkan templat di bawah ini ke dalam file:

    <html>
    <head>
        <title>Piano in BabylonJS</title>
        <script src="https://cdn.babylonjs.com/babylon.js"></script>
        <style>
            body,#renderCanvas { width: 100%; height: 100%;}
        </style>
    </head>
    <body>
        <canvas id="renderCanvas"></canvas>
        <script type="text/javascript">
            const canvas = document.getElementById("renderCanvas"); 
            const engine = new BABYLON.Engine(canvas, true); 

            createScene(engine).then(sceneToRender => {
                engine.runRenderLoop(() => sceneToRender.render());
            });

            // Watch for browser/canvas resize events
            window.addEventListener("resize", function () {
                engine.resize();
            });
        </script>
    </body>
</html>

    Jika Anda memerlukan penjelasan lebih lanjut tentang konten templat ini, lihat tutorial Halo Dunia, yang merupakan prasyarat tutorial ini.

  3. Jika Anda mencoba membuka file ini di browser, konsol menunjukkan kesalahan yang menunjukkan bahwa createScene() fungsi tidak ditemukan. Mari kita atasi kesalahan ini dengan menerapkan fungsi createScene() di bagian berikutnya.

Menyiapkan adegan

  1. Di folder yang sama dengan index.html, buat file lain bernama scene.js. Kami akan menyimpan semua kode javascript yang terkait dengan pengaturan adegan dan membuat piano dalam file ini.

  2. Mari kita tambahkan fungsi ke createScene() dalamscene.js:

    const createScene = async function(engine) {
    const scene = new BABYLON.Scene(engine);
    return scene;
}

    Perhatikan bahwa kita membuat createScene() fungsi asinkron. Nantikan untuk mengetahui alasannya.

  3. Selanjutnya, kita akan membutuhkan cahaya dan kamera untuk membuat adegan terlihat oleh kita. createScene() Perbarui fungsi:

    const createScene = async function(engine) {
    const scene = new BABYLON.Scene(engine);

    const alpha =  3*Math.PI/2;
    const beta = Math.PI/50;
    const radius = 220;
    const target = new BABYLON.Vector3(0, 0, 0);

    const camera = new BABYLON.ArcRotateCamera("Camera", alpha, beta, radius, target, scene);
    camera.attachControl(canvas, true);

    const light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(0, 1, 0), scene);
    light.intensity = 0.6;

    return scene;
}

    Di sini, kami telah membuat ArcRotateCamera, yang menunjuk hampir sepenuhnya ke bawah dan menargetkan titik asal ruang. Cahaya yang telah kita buat adalah HemisphericLight yang menunjuk ke langit dan berguna untuk mensimulasikan ruang sekitar. Kami juga telah meredupkan cahaya sedikit dengan menurunkan intensitasnya.

    Jika Anda memerlukan penyegaran tentang cara membuat kamera dan lampu, kunjungi kembali bagian Siapkan Adegan dari seri tutorial Halo Dunia sebelum melanjutkan ke langkah berikutnya.

  4. Akhirnya, karena kami mengembangkan untuk platform WebXR, kita harus mengaktifkan pengalaman XR di adegan dengan menyisipkan baris berikut sebelum return scene;:

    const xrHelper = await scene.createDefaultXRExperienceAsync();

    Dalam javascript, untuk menggunakan await kata kunci pada async fungsi dalam fungsi, fungsi induk juga harus async, itulah sebabnya kita mendefinisikan createScene fungsi sebagai asinkron sebelumnya. Nantinya dalam seri tutorial ini, kita akan menggunakan ini xrHelper untuk mengaktifkan dan mengonfigurasi berbagai fitur WebXR yang didukung oleh Babylon.js.

  5. scene.js yang telah selesai akan terlihat seperti ini:

    const createScene = async function(engine) {
    const scene = new BABYLON.Scene(engine);

    const alpha =  3*Math.PI/2;
    const beta = Math.PI/50;
    const radius = 220;
    const target = new BABYLON.Vector3(0, 0, 0);

    const camera = new BABYLON.ArcRotateCamera("Camera", alpha, beta, radius, target, scene);
    camera.attachControl(canvas, true);

    const light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(0, 1, 0), scene);
    light.intensity = 0.6;

    const xrHelper = await scene.createDefaultXRExperienceAsync();

    return scene;
}

  6. Sekarang setelah kita memiliki fungsi yang berfungsi createScene() , mari kita index.html memuat file scene.js sebagai skrip sehingga createScene() fungsi dikenali dalam index.html. Tambahkan baris kode ini di dalam bagian <header> file html:

    <html>
    <head>
        <title>Piano in BabylonJS</title>
        <script src="https://cdn.babylonjs.com/babylon.js"></script>
        <script src="scene.js"></script>
        <style>
            body,#renderCanvas { width: 100%; height: 100%;}
        </style>
    </head>
    <body>
        <canvas id="renderCanvas"></canvas>
        <script type="text/javascript">
            const canvas = document.getElementById("renderCanvas");
            const engine = new BABYLON.Engine(canvas, true); 

            createScene(engine).then(sceneToRender => {
                engine.runRenderLoop(() => sceneToRender.render());
            });

            // Watch for browser/canvas resize events
            window.addEventListener("resize", function () {
                engine.resize();
            });
        </script>
    </body>
</html>

  7. Buka index.html di browser Anda, dan Anda akan menemukan bahwa pesan kesalahan yang kami lihat sebelumnya tidak ada lagi, dan kami memiliki adegan Babylon.js kosong di halaman.

Langkah berikutnya

Tutorial berikutnya: Membangun model piano 3D