Samouczek: przygotowywanie sceny

Dowiedz się, jak przygotować scenę i dodać do niego podstawowe elementy 3D.

Ten samouczek zawiera informacje na temat wykonywania następujących czynności:

  • Tworzenie sceny
  • Dodawanie aparatu fotograficznego
  • Dodawanie światła
  • Dodawanie podstawowych elementów 3D

Zanim rozpoczniesz

W poprzednim kroku samouczka utworzono podstawową stronę internetową. Niech strona internetowa będzie otwarta do edycji.

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

Tworzenie sceny

Scena to miejsce, w którym będzie wyświetlana cała zawartość. Może być wiele scen i można przełączać się między scenami. Przeczytaj więcej na tematbabylon.js Scene.

  1. Dodaj tag script po elemencie html kanwy i dodaj następujący kod, aby utworzyć scenę wypełnioną czarnym kolorem:

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

    W powyższym kodzie musimy utworzyć wystąpienie aparatu renderowania babylon.js, który renderuje scenę i podłącza zdarzenia na kanwie. Aby uzyskać więcej informacji na temat silnika, zapoznaj się ze stroną dokumentacji babylon.engine

  2. Scena nie jest domyślnie renderowana. Pamiętaj, że może być wiele scen i możesz kontrolować, która scena jest wyświetlana. Aby wielokrotnie renderować scenę na każdej ramce, wykonaj następujący kod po wywołaniu funkcji createScene:

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

Dodawanie podstawowego elementu 3D

  1. Dodajmy nasz pierwszy kształt 3D. W świecie wirtualnym 3D kształty są zbudowane z siatek , wiele trójkątnych aspektów sprzężenia ze sobą, z których każdy aspekt składa się z trzech wierzchołków. Możesz użyć wstępnie zdefiniowanej siatki lub utworzyć własną siatkę niestandardową. W tym miejscu będziemy używać wstępnie zdefiniowanej siatki box mesh, czyli modułu. Aby utworzyć to pole, użyj aplikacji BABYLON. MeshBuilder.CreateBox. Parametry to nazwa i opcje (opcje różnią się w zależności od typu siatki). Dołącz następujący kod do funkcji createScene:

    const box = BABYLON.MeshBuilder.CreateBox("box", {});
    box.position.x = 0.5;
    box.position.y = 1;
    
  2. Otwórz stronę internetową w przeglądarce Microsoft Edge i sprawdź dane wyjściowe. W oknie przeglądarki zostanie pokazana pusta strona. Otwórz narzędzie DevTools przy użyciu klawiatury i wybierz pozycję F12 lub Control+Shift+I (Windows, Linux) lub Command+Option+I (macOS). Po otwarciu karty Konsola możesz zacząć szukać błędów. Zostanie wyświetlony komunikat o błędzie: "Nieprzechytny błąd: brak zdefiniowanej aparatu". Teraz musimy dodać kamerę do sceny.

Dodawanie aparatu fotograficznego

  1. Aby wyświetlić świat wirtualny i wchodzić z nim w interakcje, aparat musi być dołączony do kanwy. Dodajmy kamerę typu BABYLON. ArcRotateCamera, który można obracać wokół obiektu docelowego. Parametry wymagane do utworzenia wystąpienia aparatu to:

    1. name: nazwa aparatu fotograficznego
    2. alpha: położenie kątowe wzdłuż osi (w radianach)
    3. beta: położenie kątowe wzdłuż osi latitudinal (w radianach)
    4. radius: odległość od obiektu docelowego
    5. target: punkt, w którym aparat zawsze był skierowany w kierunku (zdefiniowany za pomocą współrzędnych x-y-z)
    6. scene(scena): scena, w której znajduje się aparat

    Funkcje Alfa, Beta, Radius i Target razem definiują położenie aparatu w przestrzeni, jak pokazano na poniższym diagramie:

    Camera Alpha Beta Radius

    Dodaj następujący kod do funkcji 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);
    
  2. Jeśli sprawdzisz dane wyjściowe w przeglądarce, zobaczysz czarną kanwę. Brakuje światła.

Dodawanie światła

  1. Istnieją cztery typy światła, które mogą być używane z różnymi właściwościami oświetlenia: punktowe, kierunkowe, punktowe i hemisferyczne. Dodajmy światło otoczenia HemisphericLightw następujący sposób:

    const light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(1, 1, 0));
    
  2. Końcowy kod strony internetowej będzie wyglądać następująco:

    <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. Sprawdź dane wyjściowe w przeglądarce. Powinien zostać wyświetlony sześcian i za pomocą myszy można obrócić kamerę wokół sześcianu i zobaczyć różne twarze sześcianu:

Podstawowa scena z sześcianem

Następne kroki