Oktatóanyag: 3D-objektummal való interakció

Megtudhatja, hogyan hozhat létre 3D-objektumokat és interakciókat egy Mixed Reality felhasználói babylon.js. Ebben a szakaszban valami egyszerűvel fog kezdeni, például egy kocka arcának kifestésében, amikor kiválasztja az objektumot.

Ez az oktatóanyag a következő témaköröket tartalmazza:

  • Interakciók hozzáadása
  • A WebXR modern üzemmód engedélyezése
  • Az alkalmazás futtatása Windows Mixed Reality szimulátoron
  • Az alkalmazás futtatása és hibakeresése Android Chrome-on

Előkészületek

Az előző oktatóanyagban létrehoztunk egy alapszintű weblapot egy jelenetekkel. Nyissa meg az üzemeltetési weboldalt szerkesztésre.

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

Interakció hozzáadása

  1. Először frissítjük a kódot, amely létrehozza a kockát, hogy a kocka véletlenszerű színnel legyen megszűkve. Ehhez hozzáadunk egy anyagot a kockához. Az anyag lehetővé teszi szín és textúra megadását, és más objektumok lefedése is használható. Az anyag megjelenése a jelenetben használt fénytől és a reagálásra beállított fénytől függ. Acolor szín például a hozzácsatolt hálóra terjeszti a színt. Adja hozzá a következő kódot:

    const boxMaterial = new BABYLON.StandardMaterial("material", scene);
    boxMaterial.diffuseColor = BABYLON.Color3.Random();
    box.material = boxMaterial;
    
  2. Most, hogy a kocka véletlenszerű színnel van megszűkve, adjunk hozzá egy interakciót a következő hez:

    • A kocka kattintáskor színének módosítása
    • A kocka áthelyezése a szín módosulás után

    Interakciók hozzáadásához műveleteket kell használnunk. A rendszer elindít egy műveletet az eseményindítóra válaszul. Például amikor a felhasználó a kockára kattint. Mindössze példányosnunk kell a MAJD-t. ActionManager és egy művelet regisztrálása bizonyos eseményindítókhoz. The BABYLON.ExecuteCodeAction will run our JavaScript function when someone clicks on the cube:

    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. A weblap utolsó kódja a következőképpen néz ki:

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

A WebXR modern felhasználói élményének engedélyezése

Most, hogy a kocka színe megváltozik, kipróbálhatjuk a magával ragadó élményt.

  1. Ebben a lépésben egy alapfogatot mutatunk be. A kocka a levegőn fog lelógni, és az alján egy padló látható. Adja hozzá a talajt a következőképpen:

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

    Ez egy egyszerű, 4x4-es padlóburkolatot hoz létre.

  2. A WebXR-támogatás hozzáadásához meg kell hívnunk a createDefaultXRExperienceAsyncmetódust, amely egy Promise eredményt ad. Adja hozzá ezt a kódot a createScene függvény végéhez a visszatérési jelenet helyett:

    const xrPromise = scene.createDefaultXRExperienceAsync({
        floorMeshes: [ground]
    });
    return xrPromise.then((xrExperience) => {
        console.log("Done, WebXR is enabled.");
        return scene;
    });
    
  3. Mivel a createScene függvény most egy ígéretet ad vissza egy jelenet helyett, módosítanunk kell a createScene és az engine.runRenderLoop függvényt. Cserélje le a /script > címke előtt található jelenlegi függvényhívásokat az alábbi kódra:

    createScene().then(sceneToRender => {
        engine.runRenderLoop(() => sceneToRender.render());
    });
    
  4. A weblap utolsó kódja a következőképpen néz ki:

    <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. A fenti kód a következő kimenetet hozza létre a böngészőablakban: WebXR-jelenet

Futtatás Windows Mixed Reality szimulátoron

  1. Engedélyezze a Windows Mixed Reality szimulátort, ha korábban még nem tette meg.

  2. Válassza a Modern VR gombot a jobb alsó sarokban: Modern VR gomb

  3. Ez a művelet elindítja a Windows Mixed Reality Szimulátor ablakot az alább látható módon: Vegyes valóság portál

  4. A billentyűzet W,A, S és D billentyűivel ennek megfelelően haladhat előre, balra és jobbra. A szimulált kézzel célozza meg a kockát, és nyomja le az Enter billentyűt a kattintási művelet végrehajtásához. A kocka módosítja a színét, és új helyre kerül.

Megjegyzés

A kocka megcélzásakor győződjön meg arról, hogy a kéz alakú sugár (fehér kör) a fenti képen látható módon ékezetes a kockával. További információ a Point and commit with hands (Pont és véglegesítés kézzel) ről.

Futtatás és hibakeresés Android-eszközön

A következő lépések elvégzésével engedélyezheti a hibakeresést az Android-eszközön:

Előfeltételek

  • Egy webkiszolgáló, amely biztonságos környezetben (https:// vagy localhost portok továbbításával) szolgálja ki a statikus HTML-oldalt a fejlesztői gépen. Ha például statikus HTML-fájlokat kiszolgáló egyszerű, egyszerűsített webkiszolgálóként használja az npm-csomagot, tekintse meg a további npm-kiszolgálót

  • Az eszköz eredetileg a Google Play Áruház androidos 7.0-s vagy újabb rendszerűnek kell lennie

  • A Google Chrome legújabb verziója a fejlesztői munkaállomáson és az eszközön is

  • Annak ellenőrzéséhez, hogy az eszköz megfelelően van-e konfigurálva a WebXR futtatására, keresse meg az eszköz egy WebXR-mintaoldalát. Az üzenetnek a következőnek kell lennie:

    A böngésző támogatja a WebXR-t, és ha a megfelelő hardverrel működik, futtathatja a Virtual Reality és a Kiterjesztett valóság élményt.

  1. Fejlesztői mód és USB-hibakeresés engedélyezése Android-eszközön. Az Android-verzióval kapcsolatos ezt a hivatalos dokumentációs oldalon, az Eszközön elérhető fejlesztői beállítások konfigurálása oldalon találhatja meg.

  2. Ezután csatlakoztassa az Android-eszközt a fejlesztői géphez vagy a laptophoz USB-kábelen keresztül

  3. Győződjön meg arról, hogy a fejlesztői gépen futó webkiszolgáló fut. Lépjen például a webes üzemeltetési oldalt (index.html) tartalmazó gyökérmappára, és hajtsa végre a következő kódot (feltéve, hogy az npm-csomagot használja):

    serve
    
  4. Nyissa meg a Google Chrome böngészőt a fejlesztői gépen, és írja be a következő szöveget a címsorba:

    chrome://inspect#devices Chrome USB-hibakeresési ablak

  5. Győződjön meg arról, hogy az USB-eszközök felderítése jelölőnégyzet be van engedélyezve

  6. Kattintson a Port továbbítása gombra, és győződjön meg arról, hogy a Port továbbítása engedélyezve van, és tartalmazza a localhost:5000 bejegyzést az alább látható módon: Chrome-port továbbítása ablak

  7. A csatlakoztatott Android-eszközön nyisson meg egy Google Chrome-ablakot, és keresse meg a webhelyet, http://localhost:5000 és megjelenik a kocka

  8. A fejlesztői gépen a Chrome-ban megjelenik az eszköz és a jelenleg megnyitott weblapok listája: Chrome-vizsgálat ablak

  9. Kattintson az Inspect (Vizsgálat) gombra egy bejegyzés mellett: Chrome DevTools Debug ablak

  10. Az oldal hibakeresése a Chrome DevTools használatával

Legfontosabb ismeretek

Az oktatóanyag legfontosabb lépései a következők:

  • Babylon.js a JavaScripttel egyszerűen hozhat létre magával ragadó élményeket
  • Virtuális jelenetek létrehozásához nem kell alacsony szintű kódot írnia, vagy új technológiát megtanulnia
  • WebXR Mixed Reality támogatott böngészővel anélkül építhet ki alkalmazásokat, hogy headsetet kellene vásárolnia

Következő lépések

Gratulálunk! Befejezte az oktatóanyag-sorozatot, babylon.js a következőt:

  • Fejlesztési környezet beállítása
  • Új weblap létrehozása az eredmények megjelenítéséhez
  • A babylon.js API alapszintű 3D-elemek létrehozásához és a velük való interakcióhoz
  • Az alkalmazás futtatása és tesztelése egy Windows Mixed Reality szimulátorban

További információ a JavaScript Mixed Reality fejlesztésről: JavaScript-fejlesztés áttekintése.

Ha egy másik oktatóanyagra van szüksége, babylon.js Az oktatóanyag-sorozatból megtudhatja, hogyan építhet egy fogat a VR-térben az babylon.js.