Tutorial: Berinteraksi dengan objek 3D

Pelajari cara membuat objek dan interaksi 3D untuk pengalaman Mixed Reality menggunakan Babylon.js. Di bagian ini, Anda akan mulai dengan sesuatu yang sederhana, seperti melukis wajah kubus saat Memilih objek.

Tutorial ini membahas topik-topik berikut:

  • Cara menambahkan interaksi
  • Mengaktifkan mode imersif WebXR
  • Jalankan aplikasi di simulator Windows Mixed Reality
  • Menjalankan dan men-debug aplikasi di Chrome Android

Sebelum Anda mulai

Di langkah tutorial sebelumnya, halaman web dasar dengan adegan dibuat. Buka halaman web hosting untuk pengeditan.

<html>
<head>
    <script src="https://cdn.babylonjs.com/babylon.js"></script>
    <style>
        body,#renderCanvas { width: 100%; height: 100%;}
    </style>
</head>
<body>
    <canvas id="renderCanvas"></canvas>
    <script>
        const canvas = document.getElementById("renderCanvas");
        const engine = new BABYLON.Engine(canvas, true);
        
        const createScene = function() {
            const scene = new BABYLON.Scene(engine);
            scene.clearColor = new BABYLON.Color3.Black;
            
            const alpha =  Math.PI/4;
            const beta = Math.PI/3;
            const radius = 8;
            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(1, 1, 0));
            
            const box = BABYLON.MeshBuilder.CreateBox("box", {});
            box.position.x = 0.5;
            box.position.y = 1;
            
            return scene;
        };
        
        const sceneToRender = createScene();
        engine.runRenderLoop(function(){
            sceneToRender.render();
        });
    </script>
</body>
</html>

Menambahkan interaksi

  1. Pertama, mari kita perbarui kode kita yang membuat kubus, sehingga kubus dicat dengan warna acak. Untuk melakukan itu, kita akan menambahkan bahan ke kubus kita. Bahan memungkinkan kita untuk menentukan warna dan tekstur dan dapat digunakan untuk menutupi objek lain. Bagaimana bahan muncul tergantung pada cahaya atau lampu yang digunakan dalam adegan dan bagaimana bahan diatur untuk bereaksi. Misalnya, diffuseColor menyebarkan warna ke seluruh jala tempatnya terpasang. Tambahkan kode berikut:

    const boxMaterial = new BABYLON.StandardMaterial("material", scene);
boxMaterial.diffuseColor = BABYLON.Color3.Random();
box.material = boxMaterial;

  2. Sekarang setelah kubus dicat dengan warna acak, mari kita tambahkan interaksi ke:

    • Ubah warna saat kubus diklik
    • Memindahkan kubus setelah warna diubah

    Untuk menambahkan interaksi, kita harus menggunakan tindakan. Tindakan diluncurkan sebagai respons terhadap pemicu peristiwa. Misalnya, ketika pengguna mengklik kubus. Yang perlu kita lakukan adalah membuat instans BABYLON. ActionManager dan daftarkan tindakan untuk pemicu tertentu. BABYLON. ExecuteCodeAction akan menjalankan fungsi JavaScript kami ketika seseorang mengklik kubus:

    box.actionManager = new BABYLON.ActionManager(scene);
box.actionManager.registerAction(new BABYLON.ExecuteCodeAction(
    BABYLON.ActionManager.OnPickTrigger, 
    function (evt) {
        const sourceBox = evt.meshUnderPointer;

        //move the box upright
        sourceBox.position.x += 0.1;
        sourceBox.position.y += 0.1;

        //update the color
        boxMaterial.diffuseColor = BABYLON.Color3.Random();
    }));

  3. Kode akhir halaman web akan terlihat sebagai berikut:

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

        const createScene = function() {
            const scene = new BABYLON.Scene(engine);
            scene.clearColor = new BABYLON.Color3.Black;

            const alpha =  Math.PI/4;
            const beta = Math.PI/3;
            const radius = 8;
            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(1, 1, 0));

            const box = BABYLON.MeshBuilder.CreateBox("box", {});
            box.position.x = 0.5;
            box.position.y = 1;

            const boxMaterial = new BABYLON.StandardMaterial("material", scene);
            boxMaterial.diffuseColor = BABYLON.Color3.Random();
            box.material = boxMaterial;

            box.actionManager = new BABYLON.ActionManager(scene);
            box.actionManager.registerAction(
                new BABYLON.ExecuteCodeAction(BABYLON.ActionManager.OnPickTrigger, 
                function (evt) {
                    const sourceBox = evt.meshUnderPointer;
                    sourceBox.position.x += 0.1;
                    sourceBox.position.y += 0.1;

                    boxMaterial.diffuseColor = BABYLON.Color3.Random();
                }));

            return scene;
        };

        const sceneToRender = createScene();
        engine.runRenderLoop(function(){
            sceneToRender.render();
        });
    </script>
</body>
</html>

Mengaktifkan pengalaman imersif WebXR

Sekarang kubus kita berubah warna, kita siap untuk mencoba pengalaman imersif.

  1. Dalam langkah ini kita akan memperkenalkan tanah. Kubus akan menggantung di udara dan kita akan melihat lantai di bagian bawah. Tambahkan tanah sebagai berikut:

    const ground = BABYLON.MeshBuilder.CreateGround("ground", {width: 4, height: 4});

    Ini menciptakan lantai 4x4 meter sederhana.

  2. Untuk menambahkan dukungan WebXR, kita perlu memanggil createDefaultXRExperienceAsync, yang memiliki hasil Promise . Tambahkan kode ini di akhir fungsi createScene alih-alih adegan pengembalian;:

    const xrPromise = scene.createDefaultXRExperienceAsync({
    floorMeshes: [ground]
});
return xrPromise.then((xrExperience) => {
    console.log("Done, WebXR is enabled.");
    return scene;
});

  3. Karena fungsi createScene sekarang mengembalikan janji alih-alih adegan, kita perlu memodifikasi bagaimana createScene dan engine.runRenderLoop dipanggil. Ganti panggilan saat ini dari fungsi-fungsi ini, yang terletak tepat sebelum <tag /script> , dengan kode di bawah ini:

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

  4. Kode akhir halaman web akan terlihat sebagai berikut:

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

        const createScene = function() {
            const scene = new BABYLON.Scene(engine);
            scene.clearColor = new BABYLON.Color3.Black;

            const alpha =  Math.PI/4;
            const beta = Math.PI/3;
            const radius = 8;
            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(1, 1, 0));

            const box = BABYLON.MeshBuilder.CreateBox("box", {});
            box.position.x = 0.5;
            box.position.y = 1;

            const boxMaterial = new BABYLON.StandardMaterial("material", scene);
            boxMaterial.diffuseColor = BABYLON.Color3.Random();
            box.material = boxMaterial;

            box.actionManager = new BABYLON.ActionManager(scene);
            box.actionManager.registerAction(
                new BABYLON.ExecuteCodeAction(BABYLON.ActionManager.OnPickTrigger, 
                function (evt) {
                    const sourceBox = evt.meshUnderPointer;
                    sourceBox.position.x += 0.1;
                    sourceBox.position.y += 0.1;

                    boxMaterial.diffuseColor = BABYLON.Color3.Random();
                }));

            const ground = BABYLON.MeshBuilder.CreateGround("ground", {width: 4, height: 4});

            const xrPromise = scene.createDefaultXRExperienceAsync({
                floorMeshes: [ground]
            });

            return xrPromise.then((xrExperience) => {
                console.log("Done, WebXR is enabled.");
                return scene;
            });
        };

        createScene().then(sceneToRender => {
            engine.runRenderLoop(() => sceneToRender.render());
        });
    </script>
</body>
</html>

  5. Kode di atas menghasilkan output berikut di jendela browser: Adegan WebXR

Berjalan di Simulator Windows Mixed Reality

  1. Aktifkan simulator Windows Mixed Reality jika Anda belum melakukannya di masa lalu.

  2. Pilih tombol Immersive-VR di sudut kanan bawah: Tombol VR Imersif

  3. Tindakan ini akan meluncurkan jendela Simulator Windows Mixed Reality seperti yang ditunjukkan di bawah ini: portal Mixed Reality

  4. Gunakan tombol W,A,S, dan D pada keyboard Anda untuk berjalan maju, kembali ke kiri dan kanan yang sesuai. Gunakan tangan yang disimulasikan untuk menargetkan kubus dan tekan tombol Enter pada keyboard Anda untuk melakukan tindakan klik. Kubus akan mengubah warnanya dan pindah ke posisi baru.

Catatan

Saat menargetkan kubus, pastikan bahwa akhir sinar tangan (lingkaran putih) berpotongan dengan kubus seperti yang ditunjukkan pada gambar di atas. Pelajari selengkapnya tentang Titik dan berkomitmen dengan tangan.

Menjalankan dan men-debug di perangkat Android

Lakukan langkah-langkah berikut untuk mengaktifkan penelusuran kesalahan di perangkat Android Anda:

Prasyarat

  • Server web yang melayani halaman html statis dalam konteks aman (https:// atau melalui Penerusan port di localhost) pada komputer pengembangan. Misalnya leverage melayani paket npm sebagai server web ringan sederhana yang melayani file html statis, periksa lebih banyak layanan npm

  • Perangkat awalnya dikirim dengan Google Play Store dan harus menjalankan Android 7.0 atau yang lebih baru

  • Versi terbaru Google Chrome di stasiun kerja pengembangan dan di perangkat

  • Untuk memverifikasi bahwa perangkat dikonfigurasi dengan benar untuk menjalankan WebXR, telusuri ke halaman WebXR sampel pada perangkat. Anda akan melihat pesan, seperti:

    Browser Anda mendukung WebXR dan dapat menjalankan pengalaman Realitas Virtual dan Realitas Teraugmentasi jika Anda memiliki perangkat keras yang sesuai.

  1. Aktifkan mode pengembang dan penelusuran kesalahan USB di perangkat Android. Lihat cara melakukan ini untuk versi Android Anda di halaman dokumentasi resmi Mengonfigurasi opsi pengembang di perangkat

  2. Selanjutnya, sambungkan perangkat Android ke mesin pengembangan atau laptop Anda melalui kabel USB

  3. Pastikan bahwa server web pada komputer pengembangan sedang berjalan. Misalnya, navigasikan ke folder akar yang berisi halaman hosting web Anda (index.html) dan jalankan kode berikut (dengan asumsi Anda menggunakan paket npm sajikan):

    serve

  4. Buka Google Chrome di komputer pengembangan Anda dan masukkan di bilah alamat teks berikut:

    chrome://inspect#devices Jendela debugging USB Chrome

  5. Pastikan kotak centang Temukan perangkat USB diaktifkan

  6. Klik tombol Penerusan port dan pastikan bahwa Penerusan port diaktifkan dan berisi entri localhost:5000 seperti yang ditunjukkan di bawah ini: Jendela Penerusan Port Chrome

  7. Di perangkat Android yang terhubung, buka jendela Google Chrome dan telusuri http://localhost:5000 dan Anda akan melihat kubus

  8. Di komputer pengembangan, di Chrome, Anda akan melihat perangkat dan daftar halaman web yang saat ini dibuka di sana: Jendela Inspeksi Chrome

  9. Klik tombol Periksa di samping entri http://localhost:5000: Jendela Debug Chrome DevTools

  10. Menggunakan Chrome DevTools untuk men-debug halaman

Poin-poin penting

Berikut ini adalah takeaways terpenting dari tutorial ini:

  • Babylon.js memudahkan untuk membuat pengalaman imersif menggunakan JavaScript
  • Untuk membuat adegan virtual, Anda tidak perlu menulis kode tingkat rendah atau mempelajari teknologi baru
  • Anda dapat membangun aplikasi Mixed Reality dengan browser yang didukung WebXR tanpa perlu membeli headset

Langkah berikutnya

Selamat! Anda telah menyelesaikan serangkaian tutorial Babylon.js kami dan mempelajari cara:

  • Menyiapkan lingkungan pengembangan
  • Membuat halaman web baru untuk menampilkan hasil
  • API Babylon.js untuk membuat dan berinteraksi dengan elemen 3D dasar
  • Menjalankan dan menguji aplikasi di simulator Windows Mixed Reality

Untuk informasi selengkapnya tentang pengembangan Mixed Reality JavaScript, lihat Gambaran umum pengembangan JavaScript.

Jika Anda mencari tutorial Babylon.js lain, lihat Seri Tutorial pembuatan Piano untuk mempelajari cara membangun piano di ruang VR menggunakan Babylon.js.

  • Last updated on