Esercitazione: Interagire con l'oggetto 3D

Articolo
07/12/2023

Informazioni su come creare oggetti e interazioni 3D per un'esperienza di Realtà mista usando Babylon.js. In questa sezione si inizierà con qualcosa di semplice, ad esempio disegnare i visi di un cubo quando si seleziona l'oggetto.

Questa esercitazione illustra gli argomenti seguenti:

Come aggiungere interazioni
Abilitare la modalità immersiva WebXR
Eseguire l'app in Windows Mixed Reality Simulatore
Eseguire ed eseguire il debug dell'app in Android Chrome

Prima di iniziare

Nel passaggio precedente dell'esercitazione è stata creata una pagina Web di base con una scena. Fare in modo che la pagina Web di hosting sia aperta per la modifica.

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

Aggiungere l'interazione

Prima di tutto, aggiornare il codice che crea il cubo, in modo che il cubo venga disegnato con un colore casuale. A tale scopo, si aggiungerà materiale al cubo. Il materiale ci consente di specificare il colore e le trame e può essere usato per coprire altri oggetti. La modalità di visualizzazione di un materiale dipende dalla luce o dalle luci usate nella scena e dalla modalità di reazione. Ad esempio, diffuseColor distribuisce il colore in tutta la mesh a cui è collegato. Aggiungere il codice seguente:
```
const boxMaterial = new BABYLON.StandardMaterial("material", scene);
boxMaterial.diffuseColor = BABYLON.Color3.Random();
box.material = boxMaterial;
```
Ora che il cubo viene disegnato con un colore casuale, aggiungere un'interazione a:
- Modificare il colore quando si fa clic sul cubo
- Spostare il cubo dopo la modifica del colore
Per aggiungere interazioni, è consigliabile usare le azioni. Viene avviata un'azione in risposta al trigger dell'evento. Ad esempio, quando l'utente fa clic sul cubo. Tutto quello che dobbiamo fare è creare un'istanza di BABYLON. ActionManager e registrare un'azione per un determinato trigger. LA BABILONIA. ExecuteCodeAction eseguirà la funzione JavaScript quando un utente fa clic sul cubo:
```
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();
    }));
```

Il codice finale della pagina Web sarà simile al seguente:

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

Abilitare l'esperienza immersiva di WebXR

Ora che il cubo cambia colori, è possibile provare l'esperienza immersiva.

In questo passaggio verrà presentato un terreno. Il cubo sarà appeso in aria e vedremo un pavimento in fondo. Aggiungere il terreno come segue:
```
const ground = BABYLON.MeshBuilder.CreateGround("ground", {width: 4, height: 4});
```
In questo modo viene creato un semplice pavimento da 4x4 metri.
Per aggiungere il supporto WebXR, è necessario chiamare createDefaultXRExperienceAsync, che ha un risultato Promise . Aggiungere questo codice alla fine della funzione createScene invece di restituire la scena;:
```
const xrPromise = scene.createDefaultXRExperienceAsync({
    floorMeshes: [ground]
});
return xrPromise.then((xrExperience) => {
    console.log("Done, WebXR is enabled.");
    return scene;
});
```
Poiché la funzione createScene restituisce ora una promessa anziché una scena, è necessario modificare la modalità di chiamata di createScene e engine.runRenderLoop . Sostituire le chiamate correnti di queste funzioni, che si trovano subito prima del <tag /script> , con il codice seguente:
```
createScene().then(sceneToRender => {
    engine.runRenderLoop(() => sceneToRender.render());
});
```

Il codice finale della pagina Web sarà simile al seguente:

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

Il codice precedente genera l'output seguente nella finestra del browser:

Esecuzione in un simulatore di Windows Mixed Reality

Abilitare il simulatore di Windows Mixed Reality se non è stato fatto in passato.
Selezionare il pulsante Immersive-VR nell'angolo in basso a destra:
Questa azione avvierà la finestra Windows Mixed Reality Simulatore come illustrato di seguito:
Usa i tasti W, A, S e D sulla tastiera per andare avanti, indietro a sinistra e a destra di conseguenza. Usare la mano simulata per impostare come destinazione il cubo e premere INVIO sulla tastiera per eseguire l'azione click. Il cubo modificherà il colore e passerà a una nuova posizione.

Nota

Quando si imposta come destinazione il cubo, assicurarsi che la fine del raggio della mano (cerchio bianco) si interseci con il cubo, come illustrato nell'immagine precedente. Altre informazioni su Point e commit con le mani.

Eseguire ed eseguire il debug nel dispositivo Android

Per abilitare il debug nel dispositivo Android, seguire questa procedura:

Prerequisiti

Un server Web che gestisce una pagina HTML statica nel contesto sicuro (https:// o tramite port forwarding in localhost) nel computer di sviluppo. Ad esempio, usare il pacchetto npm come semplice server Web leggero che gestisce file HTML statici, controllare più npm serve
Il dispositivo fornito originariamente con Google Play Store e deve eseguire Android 7.0 o versione successiva
La versione più recente di Google Chrome sia nella workstation di sviluppo che nel dispositivo
Per verificare che il dispositivo sia configurato correttamente per l'esecuzione di WebXR, passare a una pagina WebXR di esempio nel dispositivo. Verrà visualizzato il messaggio, ad esempio:

Il browser supporta WebXR e può eseguire esperienze di realtà virtuale e realtà aumentata se si dispone dell'hardware appropriato.

Abilitare la modalità sviluppatore e il debug USB in un dispositivo Android. Vedere come eseguire questa operazione per la versione di Android nella pagina della documentazione ufficiale Configurare le opzioni per sviluppatori di dispositivi
Connettere quindi il dispositivo Android al computer di sviluppo o al portatile tramite cavo USB
Assicurarsi che il server Web nel computer di sviluppo sia in esecuzione. Ad esempio, passare alla cartella radice contenente la pagina di hosting Web (index.html) ed eseguire il codice seguente (presupponendo che si usi il pacchetto npm):
```
serve
```
Aprire Google Chrome nel computer di sviluppo e immettere nella barra degli indirizzi il testo seguente:

chrome://inspect#devices
Assicurarsi che la casella di controllo Individua dispositivi USB sia abilitata
Fare clic sul pulsante Port forwarding (Inoltro porta) e verificare che port forwarding sia abilitato e contenga una voce localhost:5000 , come illustrato di seguito:
Nel dispositivo Android connesso aprire una finestra di Google Chrome e passare a http://localhost:5000 e dovrebbe essere visualizzato il cubo
Nel computer di sviluppo, in Chrome, vedrai il tuo dispositivo e un elenco di pagine Web attualmente aperte in questa finestra:
Fare clic sul pulsante Inspect (Ispeziona ) accanto a una voce http://localhost:5000:
Usare Chrome DevTools per eseguire il debug della pagina

Risultati

Di seguito sono riportate le considerazioni più importanti di questa esercitazione:

Babylon.js semplifica la creazione di esperienze immersive con JavaScript
Per creare scene virtuali non è necessario scrivere codice di basso livello o apprendere una nuova tecnologia
È possibile creare applicazioni Realtà mista con il browser supportato da WebXR senza dover acquistare un visore VR

Passaggi successivi

Congratulazioni! È stata completata la serie di esercitazioni Babylon.js e si è appreso come:

Configurare un ambiente di sviluppo
Creare una nuova pagina Web per visualizzare i risultati
L'API Babylon.js per creare e interagire con gli elementi 3D di base
Eseguire e testare l'applicazione in un simulatore di Windows Mixed Reality

Per altre informazioni su Realtà mista sviluppo JavaScript, vedere Panoramica dello sviluppo JavaScript.

Se stai cercando un'altra esercitazione di Babylon.js, scopri la serie di esercitazioni piano-building per imparare a creare un pianoforte nello spazio VR usando Babylon.js.

Condividi tramite