Samouczek: interakcja z obiektem 3D

Dowiedz się, jak tworzyć obiekty 3D i interakcje dla Mixed Reality przy użyciu babylon.js. W tej sekcji zaczniesz od czegoś prostego, takiego jak malowanie twarzy sześcianu po wybraniu obiektu.

Ten samouczek obejmuje następujące tematy:

  • Jak dodać interakcje
  • Włączanie trybu immersyjnego WebXR
  • Uruchamianie aplikacji w symulatorze Windows Mixed Reality symulatora
  • Uruchamianie i debugowanie aplikacji w przeglądarce Android Chrome

Zanim rozpoczniesz

W poprzednim kroku samouczka utworzono podstawową stronę internetową ze sceną. Otwórz stronę internetową hostowania do edycji.

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

Dodawanie interakcji

  1. Najpierw zaktualizujmy nasz kod, który tworzy sześcian, tak aby sześcian był malowany losowym kolorem. W tym celu dodamy materiał do modułu. Materiał pozwala określić kolor i tekstury i może być używany do okładki innych obiektów. Sposób pojawiania się materiału zależy od światła lub światła używanego w scenie i tego, jak jest ustawiony na reagowanie. Na przykład kolor w siatce, do której jest dołączony, jest rozrzuty. Dodaj następujący kod:

    const boxMaterial = new BABYLON.StandardMaterial("material", scene);
    boxMaterial.diffuseColor = BABYLON.Color3.Random();
    box.material = boxMaterial;
    
  2. Teraz, gdy sześcian jest malowany kolorem losowym, dodajmy interakcję do:

    • Zmienianie koloru po kliknięciu modułu
    • Przenoszenie sześcianu po zmianie koloru

    Aby dodać interakcje, należy użyć akcji. Akcja jest uruchamiana w odpowiedzi na wyzwalacz zdarzenia. Na przykład gdy użytkownik kliknie moduł. Wszystko, co musimy zrobić, to utworzyć wystąpienia BABYLON. ActionManager i zarejestruj akcję dla określonego wyzwalacza. The BABYLON (BABYLON). Funkcja ExecuteCodeAction uruchamia naszą funkcję JavaScript, gdy ktoś kliknie moduł:

    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. Końcowy kod strony internetowej będzie wyglądać następująco:

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

Włączanie immersyjnego środowiska WebXR

Teraz, gdy nasz sześcian zmienia kolory, możemy wypróbować immersywne środowisko.

  1. W tym kroku przedstawimy wprowadzenie do tematu. Sześcian będzie zawieszał się w powietrzu, a u dołu zobaczysz podłogę. Dodaj powierzchnię w następujący sposób:

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

    Powoduje to utworzenie prostej podłogi o powierzchni 4 x 4 mierniki.

  2. Aby dodać obsługę webXR, musimy wywołać wywołanie createDefaultXRExperienceAsync, które ma wynik Promise. Dodaj ten kod na końcu funkcji createScene zamiast zwracanej sceny::

    const xrPromise = scene.createDefaultXRExperienceAsync({
        floorMeshes: [ground]
    });
    return xrPromise.then((xrExperience) => {
        console.log("Done, WebXR is enabled.");
        return scene;
    });
    
  3. Ponieważ funkcja createScene zwraca teraz obietnicę zamiast sceny, musimy zmodyfikować sposób wywoływania właściwości createScene i engine.runRenderLoop. Zastąp bieżące wywołania tych funkcji, które znajdują się tuż przed </script> tagiem, poniższym kodem:

    createScene().then(sceneToRender => {
        engine.runRenderLoop(() => sceneToRender.render());
    });
    
  4. Końcowy kod strony internetowej będzie wyglądać następująco:

    <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. Powyższy kod generuje następujące dane wyjściowe w oknie przeglądarki: scena  WebXR

Uruchamianie w symulatorze Windows Mixed Reality danych

  1. Włącz symulator Windows Mixed Reality, jeśli nie zrobiono tego w przeszłości.

  2. Wybierz przycisk Immersive-VR w prawym dolnym rogu:  Immersywny przycisk VR

  3. Ta akcja spowoduje uruchomienie okna symulatora Windows Mixed Reality, jak pokazano  poniżej: Portal rzeczywistości mieszanej

  4. Użyj klawiszy W, A, S i D na klawiaturze, aby odpowiednio przejść do przodu, do tyłu w lewo i w prawo. Użyj symulowanej ręki, aby kierować sześcian, a następnie naciśnij klawisz Enter na klawiaturze, aby wykonać akcję kliknięcia. Sześcian zmieni kolor i przeniesie się do nowej pozycji.

Uwaga

Podczas określania celu sześcianu upewnij się, że koniec promienia ręki (biały okrąg) przecina się z sześcianem, jak pokazano na ilustracji powyżej. Dowiedz się więcej na temat punktu i zatwierdzania z rąk.

Uruchamianie i debugowanie na urządzeniu z systemem Android

Wykonaj następujące kroki, aby włączyć debugowanie na urządzeniu z systemem Android:

Wymagania wstępne

  • Serwer internetowy, który obsługuje statyczną stronę HTML w bezpiecznym kontekście (https:// lub za pośrednictwem przekazywania portów na localhost) na komputerze dewelopera. Na przykład wykorzystaj możliwość obsługi pakietu npm jako prostego, lekkiego serwera internetowego, który obsługuje statyczne pliki HTML, sprawdź więcej informacji o poleceniu npm

  • Urządzenie zostało pierwotnie dostarczone z urządzeniem Sklep Google Play musi działać z systemem Android 7.0 lub jego nowszej wersji

  • Najnowsza wersja przeglądarki Google Chrome zarówno na deweloperowej stacji roboczej, jak i na urządzeniu

  • Aby sprawdzić, czy urządzenie jest poprawnie skonfigurowane do uruchamiania usługi WebXR, przejdź do przykładowej strony WebXR na urządzeniu. Powinien zostać wyświetlony komunikat, taki jak:

    Przeglądarka obsługuje funkcję WebXR i może uruchamiać środowiska rzeczywistości wirtualnej i rzeczywistości rozszerzonej, jeśli masz odpowiedni sprzęt.

  1. Włącz tryb dewelopera i debugowanie USB na urządzeniu z systemem Android. Zobacz, jak to zrobić dla swojej wersji systemu Android, na oficjalnej stronie dokumentacji Konfigurowanie opcji dewelopera na urządzeniu

  2. Następnie podłącz urządzenie z systemem Android do komputera dewelopera lub laptopa za pomocą kabla USB

  3. Upewnij się, że serwer internetowy na maszynie dewelopera jest uruchomiony. Na przykład przejdź do folderu głównego zawierającego twoją stronę hostingu internetowego (index.html) i wykonaj następujący kod (przy założeniu, że używasz obsługi pakietu npm):

    serve
    
  4. Otwórz przeglądarkę Google Chrome na komputerze dewelopera i wprowadź na pasku adresu następujący tekst:

    Chrome://inspect#devices  Chrome USB debugging window (Okno debugowania Chrome USB na stronie inspect#devices)

  5. Upewnij się, że pole wyboru Odnajdywanie urządzeń USB jest włączone

  6. Kliknij przycisk Przekieruj port i upewnij się, że opcja Przekazywanie portów jest włączona i zawiera wpis localhost:5000, jak pokazano poniżej: Okno przekazywania portów  w przeglądarce Chrome

  7. Na połączonym urządzeniu z systemem Android otwórz okno przeglądarki Google Chrome i przejdź pod adres . http://localhost:5000 Powinien zostać wyświetlony moduł

  8. Na komputerze dewelopera w przeglądarce Chrome zobaczysz urządzenie i listę aktualnie otwartych stron internetowych: okno  inspekcji programu Chrome

  9. Kliknij przycisk Inspect (Sprawdź) obok wpisu : Chrome DevTools Debug window (Okno http://localhost:5000  debugowania narzędzi DevTools dla programu Chrome)

  10. Debugowanie strony przy użyciu narzędzia DevTools dla programu Chrome

Wnioski

Poniżej przedstawiono najważniejsze informacje z tego samouczka:

  • Babylon.js ułatwia tworzenie immersywnych środowiska przy użyciu języka JavaScript
  • Aby tworzyć wirtualne sceny, nie trzeba pisać kodu niskiego poziomu ani uczyć się nowej technologii
  • Możesz tworzyć Mixed Reality za pomocą przeglądarki obsługiwanej przez serwer WebXR bez konieczności kupowania zestawu nagłownego

Następne kroki

Gratulacje! Ukończyliśmy naszą serię samouczków babylon.js i nauczyliśmy się, jak:

  • Konfigurowanie środowiska projektowego
  • Tworzenie nowej strony internetowej w celu wyświetlenia wyników
  • Interfejs babylon.js API do tworzenia podstawowych elementów 3D i korzystania z tych elementów
  • Uruchamianie i testowanie aplikacji w symulatorze Windows Mixed Reality testowania

Aby uzyskać więcej informacji na temat Mixed Reality programowania w języku JavaScript, zobacz Omówienie programowania w języku JavaScript.

Jeśli szukasz innego samouczka z babylon.js, zapoznaj się z serią Samouczki dotyczące tworzenia aplikacji kompilowanych na urządzeniach, aby dowiedzieć się, jak utworzyć centrum w przestrzeni VR przy użyciu babylon.js.