Kurz: Interakce s 3D objektem

Naučte se vytvářet 3D objekty a interakce pro Mixed Reality prostředí pomocí babylon.js. V této části začnete něčím jednoduchým, třeba nakreslováním tváří datové krychle při výběru objektu.

Tento kurz se zabývá následujícími tématy:

  • Přidání interakcí
  • Povolení imerzivního režimu WebXR
  • Spuštění aplikace v Windows Mixed Reality simulátoru
  • Spuštění a ladění aplikace v Android Chromu

Než začnete

V předchozím kroku kurzu byla vytvořena základní webová stránka se scénou. Otevřete hostingovou webovou stránku pro úpravy.

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

Přidání interakce

  1. Nejprve aktualizujeme kód, který vytvoří datovou krychli, aby datová krychle byla zachovaná náhodnou barvou. K tomu přidáme do datové krychle materiál. Materiál umožňuje určit barvu a textury a lze je použít k pokrytí jiných objektů. To, jak se materiál zobrazuje, závisí na světlu nebo světlech používaných ve scéně a na tom, jak je nastaven tak, aby reagoval. Napříkladcolorcolor rozprostíří barvu po celé síti, ke které je připojena. Přidejte následující kód:

    const boxMaterial = new BABYLON.StandardMaterial("material", scene);
    boxMaterial.diffuseColor = BABYLON.Color3.Random();
    box.material = boxMaterial;
    
  2. Když teď máme datovou krychli náhodnou barvu, přidáme interakci do:

    • Změna barvy při kliknutí na datovou krychli
    • Přesunutí datové krychle po změně barvy

    K přidání interakcí bychom měli používat akce. V reakci na trigger události se spustí akce. Například když uživatel klikne na datovou krychli. Jediné, co musíme udělat, je vytvořit instanci FUNKCE. ActionManager a registrace akce pro určitý trigger The INN. ExecuteCodeAction spustí javascriptovou funkci, když někdo klikne na datovou krychli:

    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. Konečný kód webové stránky bude vypadat takto:

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

Povolení imerzivního prostředí WebXR

Teď, když datová krychle mění barvy, jsme připraveni vyzkoušet imerzivní prostředí.

  1. V tomto kroku se seznámíme s uzemněním. Datová krychle bude viset ve vzduchu a v dolní části se zobrazí podlaží. Přidejte zem následujícím způsobem:

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

    Tím se vytvoří jednoduché podlaží o 4 metrech.

  2. Abychom mohli přidat podporu WebXR, musíme zavolat metodu createDefaultXRExperienceAsync,která má výsledek příslibu. Na konec funkce createScene místo návratové scény přidejte tento kód::

    const xrPromise = scene.createDefaultXRExperienceAsync({
        floorMeshes: [ground]
    });
    return xrPromise.then((xrExperience) => {
        console.log("Done, WebXR is enabled.");
        return scene;
    });
    
  3. Vzhledem k tomu, že funkce createScene teď místo scény vrací příslib, musíme upravit, jak se volá createScene a engine.runRenderLoop. Aktuální volání těchto funkcí, která se nacházejí přímo před značkou /script, > nahraďte následujícím kódem:

    createScene().then(sceneToRender => {
        engine.runRenderLoop(() => sceneToRender.render());
    });
    
  4. Konečný kód webové stránky bude vypadat takto:

    <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. Výše uvedený kód vygeneruje v okně prohlížeče následující výstup: scéna WebXR

Spuštění v simulátoru Windows Mixed Reality počítači

  1. Pokud jste Windows Mixed Reality v minulosti, povolte simulátor protokolování.

  2. V pravém dolním rohu vyberte tlačítko Immersive-VR: Tlačítko Asistivní VR.

  3. Tato akce spustí okno simulátoru Windows Mixed Reality, jak je znázorněno níže: Portál hybridní reality

  4. Klávesy W,A,S a D na klávesnici můžete použít k tomu, abyste se posunuly vpřed, zpět doleva a doprava. Pomocí simulované ruky zacílit datovou krychli a stisknutím klávesy Enter na klávesnici proveďte akci kliknutí. Datová krychle změní svou barvu a přesune se na novou pozici.

Poznámka

Při cílení na datovou krychli se ujistěte, že se konec ručního paprsku (bílý kruh) protíná s datovou krychlí, jak je znázorněno na obrázku výše. Přečtěte si další informace o bodování a potvrzení pomocí rukou.

Spuštění a ladění na zařízení s Androidem

Pokud chcete povolit ladění na zařízení s Androidem, proveďte následující kroky:

Požadavky

  • Webový server, který poskytuje statickou stránku HTML v zabezpečeném kontextu (https:// nebo přes přesměrování portů na místním hostiteli) na vývojovém počítači. Pokud například využíváte balíček npm jako jednoduchý jednoduchý webový server, který obsluhuuje statické soubory HTML, podívejte se na další informace o npm serve.

  • Zařízení se původně dodává s Obchod Google Play a musí na zařízení běžet Android 7.0 nebo novější.

  • Nejnovější verze Google Chromu na vývojové pracovní stanici i na zařízení

  • Pokud chcete ověřit, jestli je zařízení správně nakonfigurované tak, aby spouštěl WebXR, přejděte na ukázkovou stránku WebXR na zařízení. Měla by se zobrazit zpráva, například:

    Váš prohlížeč podporuje WebXR a může spouštět prostředí virtuální reality a rozšířené reality, pokud máte odpovídající hardware.

  1. Povolte vývojářský režim a ladění USB na zařízení s Androidem. Postup pro vaši verzi Androidu najdete na oficiální stránce dokumentace Konfigurace možností pro vývojáře na zařízení.

  2. Dále připojte zařízení s Androidem k vývojovému počítači nebo přenosnému počítači pomocí kabelu USB.

  3. Ujistěte se, že je webový server na vývojovém počítači spuštěný. Přejděte například do kořenové složky obsahující webhostingovou stránku (index.html) a spusťte následující kód (za předpokladu, že použijete příkaz serve npm package):

    serve
    
  4. Na vývojovém počítači otevřete Google Chrome a do adresního řádku zadejte následující text:

    chrome://inspect#devices Ladicí okno Chrome USB

  5. Ujistěte se, že je zaškrtnuté políčko Zjistit zařízení USB.

  6. Klikněte na tlačítko Přesměrování portů a ujistěte se, že je povolené přesměrování portů a obsahuje položku localhost:5000, jak je znázorněno níže: Okno Přesměrování portu chrome

  7. Na připojeném zařízení s Androidem otevřete okno Google Chrome, přejděte na a měli byste vidět http://localhost:5000 datovou krychli.

  8. Na vývojovém počítači se v Chromu zobrazí vaše zařízení a seznam aktuálně otevřených webových stránek: Okno pro kontrolu Chromu

  9. Klikněte na tlačítko Zkontrolovat vedle položky: Okno ladění DevTools pro Chrome

  10. Použití DevTools v Chromu k ladění stránky

Shrnutí

Toto jsou nejdůležitější pochůdky z tohoto kurzu:

  • Babylon.js snadné vytváření imerzivních prostředí pomocí JavaScriptu
  • K vytváření virtuálních scén nemusíte psát kód nízké úrovně ani se učit novou technologii.
  • Pomocí prohlížeče podporovaného Mixed Reality WebXR můžete vytvářet vlastní aplikace, aniž byste si muset koupit náhlavní soupravu.

Další kroky

Gratulujeme! Dokončili jste naši sérii kurzů babylon.js a naučili jste se:

  • Nastavení vývojového prostředí
  • Vytvoření nové webové stránky pro zobrazení výsledků
  • Rozhraní babylon.js API pro vytváření základních 3D prvků a práci s nimi
  • Spuštění a otestování aplikace v Windows Mixed Reality simulátoru

Další informace o vývoji Mixed Reality JavaScriptu najdete v tématu Přehled vývoje JavaScriptu.

Pokud hledáte další kurz babylon.js kurzu, podívejte se na sérii kurzů o budově, kde se dozvíte, jak pomocí této babylon.js.