Kurz: Příprava scény

Článek
07/12/2023

Zjistěte, jak připravit scénu a přidat do ní některé základní 3D prvky.

V tomto kurzu získáte informace o těchto tématech:

Vytvoření scény
Přidání kamery
Přidat světlo
Přidání základních 3D prvků

Než začnete

V předchozím kroku kurzu byla vytvořena základní webová stránka. Nechte webovou stránku otevřít pro úpravy.

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

Vytvoření scény

Ve scéně se zobrazí veškerý obsah. Může existovat více scén a je možné mezi scénami přepínat. Přečtěte si další informace o Babylon.js Scene.

Přidejte značku script za element html plátna a přidejte následující kód, který vytvoří scénu vyplněnou černou barvou:

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

Ve výše uvedeném kódu musíme vytvořit instanci webového vykreslovacího modulu Babylon.js, který vykresluje scénu a zachytá události na plátně. Další informace o modulu najdete na stránce dokumentace babylon.engine.

Scéna se ve výchozím nastavení nevykreslí. Nezapomeňte, že může existovat více scén a vy určujete, která scéna se zobrazí. Pokud chcete scénu vykreslit opakovaně na každém snímku, spusťte po volání funkce createScene následující kód:
```
engine.runRenderLoop(function () {
    sceneToRender.render();
});
```

Přidání základního 3D prvku

Pojďme přidat náš první 3D obrazec. V 3D virtuálním světě jsou obrazce sestaveny ze sítí, mnoho trojúhelníkových omezujících vlastností spojených dohromady, přičemž každá omezující vlastnost je vyrobena ze tří vrcholů. Můžete použít předdefinovanou síť nebo vytvořit vlastní síť. V této části použijeme předdefinovanou síť, tj. datovou krychli. K vytvoření krabice použijte BABYLON. MeshBuilder.CreateBox. Parametry jsou název a možnosti (možnosti se liší podle typu sítě). K funkci createScene připojte následující kód:
```
const box = BABYLON.MeshBuilder.CreateBox("box", {});
box.position.x = 0.5;
box.position.y = 1;
```
Otevřete webovou stránku v prohlížeči Microsoft Edge a zkontrolujte výstup. V okně prohlížeče se zobrazí prázdná stránka. Otevřete DevTools pomocí klávesnice a vyberte F12 nebo Control+Shift+I (Windows, Linux) nebo Command+Option+I (macOS). Po otevření karty Konzola můžete začít hledat chyby. Zobrazí se chyba: "Nezachycená chyba: Není definována žádná kamera". Teď musíme do scény přidat kameru.

Přidání kamery

Aby bylo možné zobrazit virtuální svět a pracovat s ním, musí být kamera připojená k plátnu. Pojďme přidat kameru typu BABYLON. ArcRotateCamera, kterou lze otáčet kolem cíle. Parametry potřebné k vytvoření instance kamery jsou:
1. name: název kamery
2. alfa: úhlová pozice podél podélné osy (v radiánech)
3. beta: úhlová pozice podél latitudinální osy (v radiánech)
4. radius: vzdálenost od cíle
5. target: bod, ke kterému bude kamera vždy směřovat (definovaný souřadnicemi x-y-z)
6. scene( scéna): scéna, ve které je kamera
Alfa, beta, poloměr a cíl společně definují polohu kamery v prostoru, jak je znázorněno na následujícím diagramu:

Do funkce createScene přidejte následující kód:
```
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);
```
Pokud zkontrolujete výstup v prohlížeči, zobrazí se černé plátno. Chybí nám světlo.

Přidat světlo

Existují čtyři typy světel, které lze použít s celou řadou vlastností osvětlení: bodové, směrové, bodové a polokulové. Přidejte okolní světlo HemisphericLight následujícím způsobem:
```
const light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(1, 1, 0));
```

Konečný kód webové stránky bude vypadat takto:

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

Zkontrolujte výstup v prohlížeči. Měli byste vidět datovou krychli a pomocí myši můžete otáčet kameru kolem datové krychle a vidět různé tváře datové krychle:

Základní scéna s datovou krychlí

Další kroky

Další kurz: 3. Interakce s 3D objekty

Sdílet prostřednictvím