Esercitazione: Preparare una scena

Articolo
07/12/2023

Informazioni su come preparare una scena e aggiungervi alcuni elementi 3D di base.

In questa esercitazione si apprenderà come:

Creare una scena
Aggiungere una fotocamera
Aggiungere luce
Aggiungere elementi 3D di base

Prima di iniziare

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

<html>
    <head>
        <title>Babylon.js sample code</title>
        <script src="https://cdn.babylonjs.com/babylon.js"></script>
        <style>
            body,#renderCanvas { width: 100%; height: 100%;}
        </style>
    </head>
<body>
    <canvas id="renderCanvas"></canvas>
</body>
</html>

Creare una scena

Una scena è la posizione in cui verrà visualizzato tutto il contenuto. Potrebbero esserci più scene ed è possibile passare da una scena all'altra. Altre informazioni su Babylon.js Scena.

Aggiungere il tag script dopo l'elemento html canvas e aggiungere il codice seguente per creare una scena riempita di colore nero:
```
<script type="text/javascript">
    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;
        return scene;
    }

    const sceneToRender = createScene();
</script>
```
Nel codice precedente è necessario creare un'istanza di Babylon.js motore di rendering Web che esegue il rendering di una scena e associa gli eventi nell'area di disegno. Per altre informazioni sul motore, vedere la pagina della documentazione babylon.engine
Il rendering della scena non viene eseguito per impostazione predefinita. Tenere presente che potrebbero esserci più scene e controllare la scena visualizzata. Per eseguire ripetutamente il rendering della scena in ogni fotogramma, eseguire il codice seguente dopo la chiamata alla funzione createScene :
```
engine.runRenderLoop(function () {
    sceneToRender.render();
});
```

Aggiungere l'elemento 3D di base

Aggiungiamo la prima forma 3D. Nelle forme del mondo virtuale 3D vengono create da mesh, un sacco di facet triangolari uniti, ogni facet creato da tre vertici. È possibile usare una mesh predefinita o creare una mesh personalizzata. In questo caso verrà usata una mesh di scatola predefinita, ad esempio un cubo. Per creare la casella, utilizzare BABYLON. MeshBuilder.CreateBox. I parametri sono name e options (le opzioni sono diverse in base al tipo di mesh). Aggiungere il codice seguente alla funzione createScene:
```
const box = BABYLON.MeshBuilder.CreateBox("box", {});
box.position.x = 0.5;
box.position.y = 1;
```
Aprire la pagina Web nel browser Microsoft Edge e controllare l'output. La finestra del browser mostra una pagina vuota. Aprire DevTools usando la tastiera e selezionare F12 o CTRL+MAIUSC+I (Windows, Linux) o Comando+Opzione+I (macOS). Dopo aver aperto la scheda Console , è possibile iniziare a cercare errori. Verrà visualizzato un errore: "Errore non verificato: nessuna fotocamera definita". Ora dobbiamo aggiungere una fotocamera alla scena.

Aggiungere una fotocamera

Per visualizzare il mondo virtuale e interagire con esso, è necessario collegare una fotocamera all'area di disegno. Aggiungere la fotocamera di tipo BABYLON. ArcRotateCamera, che può essere ruotato intorno a una destinazione. I parametri necessari per creare un'istanza della fotocamera sono:
1. name: nome della fotocamera
2. alfa: posizione angolare lungo l'asse verticale (in radianti)
3. beta: posizione angolare lungo l'asse dellatitudine (in radianti)
4. radius: distanza dalla destinazione
5. target: il punto verso cui la fotocamera si troverebbe sempre (definita dalle coordinate x-y-z)
6. scena: la scena in cui si trova la fotocamera
Alfa, beta, raggio e destinazione definiscono insieme la posizione della fotocamera nello spazio, come illustrato nel diagramma seguente:

Aggiungere il codice seguente alla funzione createScene :
```
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);
```
Se si controlla l'output nel browser, verrà visualizzata un'area di disegno nera. Manca la luce.

Aggiungere luce

Esistono quattro tipi di luci che possono essere usate con una gamma di proprietà di illuminazione: Point, Directional, Spot e Hemispheric Light. Aggiungere la luce ambientale HemisphericLight, come indicato di seguito:
```
const light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(1, 1, 0));
```

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;

            return scene;
        };

        const sceneToRender = createScene();
        engine.runRenderLoop(function(){
            sceneToRender.render();
        });
    </script>
</body>
</html>

Controllare l'output nel browser. Dovrebbe essere visualizzato il cubo e usando il mouse è possibile ruotare la fotocamera intorno al cubo e visualizzare i diversi visi del cubo:

Scena di base con cubo

Passaggi successivi

Esercitazione successiva: 3. Interagire con l'oggetto 3D

Share via