Oktatóanyag: Jelenet előkészítése

Cikk
07/12/2023

Megtudhatja, hogyan készíthet elő egy jelenetet, és adhat hozzá néhány alapszintű 3D-s elemet.

Az oktatóanyag segítségével megtanulhatja a következőket:

Jelenet létrehozása
Kamera hozzáadása
Fény hozzáadása
Alapszintű 3D-elemek hozzáadása

Előkészületek

Az előző oktatóanyag lépésben létrehoztunk egy alapszintű weblapot. Nyissa meg a weblapot szerkesztésre.

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

Jelenet létrehozása

Egy jelenetben jelenik meg az összes tartalom. Több jelenet is lehet, és válthat a jelenetek között. További információ a Babylon.js Jelenetről.

Adja hozzá a szkriptcímkét a vászon html eleme után, és adja hozzá a következő kódot egy fekete színnel kitöltött jelenet létrehozásához:
```
<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>
```
A fenti kódban létre kell hoznunk egy Babylon.js webes renderelési motor egy példányát, amely egy jelenetet jelenít meg, és eseményeket csatol a vásznon. A motorról további információt a babylon.engine dokumentációs oldalán talál.
A jelenet alapértelmezés szerint nem jelenik meg. Ne feledje, hogy több jelenet is lehet, és ön szabályozhatja, hogy melyik jelenet jelenjen meg. A jelenet minden képkockán való ismételt megjelenítéséhez hajtsa végre a következő kódot a createScene függvény meghívása után:
```
engine.runRenderLoop(function () {
    sceneToRender.render();
});
```

Alapszintű 3D elem hozzáadása

Vegyük fel az első 3D alakzatot. A 3D virtuális világ alakzatai hálókból épülnek fel, sok háromszög alakú aspektus összekapcsolva, amelyek mindegyike három csúcspontból készült. Használhat előre definiált hálót, vagy létrehozhatja saját egyéni hálóját. Itt egy előre definiált dobozhálót fogunk használni, vagyis egy kockát. A doboz létrehozásához használja a BABYLON parancsot . MeshBuilder.CreateBox. A paraméterek a név és a beállítások (a lehetőségek a háló típusától függően eltérőek). Fűzze hozzá a következő kódot a createScene függvényhez:
```
const box = BABYLON.MeshBuilder.CreateBox("box", {});
box.position.x = 0.5;
box.position.y = 1;
```
Nyissa meg a weblapot a Microsoft Edge böngészőben, és ellenőrizze a kimenetet. A böngészőablakban egy üres oldal látható. Nyissa meg a DevToolst a billentyűzettel, és válassza az F12 vagy a Control+Shift+I (Windows, Linux) vagy a Command+Option+I (macOS) lehetőséget. A Konzol lap megnyitása után elkezdhet hibákat keresni. A következő hibaüzenet jelenik meg: "Nem merült fel hiba: Nincs megadva kamera". Most hozzá kell adnunk egy kamerát a jelenethez.

Kamera hozzáadása

Ahhoz, hogy megtekinthesse a virtuális világot, és interakcióba léphessen vele, kamerát kell csatlakoztatni a vászonhoz. Vegyük fel a BABYLON típusú kamerát . ArcRotateCamera, amely elforgatható a cél körül. A kamera egy példányának létrehozásához szükséges paraméterek a következők:
1. name: a kamera neve
2. alfa: szögletes pozíció a hossztengely mentén (radiánban)
3. béta: szögletes pozíció a latitudinális tengely mentén (radiánban)
4. radius: távolság a céltól
5. cél: az a pont, amellyel a kamera mindig szembe nézne (x-y-z koordináták határozzák meg)
6. jelenet: az a jelenet, amelyben a kamera van
Az alfa, a béta, a sugár és a cél együttesen határozza meg a kamera helyét a térben, ahogy az alábbi ábrán látható:

Adja hozzá a következő kódot a createScene függvényhez:
```
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);
```
Ha a böngészőben ellenőrzi a kimenetet, fekete vászon jelenik meg. Hiányzik a fény.

Fény hozzáadása

Négy fénytípus létezik, amelyek számos megvilágítási tulajdonsággal használhatók: Pont, Irány, Direkt és Félgömb fény. Vizsgáljuk meg a hemisphericLight környezeti fényt az alábbiak szerint:
```
const light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(1, 1, 0));
```

A weblap végső kódja a következőképpen fog kinézni:

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

Ellenőrizze a kimenetet a böngészőben. Látnia kell a kockát, és az egérrel elforgathatja a kamerát a kocka körül, és láthatja a kocka különböző arcát:

Alapszintű jelenet kockával

Következő lépések

Következő oktatóanyag: 3. 3D objektum kezelése