Kurz: Příprava scény

Naučte se připravit scénu a přidat k ní některé základní 3D prvky.

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

  • Vytvoření scény
  • Přidat kameru
  • Přidat světlo
  • Přidat základní 3D prvky

Než začnete

V předchozím kroku kurzu se vytvořila základní webová stránka. Webová stránka je otevřená 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

Scény je místo, kde se zobrazí veškerý obsah. Může existovat více scén a je možné přepínat mezi scénami. Přečtěte si další informace o babylon.js scéně.

  1. Přidejte značku Script za prvek jazyka HTML plátna a přidejte následující kód k vytvoření scény vyplněné č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>
    

    V kódu výše musíme vytvořit instanci babylon.js modul pro vykreslování webu, který vykreslí scény a zapojte události na plátně. Další informace o tomto modulu najdete na stránce dokumentace Babylon. Engine.

  2. Ve výchozím nastavení se scény nevykresluje. Pamatujte na to, že může být více scén a vy můžete určit, která scéna se zobrazí. Pro vykreslení scény opakovaně na každém snímku spusťte následující kód po volání funkce createScene :

    engine.runRenderLoop(function () {
        sceneToRender.render();
    });
    

Přidat základní 3D element

  1. Pojďme přidat první 3D tvar. Ve 3D virtuálních tvarech jsou vytvořeny z sítí, z nichž každá je spojena s mnoha trojúhelníky, přičemž každá omezující vlastnost provedla tři vrcholy. Můžete buď použít předdefinovanou síť, nebo vytvořit vlastní síť. Tady budeme používat předdefinovanou mřížku box, tj. datovou krychli. Chcete-li vytvořit pole, použijte Babylon. MeshBuilder. CreateBox. Parametry jsou název a možnosti (možnosti se liší v závislosti na typu sítě). Do createScenefunkce přidejte následující kód:

    const box = BABYLON.MeshBuilder.CreateBox("box", {});
    box.position.x = 0.5;
    box.position.y = 1;
    
  2. otevřete webovou stránku v prohlížeči Microsoft Edge a podívejte se na 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 konzoly můžete začít vyhledávat chyby. Zobrazí se chyba při nezachycené chybě: není definovaná kamera. Nyní musíme do scény přidat fotoaparát.

Přidat kameru

  1. Aby bylo možné zobrazit virtuální svět a pracovat s ním, musí být fotoaparát připojen k plátnu. Pojďme přidat kameru typu Babylon. ArcRotateCamera, která se dá otočit kolem cíle. Parametry potřebné k vytvoření instance kamery jsou:

    1. název: název kamery.
    2. alfa: úhlová pozice podél podélné osy (v radiánech)
    3. beta: Úhlová poloha podél osy latitudinal (v radiánech)
    4. poloměr: vzdálenost od cíle
    5. cíl: bod, který by měl fotoaparát vždycky směřovat k (definované souřadnicemi x-y-z)
    6. scéna: scény, 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:

    Poloměr kamery alpha beta

    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);
    
  2. Pokud zaškrtnete výstup v prohlížeči, zobrazí se černé plátno. Chybí světlo.

Přidat světlo

  1. Existují čtyři typy světel, které lze použít s rozsahem vlastností osvětlení: Point, směrovou, bodový a Hemispheric Light. Pojďme přidat Ambient Light HemisphericLightnásledujícím způsobem:

    const light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(1, 1, 0));
    
  2. 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>
    
  3. Podívejte se na výstup v prohlížeči. Měli byste vidět datovou krychli a použít myš. můžete ji otáčet kolem datové krychle a zobrazit různé plošky datové krychle:

Základní scéna s krychlí

Další kroky