BabylonJS - Temel Öğeler

Babylon.js, geliştiriciler için 3D oyunlar oluşturmaya yardımcı olan popüler bir çerçevedir. 3B işlevleri uygulamak için yerleşik işlevlere sahiptir. Babylon.js kullanarak basit bir demo oluşturalım ve başlamak için gereken temel işlevleri anlayalım.

Önce Babylon.js'nin temel öğelerini içeren bir demo oluşturacağız. Ek olarak, Babylon.js'nin çeşitli işlevlerini de öğreneceğiz.

Örnek Demo 1

Bu bölümde, BabylonJS'nin temel unsurlarını içeren bir demo oluşturmayı öğreneceğiz.

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

BabylonJS'i çalıştırmak için WEBGL destekli modern tarayıcılara ihtiyacımız var. En son tarayıcılar -Internet Explorer 11+, Firefox 4+, Google Chrome 9+, Opera 15+, vb. WEBGL desteğine sahiptir ve çıktıyı görmek için demolar aynı platformlarda çalıştırılabilir. Babylonjs dosyalarını saklamak için bir dizin oluşturun. BabylonJS sitesinden en son BabylonJSscripts dosyasını alın. Bu eğitimdeki tüm demo bağlantıları babylonjs sürüm 3.3 ile test edilmiştir.

Aşama 1

  • Basit bir html sayfası oluşturun ve Babylon.js dosyasını dahil edin.

  • Aşağıda gösterildiği gibi gövde etiketinin içinde BabylonJSinside tarafından içerikleri oluşturmak için kullanılan bir tuval etiketi oluşturun.

  • Ekranın tüm genişliğini ve yüksekliğini kaplamak için tuvale css ekleyin.

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

Adım 2

Şimdi içeriği tuval üzerinde görüntülemek için BabylonJScode ile başlayalım.

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

Şimdi, komut dosyası etiketini html yapısına ekleyin ve tuval referansını değişken tuvalde saklayın.

Babylon.js ile başlamak için bir motor örneği oluşturun ve üzerinde oluşturmak üzere tuval referansını iletin.

<script type = "text/javascript">
   var canvas = document.getElementById("renderCanvas");
   var engine = new BABYLON.Engine(canvas, true);
</script>

BABYLON global nesnesi, motorda bulunan tüm Babylon.js işlevlerini içerir.

Aşama 3

Bu adımda önce bir sahne oluşturacağız.

Tüm içeriğin görüntüleneceği bir sahne. Farklı türde nesneler yaratacağız ve ekranda görünmesi için aynı şeyi sahneye ekleyeceğiz. Sahne oluşturmak için, önceden oluşturulmuş html yapısına aşağıdaki kodu ekleyin. Şu anda, önceden oluşturulmuş koda yukarıdaki html yapısının devamı olarak ekleyeceğiz.

var createScene  = function() {
   var scene = new BABYLON.Scene(engine);
   scene.clearColor = new BABYLON.Color3(1, 0.8, 0.8);
};
var scene = createScene();

Son html dosyası aşağıdaki gibi görünecektir -

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

Yukarıdaki örnekte, CreateScene işlevi tanımlanmıştır ve var scene = createScene () işlevi işlevi çağırmaktadır.

CreateScene işlevi, içinde oluşturulan sahneye sahiptir ve sonraki satır, sahneye BABYLON.Color3 (1, 0.8, 0.8) kullanılarak yapılan ve buradaki renk pembedir.

var scene = new BABYLON.Scene(engine);
scene.clearColor = new BABYLON.Color3(1, 0.8, 0.8);

Tarayıcıda yukarıdaki demo bağlantısının yürütülmesi şu anda tarayıcı ekranında hiçbir şey göstermeyecektir. 4. adımda olduğu gibi engine.runRenderLoop olarak adlandırılan koda eklenecek bir adım daha vardır.

4. adım

Sahneyi ekranda gerçekten görünür kılmak için, engine.runRenderLoop çağrısını kullanarak onu oluşturmamız gerekir. Şimdi bunun nasıl yapıldığını görelim.

Oluşturma Döngüsü

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

Engine.runRenderLoop işlevi, sahneyi işleyecek ve kullanıcıya görünür kılacak scene.render'ı çağırır. Son .html aşağıdaki gibi görünecektir -

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

Yukarıdaki dosyayı basicscene.html olarak kaydedin ve çıktıyı tarayıcıda kontrol edin. Gösterilen ekran aşağıda gösterildiği gibi pembe renktedir -

Adım 5

Artık sahneye sahibiz, ona kamera eklemeliyiz.

Kamera ve Işık Ekleme

Aşağıda verilen kod, sahneye kamera ekler. Babylon'da kullanılabilen birçok kamera türü vardır.

ArcRotateCamerahedefin etrafında dönen bir kameradır. Fare, imleç veya dokunma olayları ile kontrol edilebilir. Gerekli parametreler ad, alfa, beta, yarıçap, hedef ve sahnedir. Sonraki bölümde kameranın ayrıntılarını tartışalım.

var camera = new BABYLON.ArcRotateCamera("Camera", 1, 0.8, 10, new BABYLON.Vector3(0, 0, 0), scene);

Şimdi, ışığın nasıl ekleneceğini anlamamız gerekiyor.

Işıklar, her piksel tarafından alınan dağınık ve aynasal rengi üretmek için kullanılır. Birçok ışık türü vardır. Işıklar bölümünde farklı ışık türlerini öğreneceğiz.

Burada, sahnede PointLight kullanıyorum. PointLight, Güneş gibi her yöne yayılır. Parametreler isim, konum ve kullanılacak sahnedir.

Işık eklemek için aşağıdaki kodu yürütün -

var light0 = new BABYLON.PointLight("Omni", new BABYLON.Vector3(0, 0, 10), scene);

6. Adım

Şimdi nasıl şekil ekleneceğini görelim.

Şekillerin eklenmesi

Yukarıda paylaşılan demoya eklenen 4 şekil var.

  • Sphere
  • Torus
  • Box
  • Cylinder

Küre eklemek için aşağıdaki kodu yürütün -

var origin = BABYLON.Mesh.CreateSphere("origin", 10, 1.0, scene);

Küre eklendikten sonra, kod aşağıdaki gibi görünür -

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

Çıktı

Yukarıdaki kod aşağıdaki çıktıyı üretir -

Şimdi diğer şekilleri ekleyelim - Torus ve Kutu. Torus şeklini eklemek için aşağıdaki kodu yürütün.

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

Kutuya bir pozisyon ekleyeceğiz. BABYLON.Vector3 (-5, 0, 0) x, y ve z yönünü alır.

Yürütme üzerine, yukarıdaki kod aşağıdaki çıktıyı üretir -

Şimdi yukarıdaki ekran görüntüsünde gösterilen son şekli ekleyelim - silindiri.

var cylinder = BABYLON.Mesh.CreateCylinder("cylinder", 3, 3, 3, 6, 1, scene, false);
cylinder.position = new BABYLON.Vector3(5, 0, 0);

Konum, x yönü 5 olan silindire eklenir. Nihai kod aşağıda gösterildiği gibidir -

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

Çıktı

Yürütme üzerine, yukarıdaki kod aşağıdaki çıktıyı üretecektir -

Şekiller, imleci hareket ettirdiğiniz yöne göre hareket edecektir; aynı şey kameranın sahneye bağlanma kontrolü kullanılarak yapılır.

scene.activeCamera.attachControl(canvas);

Şimdi her şekli ayrıntılı olarak tartışalım.

İşte tüm şekillerin ve sözdiziminin özeti -

Sr.No Şekil Sözdizimi
1 Kutu 
var box = BABYLON.Mesh.CreateBox(
   "box", 6.0, scene, false, BABYLON.Mesh.DEFAULTSIDE);
2 Küre 
var sphere = BABYLON.Mesh.CreateSphere(
   "sphere", 10.0, 10.0, scene, 
   false, BABYLON.Mesh.DEFAULTSIDE);
3 uçak 
var plane = BABYLON.Mesh.CreatePlane(
   "plane", 10.0, scene, false, BABYLON.Mesh.DEFAULTSIDE);
4 Disk 
var disc = BABYLON.Mesh.CreateDisc(
   "disc", 5, 30, scene, false, BABYLON.Mesh.DEFAULTSIDE);
5 Silindir 
var cylinder = BABYLON.Mesh.CreateCylinder(
   "cylinder", 3, 3, 3, 6, 1, scene, false, 
   BABYLON.Mesh.DEFAULTSIDE);
6 Torus 
var torus = BABYLON.Mesh.CreateTorus(
   "torus", 5, 1, 10, scene, false, 
   BABYLON.Mesh.DEFAULTSIDE);
7 Düğüm 
var knot = BABYLON.Mesh.CreateTorusKnot(
   "knot", 2, 0.5, 128, 64, 2, 3, scene, false, 
   BABYLON.Mesh.DEFAULTSIDE);
8 Çizgi Mesh 
var lines = BABYLON.Mesh.CreateLines("lines", [
   new BABYLON.Vector3(-10, 0, 0),
   new BABYLON.Vector3(10, 0, 0),
   new BABYLON.Vector3(0, 0, -10),
   new BABYLON.Vector3(0, 0, 10)
], scene);
9 Kısa çizgiler 
var dashedlines = BABYLON.Mesh.CreateDashedLines(
   "dashedLines", [v1, v2, ... vn], 
   dashSize, gapSize, dashNb, scene);
10 Kurdele 
var ribbon = BABYLON.Mesh.CreateRibbon(
   "ribbon", 
   [path1, path2, ..., pathn], 
   false, false, 0, 
   scene, false, 
   BABYLON.Mesh.DEFAULTSIDE);
11 Tüp 
var tube = BABYLON.Mesh.CreateTube(
   "tube", 
   [V1, V2, ..., Vn], 
   radius, tesselation, 
   radiusFunction, 
   cap, scene, false, 
   BABYLON.Mesh.DEFAULTSIDE);
12 Zemin 
var ground = BABYLON.Mesh.CreateGround(
   "ground", 6, 6, 2, scene);
13 Yükseklik Haritasından Zemin 
var ground = BABYLON.Mesh.CreateGroundFromHeightMap(
   "ground", "heightmap.jpg", 200, 200, 250, 0, 10, 
   scene, false, successCallback);
14 Kiremitli Zemin 
var precision = {"w" : 2, "h" : 2};
var subdivisions = {'h' : 8, 'w' : 8};
var tiledGround = BABYLON.Mesh.CreateTiledGround(
   "Tiled Ground", -3, -3, 3, 3, 
   subdivisions, precision, scene, false);

Temel Öğe - Konum, Döndürme ve Ölçeklendirme

Bu bölümde, şimdiye kadar eklediğimiz öğeleri nasıl konumlandıracağımızı, döndüreceğimizi veya ölçeklendireceğimizi öğreneceğiz.

Kutu, küre, silindir, düğüm vb. Yarattık. Şimdi şekilleri nasıl konumlandıracağımızı, ölçeklendireceğimizi ve döndüreceğimizi göreceğiz.

Sr.No. Öğe ve Açıklama
1 Durum

Konum değişikliğiyle, ağ bir konumdan diğerine değiştirilecektir.
2 Rotasyon

Döndürme ile ağ, ağ etrafında döndürülecektir.
3 Ölçeklendirme

Ağın ölçeklendirilmesi x, y veya z eksenine göre yapılabilir.

Temel Öğe - Ebeveynlik

Ebeveynlik ile, ağlar arasında bir ebeveyn-çocuk ilişkisi oluşturacağız ve nasıl davrandıklarını göreceğiz. Yani ebeveyne uyguladığınız dönüşümler ne olursa olsun, aynı şey çocuğa da uygulanacaktır. Şimdi aynı şeyi aşağıda gösterilen demo ile anlayalım.

Demo

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

Çıktı

Açıklama

Yukarıdaki ağda 3 kutu oluşturduk. Demoda, boxb ölçeklendirmesi uygulandı ve aynı zamanda ana kutusundan beri ölçeklenen boxc'ye bir ebeveyn olarak atandı ve aynı ölçeklendi. Ebeveyn-çocuk bağlantısının nasıl çalıştığını görmek için demo ile oynayabilirsiniz.

Ağ oluşturmak için başka bir ağın ebeveynini kullanmanız gerekir -

  • child.parent = parentmesh;

Temel Öğe - Çevre

Şimdi bu bölümde sahne ortamını tartışalım. Hakkında konuşacağızscene background color, ambientcolor, skyboxes, fog modevb. bir sahnede.

Gördük scene background color is demos Şimdiye kadar yarattığımız.

Sahne arka plan rengi

Şimdi sahne arka plan renginin nasıl çalıştığını görelim.

Sözdizimi

Sahne arka plan renginin sözdizimi aşağıdadır -

scene.clearColor = new BABYLON.Color3(0.5, 0.8, 0.5);
or
scene.clearColor = BABYLON.Color3.Blue();

Yukarıdaki özellik, sahnenin arka plan rengini değiştirecektir.

Sahne Ortam rengi

Şimdi sahne ortam renginin nasıl çalıştığını görelim.

Sözdizimi

Sahne ortam rengi için sözdizimi aşağıdadır -

scene.ambientColor = new BABYLON.Color3(0.3, 0.3, 0.3);

AmbientColor, StandardMaterialortam rengi ve dokusu. Sahne için ambientColor yoksaStandardMaterial.ambientColor ve StandardMaterial.ambientTextureetkisi yoktur. StandardMaterial ambientColor / ambientTexture, sahne için ambientColor uygulandığında aktif hale gelecektir. Varsayılan olarak sahne verilirscene.ambientColor ve şu şekilde ayarlayın Color3 (0, 0, 0), bu da ambientColor olmadığı anlamına gelir.

Sahne Sis modu

Şimdi Sahne Sisi Modunun nasıl çalıştığını anlayacağız.

Sözdizimi

Sahne Sis Modunun sözdizimi aşağıdadır.

scene.fogMode = BABYLON.Scene.FOGMODE_EXP;

Mevcut sis modlarının aşağıdaki listesi -

  • BABYLON.Scene.FOGMODE_NONE - varsayılan olan, sis devre dışı bırakılır.

  • BABYLON.Scene.FOGMODE_EXP - sis yoğunluğu üstel bir işlevi izler.

  • BABYLON.Scene.FOGMODE_EXP2 - yukarıdakiyle aynı, ancak daha hızlı.

  • BABYLON.Scene.FOGMODE_LINEAR - sis yoğunluğu doğrusal bir işlevi izler.

Sis modu EXP veya EXP2 tanımlanmışsa, üzerindeki yoğunluğu şu şekilde tanımlayabilirsiniz -

scene.fogDensity = 0.01;

Sis modu DOĞRUSAL ise, sisin nerede başlayıp nerede bittiğini aşağıdaki gibi tanımlayabilirsiniz -

scene.fogStart = 20.0;
scene.fogEnd = 60.0;

Sise renk vermek için aşağıdaki kodu yürütün -

scene.fogColor = new BABYLON.Color3(0.9, 0.9, 0.85);

Skybox

Skybox, sahnenin gerçekçi görünmesini sağlayan oyunlarda arka plan oluşturmanın bir yoludur. Ekranınızın etrafında, malzeme için kullanılan doku ile kaplanan daha çok bir sarmalayıcıdır. Oluşturmak istediğiniz sahne için gerçekçi görünmesi için görüntülerinizi doğru seçin. Gökyüzü kutusu oluşturmak için, bir kutu oluşturmalı ve ona malzeme uygulamalısınız. Sonraki bölümde farklı malzemeleri ayrıntılı olarak tartışacağız.

Şimdi, kutu ve malzeme kullanarak bir skybox'ın nasıl oluşturulacağını göreceğiz.

var skybox = BABYLON.Mesh.CreateBox("skyBox", 100.0, scene);

Tüm sahneyi kaplaması için 100 boyutunda bir kutu oluşturacağız. Aşağıdaki gibi yapılan kutuya malzeme vererek başlayacağız -

var skyboxMaterial = new BABYLON.StandardMaterial("skyBox", scene);

Bu malzemeye özellikleri atayacağız.

skyboxMaterial.reflectionTexture = new BABYLON.CubeTexture("images/cubetexture/skybox", scene);

Temelde ayna benzeri bir malzeme oluşturmak için kullanılan yansıma dokusunu kullanmalıyız. Yansıma dokusu özelliği, görüntüyü girdi olarak alan CubeTexture kullanır. Küpün 6 ​​yüzü olduğu için, skybox için gereken görüntü 6 olmalıdır, yani dahili olarak skybox_nx, skybox_ny, skybox_nz, skybox_px, skybox_py, skybox_pz olarak saklanmalıdır. Skybox için kullanılan resimler aşağıya yapıştırılmıştır; onlar küpün altı kenarındaki yüzleridir. Şekle bir doku uyguladığınızda, kullanılan görüntünün detaylarını verir ve sahnenin gerçekçi görünmesini sağlar. Koordinat modunu SKYBOX_MODE olarak aşağıda gösterildiği gibi kullandık -

skyboxMaterial.reflectionTexture.coordinatesMode = BABYLON.Texture.SKYBOX_MODE;

BackfaceCulling, diffuseColor, specularColor, disableLighting, vb. Gibi material için kullanılan başka özellikler de vardır. Özellikler, malzeme bölümünde ayrıntılı olarak açıklanmıştır.

Demoda, gökyüzü kutusu kullanılarak oluşturulan bir çevre sahnesi, sahnede dönen bir küre ve etrafta hareket eden bir uçak göstereceğiz. Döndüğünüzde fark edeceğiniz sahneye sis uygulanıyor.

Ortam Sahnesini Gösteren Demo

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

Çıktı

Açıklama

Yukarıdaki örnekte, sis için aşağıdaki kodu kullandık -

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 - Burada sis yoğunluğu üstel bir işlevi izler.

  • scene.registerBeforeRender = Bununla, sis yoğunluğu aşağıdaki gibi değişir -

var alpha = 0;
scene.registerBeforeRender(function () {
   scene.fogDensity = Math.cos(alpha) / 10;
   alpha += 0.02;
});

Alfa değeri, yukarıdaki işlevde olduğu gibi bir döngüde giderken 0,02 artmaya devam eder.

Burada, bir uçak hareketli grafik görüntüsü ekledik ve scene.registerBeforeRender aşağıdaki gibi işlev -

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;
};s

Uçağın x eksenini değiştireceğiz ve 50'den fazlaya ulaştığında sıfırlayacağız.

Ayrıca küre, y ekseni boyunca döndürülür. Bu, yukarıdaki örnekte gösterilmiştir. Değer sphere.rotation.y kullanılarak değiştirilir.

Küre için kullanılan doku - images/tshphere.jpg. Görüntüler yerel olarak görüntülerde / klasörlerde saklanır ve ayrıca referans için aşağıya yapıştırılır. İstediğiniz herhangi bir görseli indirebilir ve demo bağlantısında kullanabilirsiniz.

Bir küp için altı resme ihtiyacımız var. Görüntüler yerel olarak images / cubetexture / klasöründe saklanır. İstediğiniz herhangi bir görüntüyü indirebilirsiniz, ancak kaydettiğinizde görüntü_nx'in adı, görüntünün adı, görüntünün adı_görünüm_adı, görüntünün adı_görünüm_py'si, görüntü_pz adı olarak kaydedin. Lütfen arka planın skybox için gösterilene benzer gerçekçi görünmesi için seçilen görüntülerin sıralı olması gerektiğini unutmayın.

Gökyüzü kutusu yapmak için kullanılan resimler aşağıdaki gibidir - images/cubetexture/skybox

skybox_nx

skybox_ny

skybox_nz

skybox_px

skybox_py

skybox_pz

ja/tutorial
es/tutorial
de/tutorial
fr/tutorial
th/tutorial
pt/tutorial
ru/tutorial
vi/tutorial
it/tutorial
ko/tutorial
tr/tutorial
id/tutorial
pl/tutorial
hi/tutorial
japost
espost
depost
frpost
thpost
ptpost
rupost
vipost
itpost
kopost
trpost
idpost
plpost
hipost

© Copyright 2021 - 2024 | All Rights Reserved