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

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

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

  • Jelenet létrehozása
  • Kamera hozzáadása
  • Világítás hozzáadása
  • Alapszintű 3D-elemek hozzáadása

Előkészületek

Az előző oktatóanyagban létrehozott egy alapszintű weboldalt. 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

A jelenetben minden tartalom megjelenik. Több jelenet is lehet, és válthat a jelenet között. További információ a babylon.js Scene-ről.

  1. 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 hoznom egy webes renderelési babylon.js egy példányát, amely egy jelenet renderel, és eseményeket hoz létre a vásznon. A motorral kapcsolatos további információkért tekintse meg a dokumentációs oldalt.

  2. A jelenet alapértelmezés szerint nem jelenik meg. Ne feledje, hogy több jelenet is lehet, és Ön szabályozhatja, hogy melyik jelenet legyen megjelenítve. A jelenet ismételt megjelenítéséhez minden képkockán hajtsa végre a következő kódot a createScene függvény hívása után:

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

Alapszintű 3D elem hozzáadása

  1. Adjuk hozzá az első 3D alakzatot. A 3D-s virtuális világ alakzatai hálókból épülnek fel,sok három aktúd össze, és mindegyik három csúcspontból épül fel. Használhat előre meghatározott hálót, vagy létrehozhatja saját egyéni hálóját. Itt egy előre meghatározott dobozhálót, azaz kockát használunk. A mező létrehozásához használja a KÖVETKEZŐt: FOG. 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űzheti 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;
    
  2. Nyissa meg a weblapot a Microsoft Edge, és ellenőrizze a kimenetet. A böngészőablakban egy üres oldal jelenik meg. 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 elkezdheti keresni a hibákat. A következő hibaüzenet jelenik meg: "Nem észlelt hiba: Nincs megadva kamera". Most hozzáadunk egy kamerát a jelenethez.

Kamera hozzáadása

  1. A virtuális világ megtekintéséhez és a vele való interakcióhoz egy kamerát kell csatolni a vászonhoz. Adjuk hozzá a CAMERA típusú kamerát. ArcRotateCamera, amely a cél körül forgatható. A kamerapéldány létrehozásához szükséges paraméterek a következőek:

    1. name:a kamera neve
    2. alpha:angular position az angular tengely mentén (radiánban)
    3. beta:angular position a latitudinal tengely mentén (radiánban)
    4. radius:távolság a céltól
    5. target: az a pont, amely felé a kamera mindig szembesül (x-y-z koordináták határozzák meg)
    6. scene: a jelenet, amely a kamera képén van

    Az alfa, a bétaverzió, a sugár és a cél együtt határozzák meg a kamera helyét a térben, az alábbi ábrán látható módon:

    Camera Alpha bétaverzió radius

    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);
    
  2. Ha a böngészőben ellenőrzi a kimenetet, fekete vászon fog látni. Hiányzik a világítás.

Világítás hozzáadása

  1. A világításnak négy típusa van, amelyek számos megvilágítási tulajdonsággal használhatók: pont, irány, spot és féltekefény. Adjuk hozzá a környezeti világítást a HemisphericLighthoza következőképpen:

    const light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(1, 1, 0));
    
  2. A weblap végső kódja a következőképpen néz ki:

    <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. Ellenőrizze a kimenetet a böngészőben. Meg kell néznie a kockát, és az egérrel elforgathatja a kockát, és láthatja a kocka különböző arcát:

Alapszintű jelenet kockával

Következő lépések