BabylonJS - Podstawowe elementy
Babylon.js to popularna platforma ułatwiająca tworzenie gier 3D dla programistów. Posiada wbudowane funkcje do implementacji funkcjonalności 3D. Zbudujmy proste demo przy użyciu Babylon.js i poznajmy podstawowe funkcje wymagane na początek.
Najpierw stworzymy demo, które zawiera podstawowe elementy Babylon.js. Ponadto nauczymy się różnych funkcjonalności Babylon.js.
Przykładowe demo 1
W tej sekcji dowiemy się, jak stworzyć demo zawierające podstawowe elementy BabylonJS.
<!doctype html>
<html>
<head>
<meta charset = "utf-8">
<title> Babylon.JS : Demo2</title>
<script src = "babylon.js"></script>
<style>
canvas { width: 100%; height: 100%;}
</style>
</head>
<body>
<canvas id = "renderCanvas"></canvas>
<script type = "text/javascript">
var canvas = document.getElementById("renderCanvas");
var engine = new BABYLON.Engine(canvas, true);
var createScene = function() {
var scene = new BABYLON.Scene(engine);
scene.clearColor = new BABYLON.Color3(1, 0.8, 0.8);
var camera = new BABYLON.ArcRotateCamera("Camera", 1, 0.8, 10, new BABYLON.Vector3(0, 0, 0), scene);
scene.activeCamera.attachControl(canvas);
var light0 = new BABYLON.PointLight("Omni", new BABYLON.Vector3(0, 0, 10), scene);
var origin = BABYLON.Mesh.CreateSphere("origin", 10, 1.0, scene);
var torus = BABYLON.Mesh.CreateTorus("torus", 5, 1, 10, scene, false);
var box = BABYLON.Mesh.CreateBox("box", 3.0, scene);
box.position = new BABYLON.Vector3(-5, 0, 0);
var cylinder = BABYLON.Mesh.CreateCylinder("cylinder", 3, 3, 3, 6, 1, scene, false);
cylinder.position = new BABYLON.Vector3(5, 0, 0);
return scene;
};
var scene = createScene();
engine.runRenderLoop(function() {
scene.render();
});
</script>
</body>
</html>
Aby uruchomić BabylonJS, potrzebujemy nowoczesnych przeglądarek z obsługą WEBGL. Najnowsze przeglądarki - Internet Explorer 11+, Firefox 4+, Google Chrome 9+, Opera 15+ itd. Obsługują WEBGL, a wersje demonstracyjne można uruchamiać na tych samych platformach, aby zobaczyć wynik. Utwórz katalog do przechowywania plików babylonjs. Pobierz najnowszy plik BabylonJSscripts z witryny BabylonJS. Wszystkie linki do demonstracji w tym samouczku zostały przetestowane z babylonjs w wersji 3.3.
Krok 1
Utwórz prostą stronę html i dołącz plik Babylon.js.
Utwórz tag Canvas, który będzie używany do renderowania zawartości przez BabylonJS wewnątrz tagu body, jak pokazano poniżej.
Dodaj css do obszaru roboczego, aby zajmował całą szerokość i wysokość ekranu.
<!doctype html>
<html>
<head>
<meta charset = "utf-8">
<title>MDN Games: Babylon.js demo - shapes</title>
<script src = "babylon.js"></script>
<style>
canvas {width: 100%; height: 100%;}
</style>
</head>
<body>
<canvas id = "renderCanvas"></canvas>
</body>
</html>Krok 2
Zacznijmy teraz od BabylonJScode do renderowania zawartości na płótnie.
<!doctype html>
<html>
<head>
<meta charset = "utf-8">
<title>MDN Games: Babylon.js demo - shapes</title>
<script src = "babylon.js"></script>
<style>
canvas {width: 100%; height: 100%;}
</style>
</head>
<body>
<canvas id = "renderCanvas"></canvas>
<script type = "text/javascript">
var canvas = document.getElementById("renderCanvas");
var engine = new BABYLON.Engine(canvas, true);
</script>
</body>
</html>Teraz dodaj znacznik script do struktury html i zapisz odniesienie kanwy w zmiennej kanwie.
Aby rozpocząć pracę z Babylon.js, utwórz instancję silnika i przekaż odniesienie kanwy do renderowania na niej.
<script type = "text/javascript">
var canvas = document.getElementById("renderCanvas");
var engine = new BABYLON.Engine(canvas, true);
</script>Globalny obiekt BABYLON zawiera wszystkie funkcje Babylon.js dostępne w silniku.
Krok 3
W tym kroku najpierw utworzymy scenę.
Scena to miejsce, w którym zostanie wyświetlona cała zawartość. Stworzymy różne typy obiektów i dodamy to samo do sceny, aby była widoczna na ekranie. Aby utworzyć scenę, dodaj następujący kod do już utworzonej struktury html. Obecnie do utworzonego już kodu dołączymy jako kontynuację powyższej struktury html.
var createScene = function() {
var scene = new BABYLON.Scene(engine);
scene.clearColor = new BABYLON.Color3(1, 0.8, 0.8);
};
var scene = createScene();Ostateczny plik HTML będzie wyglądał następująco -
<!doctype html>
<html>
<head>
<meta charset = "utf-8">
<title>MDN Games: Babylon.js demo - shapes</title>
<script src = "babylon.js"></script>
<style>
canvas {width: 100%; height: 100%;}
</style>
</head>
<body>
<canvas id = "renderCanvas"></canvas>
<script type = "text/javascript">
var canvas = document.getElementById("renderCanvas");
var engine = new BABYLON.Engine(canvas, true);
var createScene = function() {
var scene = new BABYLON.Scene(engine);
scene.clearColor = new BABYLON.Color3(0, 1, 0);
return scene;
};
var scene = createScene();
</script>
</body>
</html>W powyższym przykładzie funkcja CreateScene jest zdefiniowana, a var scene = createScene () wywołuje tę funkcję.
Funkcja CreateScene ma w sobie utworzoną scenę, a następna linia dodaje kolor do sceny, co jest wykonywane za pomocą BABYLON.Color3 (1, 0,8, 0,8), a kolor tutaj jest różowy.
var scene = new BABYLON.Scene(engine);
scene.clearColor = new BABYLON.Color3(1, 0.8, 0.8);Uruchomienie powyższego linku demonstracyjnego w przeglądarce nie spowoduje teraz wyświetlenia niczego na ekranie przeglądarki. Do kodu należy dodać jeszcze jeden krok, który nazywa się engine.runRenderLoop, tak jak w kroku 4.
Krok 4
Aby scena była rzeczywiście widoczna na ekranie, musimy ją wyrenderować za pomocą wywołania engine.runRenderLoop. Zobaczmy teraz, jak to się robi.
Pętla renderowania
engine.runRenderLoop(function() {
scene.render();
});Funkcja Engine.runRenderLoop wywołuje scenę.render, która wyrenderuje scenę i uczyni ją widoczną dla użytkownika. Ostateczny plik .html będzie wyglądał następująco -
<!doctype html>
<html>
<head>
<meta charset = "utf-8">
<title>BabylonJs - Basic Element-Creating Scene</title>
<script src = "babylon.js"></script>
<style>
canvas {width: 100%; height: 100%;}
</style>
</head>
<body>
<canvas id = "renderCanvas"></canvas>
<script type = "text/javascript">
var canvas = document.getElementById("renderCanvas");
var engine = new BABYLON.Engine(canvas, true);
var createScene = function() {
var scene = new BABYLON.Scene(engine);
scene.clearColor = new BABYLON.Color3(1, 0.8, 0.8);
return scene;
};
var scene = createScene();
engine.runRenderLoop(function() {
scene.render();
});
</script>
</body>
</html>Zapisz powyższy plik jako basicscene.html i sprawdź wynik w przeglądarce. Wyświetlany ekran jest w kolorze różowym, jak pokazano poniżej -
Krok 5
Teraz, gdy mamy scenę, musimy dodać do niej kamerę.
Dodawanie aparatu i światła
Poniższy kod dodaje kamerę do sceny. Istnieje wiele typów kamer, których można używać w Babilonie.
ArcRotateCamerato kamera obracająca się wokół celu. Można nim sterować za pomocą myszy, kursora lub zdarzeń dotykowych. Wymagane parametry to nazwa, alfa, beta, promień, cel i scena. Omówmy szczegóły aparatu w kolejnej sekcji.
var camera = new BABYLON.ArcRotateCamera("Camera", 1, 0.8, 10, new BABYLON.Vector3(0, 0, 0), scene);Teraz musimy zrozumieć, jak dodać światło.
Światła są używane do tworzenia rozproszonego i zwierciadlanego koloru odbieranego przez każdy piksel. Istnieje wiele rodzajów świateł. Dowiemy się o różnych typach świateł w dziale światła.
Tutaj używam PointLight na scenie. PointLight jest emitowany we wszystkich kierunkach, podobnie jak słońce. Parametry to nazwa, pozycja i scena do wykorzystania.
Aby dodać światło, wykonaj następujący kod -
var light0 = new BABYLON.PointLight("Omni", new BABYLON.Vector3(0, 0, 10), scene);Krok 6
Zobaczmy teraz, jak dodawać kształty.
Dodawanie kształtów
Udostępnione powyżej demo ma dodane 4 kształty.
- Sphere
- Torus
- Box
- Cylinder
Aby dodać kulę, wykonaj następujący kod -
var origin = BABYLON.Mesh.CreateSphere("origin", 10, 1.0, scene);Po dodaniu sfery kod wygląda następująco -
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>MDN Games: Babylon.js demo - shapes</title>
<script src = "babylon.js"></script>
<style>
html,body,canvas { margin: 0; padding: 0; width: 100%; height: 100%; font-size: 0; }
</style>
</head>
<body>
<canvas id = "renderCanvas"></canvas>
<script type = "text/javascript">
var canvas = document.getElementById("renderCanvas");
var engine = new BABYLON.Engine(canvas, true);
var createScene = function() {
var scene = new BABYLON.Scene(engine);
scene.clearColor = new BABYLON.Color3(1, 0.8, 0.8);
var camera = new BABYLON.ArcRotateCamera("Camera", 1, 0.8, 10, new BABYLON.Vector3(0, 0, 0), scene);
var light0 = new BABYLON.PointLight("Omni", new BABYLON.Vector3(0, 0, 10), scene);
var origin = BABYLON.Mesh.CreateSphere("origin", 10, 1.0, scene);
scene.activeCamera.attachControl(canvas);
return scene;
};
var scene = createScene();
engine.runRenderLoop(function() {
scene.render();
});
</script>
</body>
</html>Wynik
Powyższy kod generuje następujące dane wyjściowe -
Dodajmy teraz inne kształty - Torus i Pudełko. Wykonaj następujący kod, aby dodać kształt Torusa.
var torus = BABYLON.Mesh.CreateTorus("torus", 5, 1, 10, scene, false);
var box = BABYLON.Mesh.CreateBox("box", 3.0, scene);
box.position = new BABYLON.Vector3(-5, 0, 0);Dodamy pozycję do pudełka. BABYLON.Vector3 (-5, 0, 0) przyjmuje kierunek x, y i z.
Po wykonaniu powyższy kod generuje następujące dane wyjściowe -
Dodajmy teraz ostateczny kształt pokazany na powyższym obrazku - cylinder.
var cylinder = BABYLON.Mesh.CreateCylinder("cylinder", 3, 3, 3, 6, 1, scene, false);
cylinder.position = new BABYLON.Vector3(5, 0, 0);Pozycja jest dodawana do cylindra, który jest w kierunku x 5. Ostateczny kod jest pokazany poniżej -
<!doctype html>
<html>
<head>
<meta charset = "utf-8">
<title> Babylon.JS : Demo2</title>
<script src = "babylon.js"></script>
<style>
canvas { width: 100%; height: 100%;}
</style>
</head>
<body>
<canvas id = "renderCanvas"></canvas>
<script type = "text/javascript">
var canvas = document.getElementById("renderCanvas");
var engine = new BABYLON.Engine(canvas, true);
var createScene = function() {
var scene = new BABYLON.Scene(engine);
scene.clearColor = new BABYLON.Color3(1, 0.8, 0.8);
var camera = new BABYLON.ArcRotateCamera("Camera", 1, 0.8, 10, new BABYLON.Vector3(0, 0, 0), scene);
scene.activeCamera.attachControl(canvas);
var light0 = new BABYLON.PointLight("Omni", new BABYLON.Vector3(0, 0, 10), scene);
var origin = BABYLON.Mesh.CreateSphere("origin", 10, 1.0, scene);
var torus = BABYLON.Mesh.CreateTorus("torus", 5, 1, 10, scene, false);
var box = BABYLON.Mesh.CreateBox("box", 3.0, scene);
box.position = new BABYLON.Vector3(-5, 0, 0);
var cylinder = BABYLON.Mesh.CreateCylinder("cylinder", 3, 3, 3, 6, 1, scene, false);
cylinder.position = new BABYLON.Vector3(5, 0, 0);
return scene;
};
var scene = createScene();
engine.runRenderLoop(function() {
scene.render();
});
</script>
</body>
</html>Wynik
Po wykonaniu powyższy kod wygeneruje następujące dane wyjściowe -
Kształty będą się przesuwać zgodnie z kierunkiem przesuwania kursora; to samo można zrobić, używając sterowania dołączeniem aparatu do sceny.
scene.activeCamera.attachControl(canvas);Omówmy teraz szczegółowo każdy kształt.
Oto podsumowanie wszystkich kształtów i składni -
| Sr.No | Kształt | Składnia |
|---|---|---|
| 1 | Pudełko | |
| 2 | Kula | |
| 3 | Samolot | |
| 4 | Dysk | |
| 5 | Cylinder | |
| 6 | Torus | |
| 7 | Węzeł | |
| 8 | Siatka liniowa | |
| 9 | Kreski | |
| 10 | Faborek | |
| 11 | Rura | |
| 12 | Ziemia | |
| 13 | Mapa terenu z wysokości | |
| 14 | Kafelkowa Ziemia | |
Element podstawowy - pozycja, obrót i skalowanie
W tej sekcji dowiemy się, jak pozycjonować, obracać lub skalować elementy, które do tej pory dodaliśmy.
Stworzyliśmy pudełko, kulę, cylinder, węzeł itp. Teraz zobaczymy, jak pozycjonować, skalować i obracać kształty.
| Sr.No. | Element i opis |
|---|---|
| 1 | Pozycja
Wraz ze zmianą pozycji siatka zostanie zmieniona z jednej pozycji na drugą. |
| 2 | Obrót
Podczas obracania siatka będzie obracana wokół siatki. |
| 3 | skalowanie
Skalowanie siatki można wykonać względem osi x, y lub z. |
Element podstawowy - rodzicielstwo
Dzięki Parenting utworzymy relację rodzic-dziecko między siatkami i zobaczymy, jak się zachowują. Zatem jakiekolwiek przemiany zastosujesz do rodzica, to samo zostanie zastosowane również do dziecka. Zrozummy teraz to samo z pokazem pokazanym poniżej.
Próbny
<!doctype html>
<html>
<head>
<meta charset = "utf-8">
<title>BabylonJs - Basic Element-Creating Scene</title>
<script src = "babylon.js"></script>
<style>
canvas {width: 100%; height: 100%;}
</style>
</head>
<body>
<canvas id = "renderCanvas"></canvas>
<script type = "text/javascript">
var canvas = document.getElementById("renderCanvas");
var engine = new BABYLON.Engine(canvas, true);
var createScene = function() {
var scene = new BABYLON.Scene(engine);
scene.clearColor = new BABYLON.Color3(0, 1, 0);
var camera = new BABYLON.ArcRotateCamera("Camera", 1, 0.8, 10, new BABYLON.Vector3(0, 0, 0), scene);
scene.activeCamera.attachControl(canvas);
var light = new BABYLON.PointLight("Omni", new BABYLON.Vector3(0, 100, 100), scene);
var boxa = BABYLON.Mesh.CreateBox("BoxA", 1.0, scene);
boxa.position = new BABYLON.Vector3(0,0.5,0);
var boxb = BABYLON.Mesh.CreateBox("BoxB", 1.0, scene);
boxb.position = new BABYLON.Vector3(3,0.5,0);
boxb.scaling = new BABYLON.Vector3(2,1,2);
var boxc = BABYLON.Mesh.CreateBox("BoxC", 1.0, scene);
boxc.parent = boxb;
boxc.position.z = -3;
var ground = BABYLON.Mesh.CreateGround("ground1", 10, 6, 2, scene);
ground.position = new BABYLON.Vector3(0,0,0);
return scene;
};
var scene = createScene();
engine.runRenderLoop(function() {
scene.render();
});
</script>
</body>
</html>Wynik
Wyjaśnienie
W powyższej siatce stworzyliśmy 3 pudełka. W wersji demonstracyjnej skalowanie boxb jest stosowane i jest przypisywane jako rodzic boxc, który również skaluje się, ponieważ jego nadrzędny boxb i to samo jest skalowane. Możesz pobawić się demonstracją, aby zobaczyć, jak działa łącze rodzic-dziecko.
Aby utworzyć siatkę, musisz użyć rodzica innej siatki -
child.parent = parentmesh;
Element podstawowy - środowisko
Omówmy teraz środowisko sceny w tej sekcji. Porozmawiamy oscene background color, ambientcolor, skyboxes, fog modeitp. na scenie.
Widzieliśmy scene background color is demos które do tej pory stworzyliśmy.
Kolor tła sceny
Zobaczmy teraz, jak działa kolor tła sceny.
Składnia
Poniżej przedstawiono składnię koloru tła sceny -
scene.clearColor = new BABYLON.Color3(0.5, 0.8, 0.5);
or
scene.clearColor = BABYLON.Color3.Blue();Powyższa właściwość zmieni kolor tła sceny.
Scena Kolor otoczenia
Zobaczmy teraz, jak działa kolor otoczenia sceny.
Składnia
Poniżej przedstawiono składnię koloru otoczenia sceny -
scene.ambientColor = new BABYLON.Color3(0.3, 0.3, 0.3);AmbientColor jest używany wraz z StandardMaterialkolor i tekstura otoczenia. Jeśli nie ma ambientColor dla sceny, plikStandardMaterial.ambientColor i StandardMaterial.ambientTexturenie ma żadnego efektu. StandardMaterial ambientColor / ambientTexture stanie się aktywny po zastosowaniu ambientColor dla sceny. Domyślnie podana jest scenascene.ambientColor i ustaw na Color3 (0, 0, 0), co oznacza brak ambientColor.
Tryb Scene Fog
Teraz zrozumiemy, jak działa tryb Scene Fog.
Składnia
Poniżej znajduje się składnia trybu Scene Fog.
scene.fogMode = BABYLON.Scene.FOGMODE_EXP;Poniższa lista dostępnych trybów mgły -
BABYLON.Scene.FOGMODE_NONE - domyślny, mgła jest wyłączona.
BABYLON.Scene.FOGMODE_EXP - gęstość mgły jest funkcją wykładniczą.
BABYLON.Scene.FOGMODE_EXP2 - tak samo jak powyżej, ale szybciej.
BABYLON.Scene.FOGMODE_LINEAR - gęstość mgły jest funkcją liniową.
Jeśli zdefiniowano tryb mgły EXP lub EXP2, możesz zdefiniować na nim gęstość w następujący sposób -
scene.fogDensity = 0.01;Jeśli tryb mgły jest LINIOWY, możesz zdefiniować, gdzie zaczyna się i kończy mgła w następujący sposób -
scene.fogStart = 20.0;
scene.fogEnd = 60.0;Aby nadać kolor mgle, wykonaj następujący kod -
scene.fogColor = new BABYLON.Color3(0.9, 0.9, 0.85);Skybox
Skybox to sposób na tworzenie tła w grach, dzięki któremu scena wygląda realistycznie. Jest to raczej owijka wokół ekranu, która pokrywa teksturę używaną do materiału. Wybierz odpowiednio obrazy, aby wyglądały realistycznie w przypadku sceny, którą chcesz utworzyć. Aby stworzyć skybox, musisz stworzyć pudełko i nałożyć na niego materiał. Szczegółowo omówimy różne materiały w następnym rozdziale.
Teraz zobaczymy, jak stworzyć skybox przy użyciu pudełka i materiału.
var skybox = BABYLON.Mesh.CreateBox("skyBox", 100.0, scene);Stworzymy pudełko o rozmiarze 100 tak, aby obejmowało całą scenę. Zaczniemy od podania materiału do pudełka, co następuje w następujący sposób -
var skyboxMaterial = new BABYLON.StandardMaterial("skyBox", scene);Do tego materiału przypiszemy właściwości.
skyboxMaterial.reflectionTexture = new BABYLON.CubeTexture("images/cubetexture/skybox", scene);Musimy użyć tekstury odbicia, która jest zasadniczo używana do tworzenia materiału podobnego do lustra. Właściwość tekstury odbicia używa CubeTexture, która przyjmuje obraz jako dane wejściowe. Ponieważ kostka ma 6 ścian, obraz wymagany dla skyboksa musi mieć 6, czyli wewnętrznie musi być przechowywany jako skybox_nx, skybox_ny, skybox_nz, skybox_px, skybox_py, skybox_pz. Obrazy użyte do skyboksa są wklejone poniżej; są ścianami sześcianu ze wszystkich sześciu stron. Zastosowanie tekstury do kształtu zapewnia szczegóły użytego obrazu i sprawia, że scena wygląda realistycznie. Skorzystaliśmy z trybu współrzędnych jako SKYBOX_MODE, jak pokazano poniżej -
skyboxMaterial.reflectionTexture.coordinatesMode = BABYLON.Texture.SKYBOX_MODE;Istnieją inne właściwości materiałów, takie jak backfaceCulling, diffuseColor, specularColor, disableLighting itp. Właściwości są szczegółowo wyjaśnione w sekcji dotyczącej materiałów.
W wersji demonstracyjnej pokażemy scenę środowiskową utworzoną za pomocą skyboxa, kulę obracającą się w scenie i poruszającą się po niej płaszczyznę. Na scenie pojawia się mgła, co zauważysz obracając.
Demo pokazujące scenę środowiskową
<!doctype html>
<html>
<head>
<meta charset = "utf-8">
<title> Babylon.JS : Demo</title>
<script src = "babylon.js"></script>
<style>
canvas { width: 100%; height: 100%;}
</style>
</head>
<body>
<canvas id = "renderCanvas"></canvas>
<script type = "text/javascript">
var canvas = document.getElementById("renderCanvas");
var engine = new BABYLON.Engine(canvas, true);
var createScene = function() {
var scene = new BABYLON.Scene(engine);
var light = new BABYLON.PointLight("Omni",
new BABYLON.Vector3(10, 50, 50), scene);
var camera = new BABYLON.ArcRotateCamera("Camera", 0.4, 1.2, 20, new BABYLON.Vector3(-10, 0, 0), scene);
camera.attachControl(canvas, true);
var material1 = new BABYLON.StandardMaterial("mat1", scene);
material1.diffuseTexture = new BABYLON.Texture("images/tsphere.jpg", scene);
var sphere = BABYLON.Mesh.CreateSphere("red", 32, 2, scene);
sphere.setPivotMatrix(BABYLON.Matrix.Translation(2, 0, 0));
sphere.material = material1;
// Fog
scene.fogMode = BABYLON.Scene.FOGMODE_EXP;
scene.fogColor = new BABYLON.Color3(0.9, 0.9, 0.85);
scene.fogDensity = 0.01;
//skybox
var skybox = BABYLON.Mesh.CreateBox("skyBox", 100.0, scene);
var skyboxMaterial = new BABYLON.StandardMaterial("skyBox", scene);
skyboxMaterial.backFaceCulling = false;
skyboxMaterial.reflectionTexture = new BABYLON.CubeTexture("images/cubetexture/skybox", scene);
skyboxMaterial.reflectionTexture.coordinatesMode = BABYLON.Texture.SKYBOX_MODE;
skyboxMaterial.diffuseColor = new BABYLON.Color3(0, 0, 0);
skyboxMaterial.specularColor = new BABYLON.Color3(0, 0, 0);
skyboxMaterial.disableLighting = true;
skybox.material = skyboxMaterial;
var spriteManagerPlayer = new BABYLON.SpriteManager("playerManager", "images/plane.png", 8, 1000, scene);
var plane = new BABYLON.Sprite("plane", spriteManagerPlayer);
plane.position.x = -2;
plane.position.y = 2;
plane.position.z = 0;
var alpha = 0;
var x = 2;
var y = 0;
scene.registerBeforeRender(function () {
scene.fogDensity = Math.cos(alpha) / 10;
alpha += 0.02;
sphere.rotation.y += 0.01;
y += 0.05;
if (x > 50) {
x = -2;
}
plane.position.x = -x;
x += 0.02;
});
return scene;
};
var scene = createScene();
engine.runRenderLoop(function() {
scene.render();
});
</script>
</body>
</html>Wynik
Wyjaśnienie
W powyższym przykładzie użyliśmy następującego kodu dla mgły -
scene.fogMode = BABYLON.Scene.FOGMODE_EXP;
scene.fogColor = new BABYLON.Color3(0.9, 0.9, 0.85);
scene.fogDensity = 0.01;scene.fogMode = BABYLON.Scene.FOGMODE_EXP - Tutaj gęstość mgły jest funkcją wykładniczą.
scene.registerBeforeRender = Dzięki temu gęstość mgły zmienia się w następujący sposób -
var alpha = 0;
scene.registerBeforeRender(function () {
scene.fogDensity = Math.cos(alpha) / 10;
alpha += 0.02;
});Wartość alfa zwiększa się o 0,02 w trakcie pętli, jak w powyższej funkcji.
Tutaj dodaliśmy obraz sprite samolotu i zmieniliśmy jego pozycję za pomocą scene.registerBeforeRender działają w następujący sposób -
var alpha = 0;
var x = 2;
var y = 0;
scene.registerBeforeRender(function () {
scene.fogDensity = Math.cos(alpha) / 10;
alpha += 0.02;
sphere.rotation.y += 0.01;
y += 0.05;
if (x > 50) {
x = -2;
}
plane.position.x = -x;
x += 0.02;
});
return scene;
};sZmienimy oś x samolotu i zresetujemy ją, gdy osiągnie więcej niż 50.
Kula jest również obracana wzdłuż osi y. Jest to pokazane na powyższym przykładzie. Wartość zmienia się za pomocą funkcji sphere.rotation.y.
Tekstura użyta do sfery to - images/tshphere.jpg. Obrazy są przechowywane lokalnie w folderach images / folder, a także wklejane poniżej w celach informacyjnych. Możesz pobrać dowolny wybrany obraz i użyć go w linku demonstracyjnym.
Potrzebujemy sześciu obrazów do sześcianu. Obrazy są przechowywane lokalnie w folderze images / cubetexture /. Możesz pobrać dowolny wybrany obraz, ale kiedy go zapiszesz, zapisz go jako nameoftheimage_nx, nameoftheimage_ny, nameoftheimage_nz, nameoftheimage_px, nameoftheimage_py, nameoftheimage_pz. Zwróć uwagę, że wybrane obrazy powinny być ułożone w sekwencji, aby tło wyglądało realistycznie, jak to pokazane w skyboxie.
Obrazy użyte do wykonania skyboksa są następujące - images/cubetexture/skybox
skybox_nx
skybox_ny
skybox_nz
skybox_px
skybox_py
skybox_pz
