Zelfstudie: Interactie met 3D-object

Meer informatie over het maken van 3D-objecten en interacties voor een Mixed Reality ervaring met behulp van babylon.js. In deze sectie begint u met iets eenvoudigs, zoals het verven van de gezichten van een kubus wanneer u het object selecteert.

In deze zelfstudie worden de volgende onderwerpen behandeld:

  • Interacties toevoegen
  • WebXR-in immersieve modus inschakelen
  • De app uitvoeren op Windows Mixed Reality Simulator
  • De app uitvoeren en fouten opsporen in Android Chrome

Voordat u begint

In de vorige stap van de zelfstudie is een eenvoudige webpagina met een scène gemaakt. Open de hostingwebpagina om te bewerken.

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

Interactie toevoegen

  1. Laten we eerst onze code bijwerken die de kubus maakt, zodat de kubus een willekeurige kleur krijgt. Om dat te doen, voegen we materiaal toe aan de kubus. Materiaal stelt ons in staat om kleur en texturen op te geven en kan worden gebruikt om andere objecten te behandelen. Hoe een materiaal wordt weergegeven, hangt af van het licht of de lichten die in de scène worden gebruikt en hoe het is ingesteld om te reageren. De diffuusColor verspreidt bijvoorbeeld de kleur over de mesh waaraan deze is gekoppeld. Voeg de volgende code toe:

    const boxMaterial = new BABYLON.StandardMaterial("material", scene);
    boxMaterial.diffuseColor = BABYLON.Color3.Random();
    box.material = boxMaterial;
    
  2. Nu de kubus een willekeurige kleur heeft, gaan we een interactie toevoegen aan:

    • De kleur wijzigen wanneer op de kubus wordt geklikt
    • De kubus verplaatsen nadat de kleur is gewijzigd

    Om interacties toe te voegen, moeten we acties gebruiken. Er wordt een actie gestart als reactie op de gebeurtenistrigger. Bijvoorbeeld wanneer de gebruiker op de kubus klikt. U hoeft alleen MAAR EEN INSTANTIE te maken. ActionManager en registreer een actie voor een bepaalde trigger. De EDE. ExecuteCodeAction voert de JavaScript-functie uit wanneer iemand op de kubus klikt:

    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. De uiteindelijke code van de webpagina ziet er als volgt uit:

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

WebXR-indieve ervaring inschakelen

Nu de kubus van kleur verandert, kunt u de indive experience uitproberen.

  1. In deze stap introduceren we een grond. De kubus hangt in de lucht en we zien een vloer aan de onderkant. Voeg de grond als volgt toe:

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

    Hiermee maakt u een eenvoudige vloer van 4x4 meter.

  2. Als u WebXR-ondersteuning wilt toevoegen, moet u createDefaultXRExperienceAsync aanroepen, dat een Promise-resultaat heeft. Voeg deze code toe aan het einde van de functie createFunctie in plaats van de retourscène;:

    const xrPromise = scene.createDefaultXRExperienceAsync({
        floorMeshes: [ground]
    });
    return xrPromise.then((xrExperience) => {
        console.log("Done, WebXR is enabled.");
        return scene;
    });
    
  3. Omdat de functie createAuto nu een promise retournt in plaats van een scène, moeten we wijzigen hoe createAuto en engine.runRenderLoop worden aangeroepen. Vervang de huidige aanroepen van deze functies, die zich direct vóór de </script> tag bevinden, door de onderstaande code:

    createScene().then(sceneToRender => {
        engine.runRenderLoop(() => sceneToRender.render());
    });
    
  4. De uiteindelijke code van de webpagina ziet er als volgt uit:

    <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. Met de bovenstaande code wordt de volgende uitvoer gegenereerd in het browservenster:  WebXR-scène

Uitvoeren op een Windows Mixed Reality Simulator

  1. Schakel de Windows Mixed Reality Simulator in als u dit in het verleden niet hebt gedaan.

  2. Selecteer de knop Immersive-VR in de rechteronderhoek:  Immersive VR Button

  3. Met deze actie wordt het venster Windows Mixed Reality Simulator geopend, zoals hieronder wordt  weergegeven: Mixed Reality-portal

  4. Gebruik de toetsen W, A, S en D op het toetsenbord om vooruit, terug naar links en rechts dienovereenkomstig te lopen. Gebruik de gesimuleerde hand om de kubus als doel te gebruiken en druk op enter op het toetsenbord om de klikactie uit te voeren. De kleur van de kubus wordt gewijzigd en verplaatst naar een nieuwe positie.

Notitie

Wanneer u de kubus als doel kiest, moet u ervoor zorgen dat het einde van de handfoto (witte cirkel) wordt doorsect met de kubus, zoals wordt weergegeven op de bovenstaande afbeelding. Meer informatie over Punt en door te geven met handen.

Uitvoeren en fouten opsporen op Een Android-apparaat

Voer de volgende stappen uit om het inschakelen van debuggen op uw Android-apparaat:

Vereisten

  • Een webserver die als statische HTML-pagina fungeert in beveiligde context (https:// of via port forwarding op localhost) op de ontwikkelmachine. Gebruik bijvoorbeeld het npm-pakket als eenvoudige lichtgewicht webserver die statische HTML-bestanden levert. Controleer meer npm serve

  • Het apparaat is oorspronkelijk geleverd met de Google Play Store en moet Android 7.0 of hoger hebben

  • De nieuwste versie van Google Chrome op zowel het ontwikkelwerkstation als op het apparaat

  • Als u wilt controleren of het apparaat juist is geconfigureerd om WebXR uit te voeren, bladert u naar een webxr-voorbeeldpagina op het apparaat. U ziet het bericht, zoals:

    Uw browser ondersteunt WebXR en kan Virtual Reality- en Augmented Reality-ervaringen uitvoeren als u de juiste hardware hebt.

  1. Schakel de ontwikkelaarsmodus en USB-debugging in op een Android-apparaat. Zie hoe u dit doet voor uw versie van Android op de officiële documentatiepagina Opties voor ontwikkelaars op apparaten configureren

  2. Verbind vervolgens het Android-apparaat met uw ontwikkelcomputer of laptop via een USB-kabel

  3. Zorg ervoor dat de webserver op de ontwikkelmachine wordt uitgevoerd. Navigeer bijvoorbeeld naar de hoofdmap met uw webhostingpagina (index.html) en voer de volgende code uit (ervan uitgaande dat u npm-pakket gebruikt):

    serve
    
  4. Open Google Chrome op uw ontwikkelmachine en voer in de adresbalk de volgende tekst in:

    chrome://inspect#devices  Chrome USB-foutopsporingsvenster

  5. Zorg ervoor dat het selectievakje USB-apparaten ontdekken is ingeschakeld

  6. Klik op de knop Port forwarding en zorg ervoor dat Port Forwarding is ingeschakeld en een vermelding localhost:5000 bevat, zoals hieronder wordt weergegeven:  Chrome Port Forwarding window

  7. Open op uw verbonden Android-apparaat een Google Chrome-venster en blader naar http://localhost:5000 en u ziet de kubus.

  8. Op uw ontwikkelmachine, in Chrome, ziet u uw apparaat en een lijst met webpagina's die daar momenteel zijn geopend:  Venster Chrome inspecteren

  9. Klik op de knop Inspecteren naast een http://localhost:5000 vermelding: Chrome  DevTools-foutopsporingsvenster

  10. Chrome DevTools gebruiken om fouten op de pagina op te sporen

Opgedane kennis

Hier volgen de belangrijkste leerstele uit deze zelfstudie:

  • Babylon.js maakt het eenvoudig om in immersieve ervaringen te maken met JavaScript
  • Als u virtuele scènes wilt maken, hoeft u geen code op laag niveau te schrijven of een nieuwe technologie te leren gebruiken
  • U kunt Mixed Reality bouwen met een door WebXR ondersteunde browser zonder dat u een headset hoeft te kopen

Volgende stappen

Gefeliciteerd! U hebt onze reeks zelfstudies babylon.js voltooid en u hebt het volgende geleerd:

  • Een ontwikkelomgeving instellen
  • Een nieuwe webpagina maken om resultaten weer te geven
  • De babylon.js API voor het maken en gebruiken van eenvoudige 3D-elementen
  • De toepassing uitvoeren en testen in een Windows Mixed Reality Simulator

Zie JavaScript development overview Mixed Reality javascript development overview (JavaScript-ontwikkelingsoverzicht) voor meer informatie over javascript-ontwikkeling.

Als u op zoek bent naar een andere babylon.js-zelfstudie, bekijkt u de Zelfstudiereeks Voor het bouwen van een huis in de VR-ruimte met behulp van babylon.js.