Zelfstudie: Een scène voorbereiden

Artikel
07/12/2023

Meer informatie over het voorbereiden van een scène en het toevoegen van enkele eenvoudige 3D-elementen.

In deze zelfstudie leert u het volgende:

Een scène maken
Een camera toevoegen
Licht toevoegen
Eenvoudige 3D-elementen toevoegen

Voordat u begint

In de vorige zelfstudiestap is een eenvoudige webpagina gemaakt. Laat de webpagina openen om deze te bewerken.

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

Een scène maken

In een scène wordt alle inhoud weergegeven. Er kunnen meerdere scènes zijn en het is mogelijk om tussen scènes te schakelen. Lees meer over Babylon.js Scene.

Voeg de scripttag toe na het html-element van het canvas en voeg de volgende code toe om een scène te maken die is gevuld met een zwarte kleur:
```
<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>
```
In de bovenstaande code moeten we een exemplaar maken van Babylon.js webrenderingsengine die een scène weergeeft en gebeurtenissen op het canvas haakt. Raadpleeg de documentatiepagina babylon.engine voor meer informatie over de engine
De scène wordt niet standaard weergegeven. Denk eraan dat er mogelijk meerdere scènes zijn en dat u bepaalt welke scène wordt weergegeven. Als u de scène herhaaldelijk op elk frame wilt weergeven, voert u de volgende code uit na het aanroepen van de functie createScene :
```
engine.runRenderLoop(function () {
    sceneToRender.render();
});
```

Eenvoudig 3D-element toevoegen

Laten we onze eerste 3D-shape toevoegen. In de 3D virtuele wereld worden shapes gebouwd van meshes, veel driehoekige facetten samengevoegd, elk facet gemaakt van drie hoekpunten. U kunt een vooraf gedefinieerde mesh gebruiken of uw eigen aangepaste mesh maken. Hier gebruiken we een vooraf gedefinieerde box mesh, d.w.w. een kubus. Gebruik BABYLON om de doos te maken . MeshBuilder.CreateBox. De parameters zijn naam en opties (opties verschillen afhankelijk van het type mesh). Voeg de volgende code toe aan de functie createScene:
```
const box = BABYLON.MeshBuilder.CreateBox("box", {});
box.position.x = 0.5;
box.position.y = 1;
```
Open de webpagina in de browser Microsoft Edge en controleer de uitvoer. In het browservenster wordt een lege pagina weergegeven. Open DevTools met behulp van het toetsenbord en selecteer F12 of Control+Shift+I (Windows, Linux) of Command+Option+I (macOS). Nadat u het tabblad Console hebt geopend, kunt u beginnen met het zoeken naar fouten. Er wordt een fout weergegeven: 'Uncaught Error: No camera defined'. Nu moeten we een camera toevoegen aan de scène.

Een camera toevoegen

Als u de virtuele wereld wilt bekijken en ermee wilt communiceren, moet er een camera aan het canvas worden bevestigd. Laten we de camera van het type BABYLON toevoegen. ArcRotateCamera, die rond een doel kan worden gedraaid. De parameters die nodig zijn om een exemplaar van de camera te maken, zijn:
1. name: naam van de camera
2. alfa: hoekpositie langs de lengteas (in radialen)
3. beta: hoekpositie langs de latitudinale as (in radialen)
4. radius: afstand tot het doel
5. doel: het punt waar de camera altijd naartoe gericht zou zijn (gedefinieerd door x-y-z-coördinaten)
6. scène: de scène waarin de camera zich bevindt
Alfa, bèta, radius en doel bepalen samen de positie van de camera in de ruimte, zoals wordt weergegeven in het onderstaande diagram:

Voeg de volgende code toe aan de functie 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);
```
Als u de uitvoer in de browser controleert, ziet u een zwart canvas. We missen het licht.

Licht toevoegen

Er zijn vier soorten lichten die kunnen worden gebruikt met een reeks lichteigenschappen: Point, Directional, Spot en Hemispheric Light. Laten we het omgevingslicht HemisphericLight als volgt toevoegen:
```
const light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(1, 1, 0));
```

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;

            return scene;
        };

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

Controleer de uitvoer in de browser. U ziet de kubus en met de muis kunt u de camera rond de kubus draaien en de verschillende gezichten van de kubus zien:

Basisscène met kubus

Volgende stappen

Volgende zelfstudie: 3. Interactie met 3D-object