Samouczek: interakcja z obiektem 3D

Artykuł
03/21/2023

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

W tym samouczku omówiono następujące tematy:

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

Zanim rozpoczniesz

W poprzednim samouczku utworzono podstawową stronę internetową ze sceną. Otwórz stronę internetową hostingu 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

Najpierw zaktualizujmy nasz kod, który tworzy moduł, tak aby moduł był malowany losowym kolorem. W tym celu dodamy materiał do naszego modułu. Materiał pozwala nam określić kolor i tekstury i można go użyć do pokrycia innych obiektów. Sposób wyświetlania materiału zależy od światła lub światła używanego na scenie i sposobu reakcji. Na przykład dyfuzorColor rozkłada kolor na całej siatce, do której jest przymocowany. Dodaj następujący kod:
```
const boxMaterial = new BABYLON.StandardMaterial("material", scene);
boxMaterial.diffuseColor = BABYLON.Color3.Random();
box.material = boxMaterial;
```
Teraz, gdy moduł jest malowany losowym kolorem, dodajmy interakcję do:
- Zmienianie koloru po kliknięciu modułu
- Przenieś moduł po zmianie koloru
Aby dodać interakcje, powinniśmy używać akcji. Akcja jest uruchamiana w odpowiedzi na wyzwalacz zdarzenia. Na przykład gdy użytkownik kliknie moduł. Wszystko, co musimy zrobić, to utworzenie wystąpienia BABILONu. ActionManager i zarejestruj akcję dla określonego wyzwalacza. BABILON. Funkcja ExecuteCodeAction uruchomi 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();
    }));
```

Ostateczny 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 środowiska immersyjnego webXR

Teraz, gdy nasz moduł zmienia kolory, jesteśmy gotowi wypróbować środowisko immersyjne.

W tym kroku wprowadzimy ziemię. Kostka będzie wisić w powietrzu i zobaczymy podłogę na dole. Dodaj ziemię w następujący sposób:
```
const ground = BABYLON.MeshBuilder.CreateGround("ground", {width: 4, height: 4});
```
Tworzy to prostą podłogę 4x4-metrową.

Aby dodać obsługę protokołu WebXR, musimy wywołać metodę createDefaultXRExperienceAsync, która ma wynik Promise . Dodaj ten kod na końcu funkcji createScene zamiast sceny powrotnej;:

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

Ponieważ funkcja createScene zwraca teraz obietnicę zamiast sceny, musimy zmodyfikować sposób wywołania metody createScene i engine.runRenderLoop . Zastąp bieżące wywołania tych funkcji, które znajdują się tuż przed tagiem< /script>, za pomocą poniższego kodu:
```
createScene().then(sceneToRender => {
    engine.runRenderLoop(() => sceneToRender.render());
});
```

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

Powyższy kod generuje następujące dane wyjściowe w oknie przeglądarki:

Uruchamianie w symulatorze Windows Mixed Reality

Włącz symulator Windows Mixed Reality, jeśli nie zostało to zrobione w przeszłości.
Wybierz przycisk Immersywne VR w prawym dolnym rogu:
Ta akcja spowoduje uruchomienie okna symulatora Windows Mixed Reality, jak pokazano poniżej:
Użyj klawiszy W,A,S i D na klawiaturze, aby odpowiednio przejść do przodu, z powrotem w lewo i w prawo. Użyj symulowanej ręki, aby zastosować element docelowy modułu i naciśnij klawisz Enter na klawiaturze, aby wykonać akcję kliknięcia. Moduł zmieni kolor i przeniesie się do nowej pozycji.

Uwaga

Podczas określania wartości docelowej modułu upewnij się, że koniec promienia ręki (biały okrąg) przecina się z sześcianem, jak pokazano na powyższym obrazie. Dowiedz się więcej na temat punktów i zatwierdzania za pomocą 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 obsługujący statyczną stronę HTML w bezpiecznym kontekście (https:// lub za pośrednictwem przekazywania portów na hoście lokalnym) na komputerze deweloperskim. Na przykład korzystaj z pakietu npm jako prostego uproszczonego serwera internetowego, który obsługuje statyczne pliki HTML, sprawdź więcej usługi npm
Urządzenie pierwotnie dostarczane ze Sklepem Google Play i musi być uruchomione z systemem Android 7.0 lub nowszym
Najnowsza wersja przeglądarki Google Chrome na stacji roboczej deweloperów 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 usługę WebXR i może uruchamiać środowiska rzeczywistości wirtualnej i rzeczywistości rozszerzonej, jeśli masz odpowiedni sprzęt.

Włącz tryb dewelopera i debugowanie USB na urządzeniu z systemem Android. Zobacz, jak to zrobić dla twojej wersji systemu Android na oficjalnej stronie dokumentacji Konfigurowanie opcji dewelopera na urządzeniu
Następnie podłącz urządzenie z systemem Android do maszyny programistycznej lub laptopa za pośrednictwem kabla USB
Upewnij się, że serwer internetowy na maszynie programistycznej jest uruchomiony. Na przykład przejdź do folderu głównego zawierającego stronę hostingu internetowego (index.html) i wykonaj następujący kod (przy założeniu, że używasz pakietu npm):
```
serve
```
Otwórz przeglądarkę Google Chrome na maszynie deweloperów i wprowadź na pasku adresu następujący tekst:

chrome://inspect#devices
Upewnij się, że pole wyboru Odnajduj urządzenia USB jest włączone
Kliknij przycisk Przekazywanie portów i upewnij się, że włączono przekazywanie portów i zawiera wpis localhost:5000 , jak pokazano poniżej:
Na połączonym urządzeniu z systemem Android otwórz okno google Chrome i przejdź do http://localhost:5000 i powinien zostać wyświetlony moduł
Na komputerze deweloperskim w przeglądarce Chrome zobaczysz urządzenie i listę stron internetowych, które są obecnie otwarte:
Kliknij przycisk Sprawdź obok wpisu http://localhost:5000:
Debugowanie strony za pomocą narzędzia Chrome DevTools

Wnioski

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

Babylon.js ułatwia tworzenie immersyjnych środowisk przy użyciu języka JavaScript
Aby utworzyć sceny wirtualne, nie musisz pisać kodu niskiego poziomu ani uczyć się nowej technologii
Aplikacje Mixed Reality można tworzyć za pomocą przeglądarki obsługiwanej przez usługę WebXR bez konieczności kupowania zestawu słuchawkowego

Następne kroki

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

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

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 Babylon.js, zapoznaj się z serią samouczków kompilacji fortepianu, aby dowiedzieć się, jak zbudować fortepian w przestrzeni VR przy użyciu Babylon.js.