BabylonJS - Hızlı Kılavuz

Babylon.js, web için 3B uygulamalar / video oyunları geliştirmek için kullanılan javascript açık kaynaklı bir çerçevedir. BabylonJS'nin resmi web sitesi www.babylonjs.com'dur .

Babylon.js çerçevesini kullanmak kullanıcılar için kolaydır. 3B nesneleri, özel efektleri ve sesleri vb. Oluşturmak ve yönetmek için gerekli tüm araçları içerir.

Babylon.js, en popüler 3D oyun motorlarından biridir ve geliştiriciler tarafından yaygın olarak kullanılmaktadır. 3B bir kitaplık olarak yerleşik işlevler sağlar. Bu işlevler, ortak 3B işlevlerini verimli ve doğru yollarla uygulamanıza yardımcı olur.

WebGL ve javascript tabanlı TypeScript dili kullanılarak geliştirilmiştir.

WebGL nedir?

WebGL (Web Grafik Kitaplığı), Web'deki 3B grafikler için yeni standarttır. 2B grafikleri ve etkileşimli 3B grafikleri işlemek amacıyla tasarlanmıştır. Telefonlar ve diğer mobil cihazlar için düşük seviyeli bir 3B API olan OpenGL'nin ES 2.0 kitaplığından türetilmiştir. WebGL, ES 2.0 (Gömülü Sistemler) ile benzer işlevsellik sağlar ve modern 3D grafik donanımında iyi performans gösterir.

TypeScript

Tanım olarak, "TypeScript, uygulama ölçeğinde geliştirme için JavaScripttir."

TypeScript, güçlü biçimde yazılmış, nesne yönelimli, derlenmiş bir dildir. TypeScript hem bir dil hem de bir dizi araçtır. TypeScript, JavaScript'e derlenmiş bir JavaScript üst kümesidir. Başka bir deyişle, TypeScript, JavaScript artı bazı ek özelliklerdir.

TypeScript dilinin amacı, JavaScript kodunun üretimini iyileştirmek ve güvenliğini sağlamaktır. BabylonJS, TypScript kullanılarak geliştirildiğinden sağlam ve güvenlidir.

Bu bölümde, BabylonJS için ortamın nasıl kurulacağını öğreneceğiz.

Kuruluma başlamak için Babylon.js'nin resmi web sitesini ziyaret edin - www.babylonjs.com . İndirme bölümüne gidin ve Babylon.js'nin en son sürümünü seçin ve klasörünüzde saklayın.

Aynı ekran görüntüsü aşağıdaki gibidir -

Ayrıca GITHUB'a gidip babylonjs projesini klonlayabilirsiniz -

Babylon.js

Komut satırı türünüzde -

git clone https://github.com/BabylonJS/Babylon.js.git
go to cd BabylonJS/
npm install

Gerekli dosyalar BabylonJS klasöründe bulunacaktır.

VSCode'u (Microsoft Visual Studio Code) düzenleme için kullanabilirsiniz. Kod, herhangi bir hata varsa vurgulama, sözdiziminin vurgulanması vb. Gibi yerleşik işlevlerle birlikte gelir. İstediğiniz düzenleyiciyi kullanabilirsiniz ve yalnızca VSCode'u kullanmak zorunlu değildir.

BabylonJSHTML5 ve WEBGL ile 3D oyunlar oluşturmak için açık kaynaklı bir JavaScript çerçevesidir. Github'da barındırılmaktadır. BabylonJS'nin resmi web sitesi www.babylonjs.com'dur.

3D Animasyon dünyasında, şekiller üçgenlerle çizilir.WebGL ile, sürece dahil olan kodlama seliyle karmaşıklık artar. BabylonJS, artan karmaşıklığı azaltmak için devreye giren kolay bir çözümdür. Burada, ışıklar, kameralar ve motor için API'nin kullanımı ve 3D nesneler oluşturulması kolaydır.

BabylonJS'nin kaynak kodu typcript olarak kodlanmıştır, Javascript'e derlenerek son kullanıcıya sunulmuştur.

Babylonjs ile çalışmaya başlamak için babylonjs dosyasını indirin, sonunda barındırın ve 3D kodunuzu yazmaya başlamaya hazırsınız.

BabylonJS, 2016 yılında Microsoft çalışanları tarafından geliştirilmiştir. Microsoft'ta Pencere ve Cihazlar Grubu Baş Program Yöneticisi David Catuhe, BabylonJ'leri geliştirmenin ve onu büyük bir başarıya dönüştürmenin arkasındaki ana kişidir.

BabylonJS'i çalıştırmak için WEBGL destekli modern tarayıcılara ihtiyacımız var. En son tarayıcılar, yani Internet Explorer 11+, Firefox 4+, Google Chrome 9+, Opera 15+, vb. WEBGL desteğine sahiptir ve çıktıyı görmek için demolar aynı şekilde çalıştırılabilir.

BabylonJs, farklı 3B görüntü türleri oluşturmaya yardımcı olan aşağıdaki özellikleri sunar:

  • Kutu, küre, scylinder, koni, yükseklik zemin gibi şekiller
  • Kameralar, Işıklar
  • Ağlar, dokular, Malzemeler
  • Sprites
  • Morphing
  • Mesh Kesişimi ve çarpışma algılama
  • Fizik motoru eklentisi
  • Eylem Yöneticisi
  • SolidParticles
  • Örnekler ve Parçacıklar
  • Kemik ve İskelet Desteği
  • Sahneye müzik ve ses ekleme

BabylonJS, kendi ağlarına ek olarak, Blender, FBX ve 3DS Max gibi üçüncü taraf 3D yazılımlardan oluşturulan ağların kullanımına da izin verir.

Blender

Blender, animasyonlu sahneler, 3B yazdırılmış modeller, video oyunları vb. Oluşturmak için kullanılan açık kaynaklı bir 3B bilgisayar grafik yazılım ürünüdür. Blender verir. Ağları oluşturmak için Babylon ile kullanılacak bablyon dosyaları. Dosyaları blenderden babylon'a nasıl dönüştürebileceğiniz bu eğitimin sonraki bölümlerinde açıklanmıştır.

FBX

Film kutusu olarak da adlandırılır, 3B animasyon ve doku boyama yazılımına yardımcı olur. FBX dosyaları, fbx uzantısı ile kaydedilir.

MAX

MAX yazılımı, oyunlarda devasa bir dünya, tasarımlar için çarpıcı sahneler ve ilgi çekici sanal gerçeklik deneyimleri yaratmanıza yardımcı olur.

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 oluşturacağı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

Şimdi sahneye sahip olduğumuza göre, 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önde 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önlerini 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 bir ş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 uygulanmış ve aynı zamanda ana kutusundan beri ölçeklenen boxc'ye bir ebeveyn olarak atanmıştır ve aynı ölçeklendirilmiştir. Ebeveyn-çocuk bağlantısının nasıl çalıştığını görmek için demo ile oynayabilirsiniz.

Bir 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

Aşağıda, sahne ortam renginin sözdizimi verilmiştir -

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şturmanız ve ona malzeme uygulamanız gerekir. Farklı materyali sonraki bölümde 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 gerekli olan görüntü 6 olmalıdır, yani dahili olarak skybox_nx, skybox_ny, skybox_nz, skybox_px, skybox_py, skybox_pz olarak depolanmalı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 ayrıntıları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österilmektedir. 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örde 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 adı, görüntü_smi adı, görüntü_sayısı adı, görüntü_peksi adı, görüntü_py adı, 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

Malzemeler nesneler için kıyafet gibidir. Renk, doku ekleyebilir ve ağlarınızı onunla sarabilirsiniz. Birçok ağı örtmek için aynı malzemeyi kullanabilirsiniz. Ağlar, önceki bölümde gördüğümüz örnekte gördüğümüz sahne olabilir - gökyüzünden geçen uçak.

Bu bölümde, bu bölümde ağlara nasıl renk, doku ve yansıma ekleneceğini öğreneceğiz.

Önceden oluşturulmuş sahneye malzeme ekleyeceğiz. Oluşturduğumuz tüm şekillere malzeme ekleyerek ilerleyeceğiz.

Materyal eklemenin nasıl çalıştığını görmek için birkaç örnek ele alalım.

Sözdizimi

var materialforshapes = new BABYLON.StandardMaterial("texture1", scene);

Yukarıdaki materyal, varsayılan materyal olduğu için hiçbir şeyi değiştirmeyecektir. Nesnelerin daha çekici görünmesi için mevcut özellikleri kullanacağız.

Mevcut özellikler aşağıdaki gibidir -

  • Transparency

  • Diffuse

  • Emissive

  • Ambient

  • Specular

  • Arka Yüz İtlafı

  • WireFrame

Malzemeye uygulanan bu özelliklerin ağın görünümünü ve hissini nasıl değiştirdiğine bir göz atın.

Temel Malzeme Özelliği - FresnelParameters

Fresnel, BabylonJS tarafından standardmaterial. Şekiller üzerine uygulanan rengi değiştirmeye izin verir. Basit Fresnel kullanarak cam gibi yansıma elde edebilirsiniz. Fresnel, tamamen merkezde değil, kenarlarda daha fazla yansımaya sahip olmanıza izin verecektir.

Fresnel için aşağıdaki özellikler mevcuttur

StandardMaterial.diffuseFresnelParameters
StandardMaterial.opacityFresnelParameters
StandardMaterial.reflectionFresnelParameters
StandardMaterial.emissiveFresnelParameters
StandardMaterial.refractionFresnelParameters

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

            var camera = new BABYLON.ArcRotateCamera("camera1", 0, 0, 10, BABYLON.Vector3.Zero(), scene);

            camera.setPosition(new BABYLON.Vector3(0, 5, -10));

            camera.attachControl(canvas);
            camera.upperBetaLimit = Math.PI / 2;
            camera.lowerRadiusLimit = 4;

            var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(0, 1, 0), scene);
            light.intensity = 0.7;

            var knot = BABYLON.Mesh.CreateTorusKnot("knot", 1, 0.4, 128, 64, 2, 3, scene);	
            var yellowSphere = BABYLON.Mesh.CreateSphere("yellowSphere", 16, 1.5, scene);
            yellowSphere.setPivotMatrix(BABYLON.Matrix.Translation(3, 0, 0));
            var yellowMaterial = new BABYLON.StandardMaterial("yellowMaterial", scene);
            yellowMaterial.diffuseColor = BABYLON.Color3.Yellow();
            yellowSphere.material = yellowMaterial;    

            // Ground
            var ground = BABYLON.Mesh.CreateBox("Mirror", 1.0, scene);
            ground.scaling = new BABYLON.Vector3(100.0, 0.01, 100.0);
            ground.material = new BABYLON.StandardMaterial("ground", scene);
            ground.material.diffuseTexture = new BABYLON.Texture("images/rainbow.png", scene);
            ground.material.diffuseTexture.uScale = 10;
            ground.material.diffuseTexture.vScale = 10;
            ground.position = new BABYLON.Vector3(0, -2, 0);

            // Main material	
            var mainMaterial = new BABYLON.StandardMaterial("main", scene);
            knot.material = mainMaterial;

            var probe = new BABYLON.ReflectionProbe("main", 512, scene);
            probe.renderList.push(yellowSphere);
            probe.renderList.push(ground);
            mainMaterial.diffuseColor = new BABYLON.Color3(1, 0.5, 0.5);
            mainMaterial.refractionTexture = probe.cubeTexture;
            mainMaterial.refractionFresnel<h3>Parameters</h3> = new BABYLON.Fresnel<h3>Parameters</h3>();
            mainMaterial.refractionFresnel<h3>Parameters</h3>.bias = 0.5;
            mainMaterial.refractionFresnel<h3>Parameters</h3>.power = 16;
            mainMaterial.refractionFresnel<h3>Parameters</h3>.leftColor = BABYLON.Color3.Black();
            mainMaterial.refractionFresnel<h3>Parameters</h3>.rightColor = BABYLON.Color3.White();
            mainMaterial.indexOfRefraction = 1.05;

            // Fog
            scene.fogMode = BABYLON.Scene.FOGMODE_LINEAR;
            scene.fogColor = scene.clearColor;
            scene.fogStart = 20.0;
            scene.fogEnd = 50.0;

            // Animations
            scene.registerBeforeRender(function () {
               yellowSphere.rotation.y += 0.01;
               //  greenSphere.rotation.y += 0.01;
            });
            return scene;
         };
         var scene = createScene();
         engine.runRenderLoop(function() {
            scene.render();
         });
      </script>
   </body>
</html>

Çıktı

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

Açıklama

Aşağıdaki kod Fresnel etkisini uygular. Sol ve sağ renkler, ağların kenarlarına uygulanır.

mainMaterial.refractionFresnelParameters = new BABYLON.FresnelParameters();
mainMaterial.refractionFresnelParameters.bias = 0.5;
mainMaterial.refractionFresnelParameters.power = 16;
mainMaterial.refractionFresnelParameters.leftColor = BABYLON.Color3.Black();
mainMaterial.refractionFresnelParameters.rightColor = BABYLON.Color3.White();

Önyargı ve güç özelliği, yüzeydeki Fresnel etkisini kontrol eder.

Bu demoda, rainbow.png adlı bir resim kullandık. Görüntüler yerel olarak görüntülerde / klasörlerde saklanır. İstediğiniz herhangi bir görseli indirebilir ve demo bağlantısında kullanabilirsiniz.

Animasyon, bir sahneyi daha etkileşimli hale getirir ve aynı zamanda ona gerçekçi bir görünüm vererek etkileyici hale getirir. Şimdi animasyonu ayrıntılı olarak anlayalım. Bir konumdan diğerine taşımak için şekillere animasyon uygulayacağız. Animasyonu kullanmak için, gerekli parametrelerle animasyon üzerinde bir nesne oluşturmanız gerekir.

Şimdi aynı sözdizimini görelim -

var animationBox = new BABYLON.Animation(
   "myAnimation", 
   "scaling.x", 
   30, 
   BABYLON.Animation.ANIMATIONTYPE_FLOAT, 
   BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE
);

Parametreler

BabylonJS ile Animasyonlar ile ilgili aşağıdaki parametreleri göz önünde bulundurun -

  • Animasyonun adı.

  • Şeklin özelliği - örneğin, ölçekleme, konum değiştirme, vb. Sözdiziminde ölçekleme gösterilen şeydir; burada, kutuyu x ekseni boyunca ölçekleyecektir.

  • İstenen saniye başına kare sayısı: Bu animasyonda mümkün olan en yüksek FPS.

  • Burada ne tür bir değerin değiştirileceğine karar verir ve girersiniz: bu bir kayan nokta mı (ör. Bir öteleme), bir vektör (ör. Bir yön) veya bir kuaterniyon mu?

  • Tam değerler -

    • BABYLON.Animation.ANIMATIONTYPE_FLOAT

    • BABYLON.Animation.ANIMATIONTYPE_VECTOR2

    • BABYLON.Animation.ANIMATIONTYPE_VECTOR3

    • BABYLON.Animation.ANIMATIONTYPE_QUATERNION

    • BABYLON.Animation.ANIMATIONTYPE_COLOR3

  • Animasyon davranışı - animasyonu durdurmak veya yeniden başlatmak için.

  • Önceki değerleri kullanın ve artırın -

    • BABYLON.Animation.ANIMATIONLOOPMODE_RELATIVE

  • Başlangıç ​​değerinden yeniden başlat -

    • BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE

  • Nihai değerlerini koruyun

    • BABYLON.Animation.ANIMATIONLOOPMODE_CONSTANT

Şimdi animasyon nesnesini oluşturalım -

var animationBox = new BABYLON.Animation(
   "myAnimation", 
   "scaling.x", 
   30, 
   BABYLON.Animation.ANIMATIONTYPE_FLOAT, 
   BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE
);

Animasyon Demosu

<!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);
            camera.attachControl(canvas, true);
            
            var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(0, 1, 0), scene);
            light.intensity = 0.7;	
            
            var pl = new BABYLON.PointLight("pl", BABYLON.Vector3.Zero(), scene);
            pl.diffuse = new BABYLON.Color3(1, 1, 1);
            pl.specular = new BABYLON.Color3(1, 1, 1);
            pl.intensity = 0.8;
            
            var box = BABYLON.Mesh.CreateBox("box", '3', scene);
            box.position = new BABYLON.Vector3(-10,0,0);

            var box1 = BABYLON.Mesh.CreateBox("box1", '3', scene);
            box1.position = new BABYLON.Vector3(0,0,0);

            var animationBox = new BABYLON.Animation("myAnimation", "scaling.x", 30, BABYLON.Animation.ANIMATIONTYPE_FLOAT, BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE);

            var animationBox1 = new BABYLON.Animation("myAnimation1", "scaling.z", 10, BABYLON.Animation.ANIMATIONTYPE_FLOAT, BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE);

            // An array with all animation keys
            var keys = []; 

            //At the animation key 0, the value of scaling is "1"
            keys.push({
               frame: 0,
               value: 1
            });

            //At the animation key 20, the value of scaling is "0.2"
            keys.push({
               frame: 20,
               value: 0.2
            });

            keys.push({
               frame: 60,
               value: 0.4
            });

            //At the animation key 100, the value of scaling is "1"
            keys.push({
               frame: 100,
               value: 1
            });
            
            animationBox.setKeys(keys);
            box.animations = [];
            box.animations.push(animationBox);			
            scene.beginAnimation(box, 0, 100, true); 

            // An array with all animation keys
            var keys = []; 

            //At the animation key 0, the value of scaling is "1"
            keys.push({
               frame: 0,
               value: 1
            });

            //At the animation key 20, the value of scaling is "0.2"
            keys.push({
               frame: 60,
               value: 0.2
            });

            //At the animation key 100, the value of scaling is "1"
            keys.push({
               frame: 100,
               value: 1
            });
            animationBox1.setKeys(keys);
            box1.animations = [];
            box1.animations.push(animationBox1);			
            scene.beginAnimation(box1, 0, 100, true); 
            return scene;
         };
         var scene = createScene();
         engine.runRenderLoop(function() {
            scene.render();
         });
      </script>
   </body>
</html>

Çıktı

// An array with all animation keys
var keys = []; 

//At the animation key 0, the value of scaling is "1"
keys.push({
   frame: 0,
   value: 1
});

//At the animation key 20, the value of scaling is "0.2"
keys.push({
   frame: 20,
   value: 0.2
});

//At the animation key 100, the value of scaling is "1"
keys.push({
   frame: 100,
   value: 1
});

animationBox.setKeys(keys);

box.animations = [];

box.animations.push(animationBox);

scene.beginAnimation(box, 0, 100, true); //defines the start and the end on the target shape box.

Aşağıdakiler, animasyon nesnesinde bulunan diğer işlevlerdir -

  • pause()
  • restart()
  • stop()
  • reset()

Saklayabiliriz beginAnimation bir değişkende referans ve animasyonu durdurmak, duraklatmak veya sıfırlamak için referansı kullanın.

var newAnimation = scene.beginAnimation(box1, 0, 100, true);

Örneğin,

newAnimation.pause();

Animasyon nesnesinde, ana kareleri kontrol etmek için işlevler vardır.

BABYLON.Animation.prototype.floatInterpolateFunction = function (startValue, endValue, gradient) {
   return startValue + (endValue - startValue) * gradient;
};

BABYLON.Animation.prototype.quaternionInterpolateFunction = function (startValue, endValue, gradient) {
   return BABYLON.Quaternion.Slerp(startValue, endValue, gradient);
};

BABYLON.Animation.prototype.vector3InterpolateFunction = function (startValue, endValue, gradient) {
   return BABYLON.Vector3.Lerp(startValue, endValue, gradient);
};

İşte değiştirebileceğiniz işlevlerin listesi -

  • floatInterpolateFunction
  • quaternionInterpolateFunction
  • quaternionInterpolateFunctionWithTangents
  • vector3InterpolateFunction
  • vector3InterpolateFunctionWithTangents
  • vector2InterpolateFunction
  • vector2InterpolateFunctionWithTangents
  • sizeInterpolateFunction
  • color3InterpolateFunction
  • matrixInterpolateFunction

Hızlı bir animasyon oluşturmak için, doğrudan kullanılabilecek bir işlev vardır.

Örneğin,

Animation.CreateAndStartAnimation = function(name, mesh, tartgetProperty, framePerSecond, totalFrame, from, to, loopMode);

Burada yalnızca 2 anahtar kare kullanabilirsiniz - start ve end.

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);
            camera.attachControl(canvas, true);
            
            var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(0, 1, 0), scene);
            light.intensity = 0.7;	
            
            var pl = new BABYLON.PointLight("pl", BABYLON.Vector3.Zero(), scene);
            pl.diffuse = new BABYLON.Color3(1, 1, 1);
            pl.specular = new BABYLON.Color3(1, 1, 1);
            pl.intensity = 0.8;
            
            var box = BABYLON.Mesh.CreateBox("box", '3', scene);
            box.position = new BABYLON.Vector3(0,0,0);
            BABYLON.Animation.CreateAndStartAnimation('boxscale', box, 'scaling.x', 30, 120, 1.0, 1.5);  
            return scene;
         };
         var scene = createScene();
         engine.runRenderLoop(function() {
            scene.render();
         });
      </script>
   </body>
</html>

Çıktı

Animasyon Harmanlama

EnableBlending = true; yardımıyla animasyon harmanlama elde edebilirsiniz;

Bu harmanlanmış animasyon, mevcut nesne durumundan değişecektir.

Kolaylaştırma İşlevleri

Animasyonu daha etkileyici hale getirmek için, daha önce css ile kullandığımız bazı yumuşatma işlevleri vardır.

Aşağıda, yumuşak geçiş işlevlerinin bir listesi verilmiştir -

  • BABYLON.CircleEase ()

  • BABYLON.BackEase (genlik)

  • BABYLON.BounceEase (sıçrama, zıplama)

  • BABYLON.CubicEase ()

  • BABYLON.ElasticEase (salınımlar, yaylanma)

  • BABYLON.ExponentialEase (üs)

  • BABYLON.PowerEase (güç)

  • BABYLON.QuadraticEase ()

  • BABYLON.QuarticEase ()

  • BABYLON.QuinticEase ()

  • BABYLON.SineEase ()

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);
            camera.attachControl(canvas, true);
            
            var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(0, 1, 0), scene);
            light.intensity = 0.7;	
            
            var pl = new BABYLON.PointLight("pl", BABYLON.Vector3.Zero(), scene);
            pl.diffuse = new BABYLON.Color3(1, 1, 1);
            pl.specular = new BABYLON.Color3(1, 1, 1);
            pl.intensity = 0.8;

            var box1 = BABYLON.Mesh.CreateTorus("torus", 5, 1, 10, scene, false);
            box1.position = new BABYLON.Vector3(0,0,0);

            var animationBox1 = new BABYLON.Animation("myAnimation1", "scaling.z", 10, BABYLON.Animation.ANIMATIONTYPE_FLOAT, BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE);

            // An array with all animation keys
            var keys = []; 

            //At the animation key 0, the value of scaling is "1"
            keys.push({
               frame: 0,
               value: 1
            });

            //At the animation key 20, the value of scaling is "0.2"
            keys.push({
               frame: 60,
               value: 0.2
            });

            //At the animation key 100, the value of scaling is "1"
            keys.push({
               frame: 100,
               value: 1
            });
            
            animationBox1.setKeys(keys);
            box1.animations = [];
            // box1.animations.push(animationBox1);		

            var easingFunction = new BABYLON.QuarticEase();
            easingFunction.setEasingMode(BABYLON.EasingFunction.EASINGMODE_EASEINOUT);

            animationBox1.setEasingFunction(easingFunction);
            box1.animations.push(animationBox1);
            scene.beginAnimation(box1, 0, 100, true); 
            return scene;
         };
         var scene = createScene();
         engine.runRenderLoop(function() {
            scene.render();
         });
      </script>
   </body>
</html>

Çıktı

Animasyon Etkinliği

Animasyon olayında gerekli olan her şeyi yapabilirsiniz. Çerçeve değiştirildiğinde veya animasyon tamamlandığında herhangi bir şeyi değiştirmek isterseniz, animasyona olaylar ekleyerek gerçekleştirilebilir.

var event1 = new BABYLON.AnimationEvent(50, function() { console.log("Yeah!"); }, true);
// You will get hte console.log when the frame is changed to 50 using animation.

animation.addEvent(event1); //attaching event to the animation.

BabylonJS - Sprites

Sprite'lar bilgisayar grafiklerinde neyi ifade eder? Temelde daha büyük bir sahneye entegre edilmiş 2 boyutlu bir bitmaptir. Hafızadan tasarruf etmek için birden çok küçük görüntü tek bir bitmap'te birleştirildiğinde, ortaya çıkan görüntüye hareketli grafik sayfası adı verilir. Sprite'lara ve bunların nasıl kullanılacağına başlayalım.

Sprite ile çalışmaya başlamanın ilk adımı, bir sprite yöneticisi oluşturmaktır.

var spriteManagerTrees = new BABYLON.SpriteManager("treesManagr", "Assets/Palm-arecaceae.png", 2000, 800, scene);

Hareketli grafik yöneticisi oluşturmak için aşağıdaki parametreleri göz önünde bulundurun -

  • Name - Bu yöneticinin adı.

  • URL - Kullanılacak görselin url'si.

  • Capacity of manager - Bu yöneticideki maksimum örnek sayısı Örneğin, yukarıdaki örnek 2000 ağaç oluşturacaktır.

  • Cell size - Resmin aldığı boyut.

  • Scene - Yöneticinin ekleneceği sahne.

var spriteManagerPlayer = new BABYLON.SpriteManager("playerManagr","Assets/Player.png", 2, 64, scene);

Yukarıdaki nesneye bir göz atın. Bir oyuncu resmi verdik ve şimdi bunun 2 örneğini oluşturuyoruz. Görüntünün boyutu 64'tür. Bir hareketli grafiğin her görüntüsü bir 64 piksellik kare içinde yer almalıdır, ne fazla ne de az.

Şimdi sprite yöneticisine bağlı aynı örneğini oluşturalım.

var player = new BABYLON.Sprite("player", spriteManagerPlayer);

Bu oynatıcı nesnesiyle tıpkı diğer şekiller veya ağlar gibi oynayabilirsiniz. Konum, boyut, açı vb. Atayabilirsiniz.

player.size = 0.3;
player.angle = Math.PI/4;
player.invertU = -1;
player.width = 0.3;
player.height = 0.4;

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);	
            // Create camera and light
            var light = new BABYLON.PointLight("Point", new BABYLON.Vector3(5, 10, 5), scene);
            
            var camera = new BABYLON.ArcRotateCamera("Camera", 1, 0.8, 8, new BABYLON.Vector3(0, 0, 0), scene);
            camera.attachControl(canvas, true);

            var spriteManagerTrees = new BABYLON.SpriteManager("trees", "images/tree.png", 1000, 400, scene);	

            for (var i = 0; i < 1000; i++) {
               var tree = new BABYLON.Sprite("tree", spriteManagerTrees);
               tree.position.x = Math.random() * 100 - 50;
               tree.position.z = Math.random() * 100 - 50;
               tree.isPickable = true;

               //Some "dead" trees
               if (Math.round(Math.random() * 5) === 0) {
                  tree.angle = Math.PI * 90 / 180;
                  tree.position.y = -0.3;
               }
            }

            var spriteManagerTrees1 = new BABYLON.SpriteManager("trees1", "images/tree1.png", 1000,400, scene);	

            for (var i = 0; i < 1000; i++) {
               var tree1 = new BABYLON.Sprite("tree1", spriteManagerTrees1);       
               if (i %2 == 0) {
               tree1.position.x = Math.random() * 100 - 50;			
               } else {
                  tree1.position.z = Math.random() * 100 - 50;
               }
               tree1.isPickable = true;
            }

            spriteManagerTrees.isPickable = true;
            spriteManagerTrees1.isPickable = true;

            var spriteManagerPlayer = new BABYLON.SpriteManager("playerManager", "images/bird.png", 2, 200, scene);
            
            var player = new BABYLON.Sprite("player", spriteManagerPlayer);
            player.position.x = 2;
            player.position.y = 2;	
            player.position.z = 0;	


            var spriteManagerPlayer1 = new BABYLON.SpriteManager("playerManager1", "images/bird.png", 2, 200, scene);
            
            var player1 = new BABYLON.Sprite("player", spriteManagerPlayer1);
            player1.position.x = 1;
            player1.position.y = 2;	
            player1.position.z = 0;	

            var spriteManagerPlayer2 = new BABYLON.SpriteManager("playerManager2", "images/bird.png", 2, 200, scene);
            
            var player2 = new BABYLON.Sprite("player", spriteManagerPlayer2);
            player2.position.x = 0;
            player2.position.y = 1;	
            player2.position.z = 0;	

            scene.onPointerDown = function (evt) {
               var pickResult = scene.pickSprite(this.pointerX, this.pointerY);
               if (pickResult.hit) {
                  pickResult.pickedSprite.angle += 1;
               }
            };
            return scene;
         };
         var scene = createScene();
         engine.runRenderLoop(function() {
            scene.render();
         });
      </script>
   </body>
</html>

Çıktı

Bu demoda ağaçları göstermek için tree.png, tree1.png, sahnedeki kuşu göstermek için bird.png adlı bir resim kullandık. Bu 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.

Ağaç için kullanılan resimler aşağıda gösterilmiştir.

images/tree.png

images/tree1.png

images/bird.png

Şimdi hareketli balonlarla bir demo daha görelim.

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

            var light = new BABYLON.PointLight("Point", new BABYLON.Vector3(5, 10, 5), scene);
            
            var camera = new BABYLON.ArcRotateCamera("Camera", -3.4, 1.0, 82, new BABYLON.Vector3(0, -15, 0), scene);
            camera.setPosition(new BABYLON.Vector3(30, 0,100));
            camera.attachControl(canvas, true);
            
            var spriteManagerTrees = new BABYLON.SpriteManager("trees", "images/balloon.png", 50, 450, scene);	

            var treearray = [];
            for (var i = 0; i < 50; i++) {
               var tree = new BABYLON.Sprite("tree", spriteManagerTrees);
               tree.position.x = Math.random() * 100 - 10;
               tree.position.z = Math.random() * 100 - 10;
               tree.position.y = -35;
               tree.isPickable = true;       
               treearray.push(tree);
            }

            spriteManagerTrees.isPickable = true;
            scene.onPointerDown = function (evt) {
               var pickResult = scene.pickSprite(this.pointerX, this.pointerY);
               if (pickResult.hit) {
                  pickResult.pickedSprite.position.y = -3000;			
               }
            };
            
            k = -35;
            var animate = function() {
               if (k > 3) return;
               k += 0.05;
               for (var i = 0; i < treearray.length; i++) {
                  treearray[i].position.y = k;
               }
            };
            scene.registerBeforeRender(animate);
            return scene;
         };
         var scene = createScene();
         engine.runRenderLoop(function() {
            scene.render();
         });
      </script>
   </body>
</html>

Çıktı

Bu demoda ballon.png adlı bir görüntü kullandık. 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.

images/balloon.png

Balonlar gökyüzünde yükselecek ve durduklarında üzerlerine tıklayabilirsiniz ve kaybolacaklar. Bu, oluşturulan hareketli grafiğe tıklandığında ayrıntıları veren pickSprite işlevi kullanılarak yapılır.

OnPointerDown işlevi, fare eylemi gerçekleştiğinde ve hareketli grafiğin konumu değiştirildiğinde çağrılır.

var animate = function() {
   if (k > 3) return;
   k += 0.05;
   for (var i = 0; i < treearray.length; i++) {
      treearray[i].position.y = k;
   }
};
scene.registerBeforeRender(animate);

Animate işlevi, balonların başlangıçtaki -35'ten + 3'e taşınmasını sağlayan registerBeforeRender'da çağrılır. 0,05 artırılarak yavaş hareket ettirilir.

BabylonJS - Parçacıklar

Bir parçacık sistemi, geleneksel oluşturma teknikleriyle yeniden üretilmesi çok zor olan belirli türdeki "bulanık" fenomeni simüle etmek için çok sayıda çok küçük sprite, 3D model veya diğer grafik nesnelerini kullanan bir bilgisayar grafik tekniğidir.

Parçacık sistemi oluşturmak için sınıfı şu şekilde çağırmalısınız -

var particleSystem = new BABYLON.ParticleSystem("particles", 2000, scene);//2000 refers to the total number of particles to be produced.

Parçacık sistemi için aşağıdaki özelliklerin dikkate alınması gerekir -

particleSystem.particleTexture = new BABYLON.Texture("Flare.png", scene);
particleSystem.textureMask = new BABYLON.Color4(0.1, 0.8, 0.8, 1.0);
particleSystem.emitter = fountain
particleSystem.color1 = new BABYLON.Color4(0.7, 0.8, 1.0, 1.0);
particleSystem.color2 = new BABYLON.Color4(0.2, 0.5, 1.0, 1.0);
particleSystem.colorDead = new BABYLON.Color4(0, 0, 0.2, 0.0);

Yayıcı özelliği, parçacığın yayılması gereken ağı alır. color1 ve color2 parçacıkların renkleridir.

ColorDead partiküle, sahneden kaybolmadan hemen önce uygulanan renktir, dolayısıyla colorDead olarak adlandırılır.

particleSystem.minSize = 0.1;
particleSystem.maxSize = 0.5;
particleSystem.minLifeTime = 0.3;
particleSystem.maxLifeTime = 1.5;

MinSize ve maxSize parçacıklara verilen boyuttur. MinlifeTime ve maxLifeTime, parçacıklara verilen ömürdür.

particleSystem.emitRate = 1500;

EmitRate, parçacıkların yayılacağı hızdır.

Aşağıda gösterilen demoda torus kullandık. Simitin etrafındaki tüm parçacıkları almak için parçacık sistemini ve özelliklerini kullandık.

Demo 1

<!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);
            // Setup environment
            
            var light0 = new BABYLON.PointLight("Omni", new BABYLON.Vector3(0, 2, 8), scene);
            
            var camera = new BABYLON.ArcRotateCamera("ArcRotateCamera", 1, 0.8, 20, new BABYLON.Vector3(0, 0, 0), scene);
            camera.attachControl(canvas, true);

            var fountain = BABYLON.Mesh.CreateTorus("torus", 2, 1, 8, scene, false);
            
            var particleSystem = new BABYLON.ParticleSystem("particles", 2000, scene);
            particleSystem.particleTexture = new BABYLON.Texture("images/dot.jpg", scene);

            particleSystem.textureMask = new BABYLON.Color4(0.1, 0.8, 0.8, 1.0);
            particleSystem.emitter = fountain;


            particleSystem.minEmitBox = new BABYLON.Vector3(-1, 0, 0); // Starting all from
            particleSystem.maxEmitBox = new BABYLON.Vector3(1, 0, 0); // To...

            particleSystem.color1 = new BABYLON.Color4(0.7, 0.8, 1.0, 1.0);
            particleSystem.color2 = new BABYLON.Color4(0.2, 0.5, 1.0, 1.0);
            particleSystem.colorDead = new BABYLON.Color4(0, 0, 0.2, 0.0);

            particleSystem.minSize = 0.1;
            particleSystem.maxSize = 0.5;

            particleSystem.minLifeTime = 0.3;
            particleSystem.maxLifeTime = 1.5;

            particleSystem.emitRate = 1500;

            particleSystem.blendMode = BABYLON.ParticleSystem.BLENDMODE_ONEONE;

            particleSystem.gravity = new BABYLON.Vector3(0, -9.81, 0);

            particleSystem.direction1 = new BABYLON.Vector3(-7, 8, 3);
            particleSystem.direction2 = new BABYLON.Vector3(7, 8, -3);


            particleSystem.minAngularSpeed = 0;
            particleSystem.maxAngularSpeed = Math.PI;

            particleSystem.minEmitPower = 1;
            particleSystem.maxEmitPower = 3;
            particleSystem.updateSpeed = 0.005;

            particleSystem.start();
            var keys = [];
            var animation = new BABYLON.Animation("animation", "rotation.x", 30, BABYLON.Animation.ANIMATIONTYPE_FLOAT,
                                   BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE);
            
            // At the animation key 0, the value of scaling is "1"
            keys.push({
               frame: 0,
               value: 0
            });

            // At the animation key 50, the value of scaling is "0.2"
            keys.push({
               frame: 50,
               value: Math.PI
            });

            // At the animation key 100, the value of scaling is "1"
            keys.push({
               frame: 100,
               value: 0
            });

            // Launch animation
            animation.setKeys(keys);
            fountain.animations.push(animation);
            scene.beginAnimation(fountain, 0, 100, true);
            return scene;
         }
         var scene = createScene();
         engine.runRenderLoop(function() {
            scene.render();
         });	
      </script>
   </body>
</html>

Çıktı

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

Bu demoda dot.jpg adlı görüntüyü kullandık. 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.

Parçacık dokusu için kullanılan görüntü aşağıdadır: images/dot.jpg

Demo 2

<!doctype html>
<html>
   <head>
      <meta charset = "utf-8">
      <title>BabylonJs - Ball/Ground 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);
            scene.clearColor = new BABYLON.Color3( .5, .5, .5);
            
            var camera = new BABYLON.ArcRotateCamera("camera1",  0, 0, 0, new BABYLON.Vector3(0, 0, -0), scene);
            camera.setPosition(new BABYLON.Vector3(-100, 0,-100));
            camera.attachControl(canvas, true);
            
            var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(1, 0.5, 0), scene);
            var pl = new BABYLON.PointLight("pl", new BABYLON.Vector3(0, 0, 0), scene);

            var gmat = new BABYLON.StandardMaterial("mat1", scene);
            gmat.alpha = 1.0;
            
            var ground =  BABYLON.Mesh.CreateGround("ground", 100, 100, 20, scene);
            ground.material = gmat;
            gmat.wireframe = true;

            var particleSystem = new BABYLON.ParticleSystem("particles", 2000, scene);
            particleSystem.particleTexture = new BABYLON.Texture("images/dot.jpg", scene);

            particleSystem.textureMask = new BABYLON.Color4(0.1, 0.8, 0.8, 1.0);
            particleSystem.emitter = ground;

            particleSystem.minEmitBox = new BABYLON.Vector3(-1, 0, 0); // Starting all from
            particleSystem.maxEmitBox = new BABYLON.Vector3(1, 0, 0); // To...

            particleSystem.color1 = new BABYLON.Color4(0.7, 0.8, 1.0, 1.0);
            particleSystem.color2 = new BABYLON.Color4(0.2, 0.5, 1.0, 1.0);
            particleSystem.colorDead = new BABYLON.Color4(0, 0, 0.2, 0.0);

            particleSystem.minSize = 0.1;
            particleSystem.maxSize = 0.5;

            particleSystem.minLifeTime = 0.3;
            particleSystem.maxLifeTime = 1.5;

            particleSystem.emitRate = 1500;

            particleSystem.blendMode = BABYLON.ParticleSystem.BLENDMODE_ONEONE;

            particleSystem.gravity = new BABYLON.Vector3(0, -9.81, 0);

            particleSystem.direction1 = new BABYLON.Vector3(-7, 8, 3);
            particleSystem.direction2 = new BABYLON.Vector3(7, 8, -3);

            particleSystem.minAngularSpeed = 0;
            particleSystem.maxAngularSpeed = Math.PI;

            particleSystem.minEmitPower = 1;
            particleSystem.maxEmitPower = 3;
            particleSystem.updateSpeed = 0.005;

            particleSystem.start();


            var keys = [];
            var animation = new BABYLON.Animation("animation", "rotation.x", 30, BABYLON.Animation.ANIMATIONTYPE_FLOAT,
                           BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE);

            // At the animation key 0, the value of scaling is "1"
            keys.push({
               frame: 0,
               value: 0
            });

            // At the animation key 50, the value of scaling is "0.2"
            keys.push({
               frame: 50,
               value: Math.PI
            });

            // At the animation key 100, the value of scaling is "1"
            keys.push({
               frame: 100,
               value: 0
            });

            // Launch animation
            animation.setKeys(keys);
            ground.animations.push(animation);
            
            //scene.beginAnimation(ground, 0, 100, true);
            return scene;
         };
         var scene = createScene();
         engine.runRenderLoop(function() {
            scene.render();
         });
      </script>
   </body>
</html>

Çıktı

Animasyonlu Demo

<!doctype html>
<html>
   <head>
      <meta charset = "utf-8">
      <title>BabylonJs - Ball/Ground 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);
            scene.clearColor = new BABYLON.Color3( .5, .5, .5);
            
            var camera = new BABYLON.ArcRotateCamera("camera1",  0, 0, 0, new BABYLON.Vector3(0, 0, -0), scene);
            camera.setPosition(new BABYLON.Vector3(-100, 0, -100));
            camera.attachControl(canvas, true);
            
            var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(1, 0.5, 0), scene);
            var pl = new BABYLON.PointLight("pl", new BABYLON.Vector3(0, 0, 0), scene);

            var gmat = new BABYLON.StandardMaterial("mat1", scene);
            gmat.alpha = 1.0;
            
            var ground =  BABYLON.Mesh.CreateGround("ground", 100, 100, 20, scene);
            ground.material = gmat;
            gmat.wireframe = true;

            var particleSystem = new BABYLON.ParticleSystem("particles", 2000, scene);
            particleSystem.particleTexture = new BABYLON.Texture("images/dot.jpg", scene);

            particleSystem.textureMask = new BABYLON.Color4(0.1, 0.8, 0.8, 1.0);
            particleSystem.emitter = ground;

            particleSystem.minEmitBox = new BABYLON.Vector3(-1, 0, 0); // Starting all from
            particleSystem.maxEmitBox = new BABYLON.Vector3(1, 0, 0); // To...

            particleSystem.color1 = new BABYLON.Color4(0.7, 0.8, 1.0, 1.0);
            particleSystem.color2 = new BABYLON.Color4(0.2, 0.5, 1.0, 1.0);
            particleSystem.colorDead = new BABYLON.Color4(0, 0, 0.2, 0.0);

            particleSystem.minSize = 0.1;
            particleSystem.maxSize = 0.5;

            particleSystem.minLifeTime = 0.3;
            particleSystem.maxLifeTime = 1.5;

            particleSystem.emitRate = 1500;

            particleSystem.blendMode = BABYLON.ParticleSystem.BLENDMODE_ONEONE;

            particleSystem.gravity = new BABYLON.Vector3(0, -9.81, 0);//gravity for the particle.

            particleSystem.direction1 = new BABYLON.Vector3(-7, 8, 3);
            particleSystem.direction2 = new BABYLON.Vector3(7, 8, -3);
            
            //random direction for the particles on the scene
            particleSystem.minAngularSpeed = 0;
            particleSystem.maxAngularSpeed = Math.PI;
            particleSystem.minEmitPower = 1;
            particleSystem.maxEmitPower = 3;
            particleSystem.updateSpeed = 0.005;

            particleSystem.start();

            var keys = [];
            var animation = new BABYLON.Animation("animation", "rotation.x", 30, BABYLON.Animation.ANIMATIONTYPE_FLOAT,
                           BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE);
            
            // At the animation key 0, the value of scaling is "1"
            keys.push({
               frame: 0,
               value: 0
            });

            // At the animation key 50, the value of scaling is "0.2"
            keys.push({
               frame: 50,
               value: Math.PI
            });

            // At the animation key 100, the value of scaling is "1"
            keys.push({
               frame: 100,
               value: 0
            });

            // Launch animation
            animation.setKeys(keys);
            ground.animations.push(animation);
            scene.beginAnimation(ground, 0, 100, true); 
            return scene;
         };
         var scene = createScene();
         engine.runRenderLoop(function() {
            scene.render();
         });
      </script>
   </body>
</html>

Çıktı

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

Açıklama

Yukarıdaki demo tel kafes malzemeli bir zemini gösteriyor ve partikül sistemi merkezden üretiliyor.

BabylonJS'de kullanılabilecek birçok kamera vardır. Bir sahne için bir seferde yalnızca bir kamera etkin olacaktır.

Bu bölümde, BabylonJS'de kameraları nasıl kullanacağımızı öğreneceğiz.

FreeCamera

Şimdi FreeCamera'nın nasıl çalıştığını görelim.

Sözdizimi

FreeCamera için sözdizimi aşağıdadır -

var camera = new BABYLON.FreeCamera("FreeCamera", new BABYLON.Vector3(0, 1, -15), scene);

Bu, kameranın yerleştirildiği konumdur - yeni BABYLON.Vector3 (0, 1, -15).

Yönün değiştirilmesi yönü değiştirecektir. Değerleri değiştirebilir ve kameranın sahnede nasıl davrandığını görebilirsiniz.

FreeCamera tarafından kullanılan parametreler aşağıdadır -

  • Name
  • Position
  • Scene

ArcRotateCamera

Bu kamera, belirli bir hedef eksen etrafında döner. İmleçler ve fare ile veya dokunma olaylarıyla kontrol edilebilir. Parametreler ad, alfa, beta, yarıçap ve hedeftir.

Sözdizimi

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

ArcRotateCamera+ x yönünü gösterir. Kameranın konumunu değiştirmek için,setPosition Emlak.

camera.setPosition(new BABYLON.Vector3(0, 0, -100));

ArcRotateCamera, canlandırmak için mükemmel bir kameradır. Aşağıdaki komut, kamerayı hedefin etrafında döndürmenize yardımcı olacaktır -

scene.activeCamera.alpha += .01;

TouchCamera

Dokunma, bir tür "jest" dir. Parmak (lar), ekran kalemi, eldiven, ayaklar veya lazer işaretçi ile bir ped veya ekran üzerinde olabilir. Algılanabilen herhangi bir hareket ... bir jest olarak kabul edilebilir.

Sözdizimi

TouchCamera sözdizimi aşağıdadır -

var camera = new BABYLON.TouchCamera("TouchCamera", new BABYLON.Vector3(0, 1, -15), scene);

Oyun Kumandası

Bu kamera özellikle gamepad ile kullanılmak üzere tasarlanmıştır.

Sözdizimi

Gamepad Kamera için sözdizimi aşağıdadır -

var camera = new BABYLON.GamepadCamera("Camera", new BABYLON.Vector3(0, 15, -45), scene);

DeviceOrientationCamera

Bu kamera, cihazınızı öne veya arkaya, sola veya sağa eğmeniz gibi cihaz yönlendirme olaylarına tepki vermek için özel olarak tasarlanmıştır.

Sözdizimi

var camera = new BABYLON.DeviceOrientationCamera("DevOr_camera", new BABYLON.Vector3(0, 1, -15), scene);

Takip et

FollowCamera, bir konumla herhangi bir sahne öğesini takip etmek için tasarlanmıştır. Arkadan, önden veya her açıdan takip edilebilir.

Sözdizimi

FollowCamera için sözdizimi aşağıdadır -

var camera = new BABYLON.FollowCamera("FollowCam", new BABYLON.Vector3(0, 15, -45), scene);

VirtualJoysticksCamera

Bu kamera, Virtual Joystick olaylarına tepki verecek şekilde tasarlanmıştır. Sanal Oyun Çubukları, kameraları veya diğer sahne öğelerini kontrol etmek için kullanılan ekran üzeri 2D grafiklerdir.

Sözdizimi

Aşağıda VirtualJoysticksCamera için sözdizimi verilmiştir -

var camera = new BABYLON.VirtualJoysticksCamera("VJ_camera", new BABYLON.Vector3(0, 1, -15), scene);

AnaglyphCamera

The AnaglyphCamera is for use with red and cyan 3D glasses. It uses post-processing filtering techniques.

AnaglyphArcRotateCamera

Following is the syntax for the AnaglyphArcRotateCamera −

var camera = new BABYLON.AnaglyphArcRotateCamera("aar_cam", -Math.PI/2, Math.PI/4, 20, new BABYLON.Vector3.Zero(), 0.033, scene);

AnaglyphFreeCamera

Following is the syntax for the AnaglyphFreeCamera

var camera = new BABYLON.AnaglyphFreeCamera("af_cam", new BABYLON.Vector3(0, 1, -15), 0.033, scene);

VRDeviceOrientationFreeCamera

The VRDeviceOrientationFreeCamera uses FreeCamera as its basis, so the properties and methods of FreeCamera are also found on our VRDeviceOrientationFreeCamera.

Syntax

Following is the syntax for the VRDeviceOrientationFreeCamera

var camera = new BABYLON.VRDeviceOrientationFreeCamera ("Camera", new BABYLON.Vector3 (-6.7, 1.2, -1.3), scene, 0);

WebVRFreeCamera

The WebVRFreeCamera uses FreeCamera as its basis, so the properties and methods of FreeCamera are also found on our WebVRFreeCamera.

Syntax

Following is the syntax for the WebVRFreeCamera

var camera = new BABYLON.WebVRFreeCamera("WVR", new BABYLON.Vector3(0, 1, -15), scene);

In most of the demos, you will see attachControl where the camera is attached to the canvas.

Example

camera.attachControl(canvas, true);

In this chapter, we will learn about the lights used for BabylonJS. We will start by taking a look at the different types of lights available with babylonjs.

Lights are meant to produce the diffuse and specular color received by each pixel. Later, it is used on material to get the final color of each pixel.

There are 4 types of lights available with babylonjs.

  • Point Light
  • Directional Light
  • Spot Light
  • Hemispheric Light

BabylonJS - Point Light

A classic example of point light is the Sun, the rays of which are spread in all direction. Point light has a unique point in space from where it spreads the light in every direction. The color of light can be controlled using the specular and diffuse property.

Syntax

Following is the syntax for Point Light −

var light0 = new BABYLON.PointLight("Omni0", new BABYLON.Vector3(1, 10, 1), scene);

There are three different params for point light −

  • The 1st param is the name of the light.

  • The 2nd param is the position where the point light is placed.

  • The 3rd param is the scene to which the light needs to be attached.

Following properties are used to add color on the object created above −

light0.diffuse = new BABYLON.Color3(1, 0, 0);
light0.specular = new BABYLON.Color3(1, 1, 1);

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( .5, .5, .5);
            
            var camera = new BABYLON.ArcRotateCamera("camera1",  0, 0, 0, new BABYLON.Vector3(0, 0, -0), scene);
            camera.setPosition(new BABYLON.Vector3(0, 0, -100));
            camera.attachControl(canvas, true);
            
            var pl = new BABYLON.PointLight("pl", new BABYLON.Vector3(1, 20, 1), scene);
            pl.diffuse = new BABYLON.Color3(0, 1, 0);
            pl.specular = new BABYLON.Color3(1, 0, 0);
            
            var ground = BABYLON.Mesh.CreateGround("ground", 150, 6, 2, scene);
            return scene;
         };
         var scene = createScene();
         engine.runRenderLoop(function() {
            scene.render();
         });
      </script>
   </body>
</html>

Çıktı

BabylonJS - Yönlü Işık

Yönlü ışıkta, ışık yön tarafından tanımlanır ve nereye yerleştirdiğinize bağlı olarak her yönde yayılır.

var light0 = new BABYLON.DirectionalLight("Dir0", new BABYLON.Vector3(0, -1, 0), scene);

Nokta ışığı için üç farklı parametre vardır -

  • 1 st param ışığın adıdır.

  • 2 nd param pozisyonudur. Şu anda, Y ekseninde negatif -1 ile yerleştirilmiştir.

  • 3 rd param bağlı olmak sahnesi.

Burada speküler ve dağınık özelliği ile renk katabilirsiniz.

light0.diffuse = new BABYLON.Color3(0, 1, 0);
light0.specular = new BABYLON.Color3(1,0, 0);

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( .5, .5, .5);
            
            var camera = new BABYLON.ArcRotateCamera("camera1",  0, 0, 0, new BABYLON.Vector3(0, 0, -0), scene);
            camera.setPosition(new BABYLON.Vector3(0, 0, -100));
            camera.attachControl(canvas, true);
            
            var pl = new BABYLON.DirectionalLight("Dir0", new BABYLON.Vector3(0, -10, 0), scene);
            pl.diffuse = new BABYLON.Color3(0, 1, 0);
            pl.specular = new BABYLON.Color3(1, 0, 0);
            
            var ground = BABYLON.Mesh.CreateGround("ground", 150, 6, 2, scene);
            return scene;
         };
         var scene = createScene();
         engine.runRenderLoop(function() {
            scene.render();
         });
      </script>
   </body>
</html>

Çıktı

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

BabylonJS - Spot Işık

Spot ışık, koni şeklinde düşen ışık gibidir.

Sözdizimi

Spot Işığının sözdizimi aşağıdadır -

var light0 = new BABYLON.SpotLight("Spot0", new BABYLON.Vector3(0, 30, -10), new BABYLON.Vector3(0, -1, 0), 0.8, 2, scene);

Nokta ışığı için beş farklı parametre vardır -

  • 1 st Param ışığın adıdır.
  • 2 nd param pozisyonudur.
  • 3 üncü param yöndür.
  • 4 inci param açısıdır.
  • 5 inci param üssüdür.

Bu değerler, konumdan başlayarak yöne doğru yayılan bir ışık konisini tanımlar. Işığın rengini kontrol etmek için speküler ve dağınık kullanılır.

light0.diffuse = new BABYLON.Color3(1, 0, 0);
light0.specular = new BABYLON.Color3(1, 1, 1);

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( .5, .5, .5);
            
            var camera = new BABYLON.ArcRotateCamera("camera1",  0, 0, 0, new BABYLON.Vector3(0, 0, -0), scene);
            camera.setPosition(new BABYLON.Vector3(0, 0, -100));
            camera.attachControl(canvas, true);
            
            var light0 = new BABYLON.SpotLight("Spot0", new BABYLON.Vector3(0, 30, -10), new BABYLON.Vector3(0, -1, 0), 0.8, 2, scene);
            light0.diffuse = new BABYLON.Color3(0, 1, 0);
            light0.specular = new BABYLON.Color3(1, 0, 0);
            
            var ground = BABYLON.Mesh.CreateGround("ground", 80,80, 2, scene);
            return scene;
         };
         var scene = createScene();
         engine.runRenderLoop(function() {
            scene.render();
         });
      </script>
   </body>
</html>

Çıktı

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

BabylonJS - Hemisferik Işık

Yarım küre bir ışık daha çok çevreyi aydınlatmaktır. Işığın yönü gökyüzüne doğrudur. Işığa 3 renk verilir; biri gökyüzü için, biri yer için ve sonuncusu speküler için.

Sözdizimi

Aşağıda, Yarı Küresel Işık için sözdizimi verilmiştir -

var light0 = new BABYLON.HemisphericLight("Hemi0", new BABYLON.Vector3(0, 1, 0), scene);

Renkler için

light0.diffuse = new BABYLON.Color3(1, 0, 0);
light0.specular = new BABYLON.Color3(0, 1, 0);
light0.groundColor = new BABYLON.Color3(0, 0, 0);

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( .5, .5, .5);
            
            var camera = new BABYLON.ArcRotateCamera("camera1",  0, 0, 0, new BABYLON.Vector3(0, 0, -0), scene);
            camera.setPosition(new BABYLON.Vector3(0, 0, -100));
            camera.attachControl(canvas, true);
            
            var light0 = new BABYLON.HemisphericLight("Hemi0", new BABYLON.Vector3(0, 1, 0), scene);
            light0.diffuse = new BABYLON.Color3(1, 0, 0);
            light0.specular = new BABYLON.Color3(0, 1, 0);
            light0.groundColor = new BABYLON.Color3(0, 0, 0);
            
            var ground = BABYLON.Mesh.CreateGround("ground", 100,100, 2, scene);
            return scene;
         };
         var scene = createScene();
         engine.runRenderLoop(function() {
            scene.render();
         });
      </script>
   </body>
</html>

Çıktı

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

Parametrik şekiller, bükümler, bükümler vb. İle çizilen çizgiler kullanılarak elde edilebilecek farklı şekillere atıfta bulunur. Parabol, sinüs eğrisi, cos eğrisi, Bezier eğrisi vb. Gibi matematiksel denklemlerle oluşturulan 2B bir formdur. Denklemle, koordinatları bulun (x, y) ve aynısı için doğruyu çizin. Bu bölümde şerit, çizgi, çizgi, tüp, ekstrüzyon gibi şekiller göreceğiz. Aşağıda açıklanan parametrik şekillerle, tahtadaki çizgilerin serbest bir el çizimi elde edilebilir.

Sr.No. Parametrik Şekil ve Açıklama
1 Kurdele

Şerit, girdi olarak bir dizi yol alır ve bu yollar boyunca çizgiler çizer. Koordinatları elde etmek için karmaşık mantık kullanır. Aşağıda verilen örnekte, şeridi çizmek için Bezier eğri denklemini kullandık. Bezier eğrileri çoğunlukla 3B oyunlarda düzgün eğrileri modellemek için kullanılır. Eğri, kontrol noktalarına ihtiyaç duyar ve eğri, kontrol noktaları boyunca çizilir.

2 Hat

Çizgi, 3D oyunlarda temel bir unsurdur. Bir çizgi çizmek için, aralarına çizgi çizebileceğiniz iki noktaya ihtiyacınız vardır.

3 Tüp

Tüp, kavisli bir silindir şeklidir. Koordinatları elde etmek için kendisine uygulanan denkleme (matematik fonksiyonu) dayalı olarak farklı parametrik şekiller verebilir.

4 Ekstrüzyon

Ekstrüzyon, 2B bir şeklin hacimsel bir şekle dönüştürülmesine yardımcı olur. 2B ile bir yıldız oluşturmak istediğinizi varsayalım, x, y koordinatlarına sahip olacaksınız ve z, 0 olacaktır. 2B koordinat ekstrüzyonunu yapmak aynı şeyi 3B'ye dönüştürecektir. Yani, ekstrüzyon ile 2D'nin başlangıcı bir 3D olacaktır.Farklı 2D şekilleri deneyebilir ve bunları 3D'ye dönüştürebilirsiniz.

Bu bölümde, ağ oluşturucuyu kullanarak farklı şekiller oluşturmayı öğreneceğiz. Önceki bölümlerimizden birinde nasıl şekil oluşturacağımızı zaten öğrendik.

Aradaki fark, meshbuilder ile size şekillere renk, görüntü ekleme esnekliği sağlamasıdır.

MeshBuilder kullanarak CreateBox

Şimdi MeshBuilder kullanarak nasıl kutu oluşturulacağını görelim.

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, 0, 1);
            
            var camera = new BABYLON.ArcRotateCamera("Camera", 1, 0.8, 10, new BABYLON.Vector3(0, 0, 0), scene);
            camera.attachControl(canvas, true);

            var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(0, 1, 0), scene);
            light.intensity = 0.7;

            var pl = new BABYLON.PointLight("pl", BABYLON.Vector3.Zero(), scene);
            pl.diffuse = new BABYLON.Color3(1, 1, 1);
            pl.specular = new BABYLON.Color3(1, 1, 1);
            pl.intensity = 0.8;

            var mat = new BABYLON.StandardMaterial("mat1", scene);
            mat.alpha = 1.0;
            mat.diffuseColor = new BABYLON.Color3(0, 1, 0);
            
            var texture = new BABYLON.Texture("images/cube.png", scene);
            mat.diffuseTexture = texture;

            var hSpriteNb =  3;  // 3 sprites per raw
            var vSpriteNb =  2;  // 2 sprite raws

            var faceUV = new Array(6);
            for (var i = 0; i < 6; i++) {
               faceUV[i] = new BABYLON.Vector4(i/hSpriteNb, i/vSpriteNb, (i+1)/hSpriteNb, (i+1)/vSpriteNb);
            }

            var options = {
               width: 1.5,
               height: 1.5,
               depth: 1.5,
               faceUV: faceUV
            };

            var box = BABYLON.MeshBuilder.CreateBox("box", options, scene);
            box.material = mat;

            scene.registerBeforeRender(function() { 
               pl.position = camera.position;
            });
            return scene;
         };
         var scene = createScene();
         engine.runRenderLoop(function() {
            scene.render();
         });
      </script>
   </body>
</html>

Çıktı

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

Yukarıdaki örnek için, aşağıda gösterildiği gibi bir hareketli grafik görüntüsü kullandık. Yatay olarak 3 Sütun ve dikey olarak 2 sıraya sahiptir.

Bu demoda, cube.png adlı bir resim kullandık. 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. Lütfen cube.png'nin bir hareketli grafik görüntüsü olduğunu, hareketli görüntü görüntüsünün bir görüntü koleksiyonu olduğunu unutmayın. Görüntüyü bir küp üzerinde göstermek istedik, böylece küpün tüm kenarlarını bir arada istedik. Ayrıca, seçtiğiniz benzer sprite görsellerini indirebilir ve demo bağlantısında kullanabilirsiniz.

CreateBox oluşturucu size boyutlar için seçenekler sunar.

Örneğin,

var box = BABYLON.MeshBuilder.CreateBox("box", options, scene);

Demo

var hSpriteNb =  3;  // 3 sprites per raw ie colums horizontally as shown in the image

var vSpriteNb =  2;  // 2 sprite raws as shown in the image above.

var faceUV = new Array(6); // the cube has 6 sides so creating array for same.
for (var i = 0; i < 6; i++) {
   faceUV[i] = new BABYLON.Vector4(i/hSpriteNb, i/vSpriteNb, (i+1)/hSpriteNb, (i+1)/vSpriteNb);
}

var options = {
   width: 1.5,
   height: 1.5,
   depth: 1.5,
   faceUV: faceUV
};

Buna createBox yöntemini kullanarak dokuları ağ oluşturucuya uygulamak denir. cube.png yatay olarak 3 sütun ve dikey olarak 2 sıraya sahip olan küp veya kutunun 6 kenarı vardır.

Dokuları uygulamak için options parametresini kullanıyoruz. Örneğin,

Var box = BABYLON.MeshBuilder.CreateBox ('box', options, scene);

Küpün kenarları olan 6 boyutunda faceUV adlı bir dizi tanımladık. Bu dizi her zaman Vector4 elemanlarına sahip olacaktır. Her Vector4 (x, y, z, w) aşağıdaki gibi tanımlanacaktır -

  • x = Ubottom
  • y = Vbottom
  • z = Ütop
  • w = Vtop

Vektörler [0, 1] aralığındadır. Ubottom ve Vbottom, doku kırpmanın başladığı sol alt noktanın 2B koordinatlarıdır. Utop, Vtop, doku kırpmanın bittiği sağ üst noktalardır.

var hSpriteNb =  3;  // 3 sprites per raw
var vSpriteNb =  2;  // 2 sprite raws

var faceUV = new Array(6);
for (var i = 0; i < 6; i++) {
   faceUV[i] = new BABYLON.Vector4(i/hSpriteNb, i/vSpriteNb, (i+1)/hSpriteNb, (i+1)/vSpriteNb);
}

Varsayılan dokunun, yani verilen görüntünün kutunun tüm yüzlerine uygulandığını varsayalım. Kutunun yalnızca 1 yüzünü veya 1 tarafını değiştirmek istiyorsanız, değerleri doğrudan aşağıda gösterildiği gibi atayabilirsiniz -

var hSpriteNb =  3;  // 3 sprites per raw
var vSpriteNb =  2;  // 2 sprite raws

var faceUV = new Array(6);
faceUV[4] = new BABYLON.Vector4(0, 0, 1/hSpriteNb, 1/vSpriteNb);

Misal

<!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, 0, 1);
            
            var camera = new BABYLON.ArcRotateCamera("Camera", 1, 0.8, 10, new BABYLON.Vector3(0, 0, 0), scene);
            camera.attachControl(canvas, true);

            var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(0, 1, 0), scene);
            light.intensity = 0.7;

            var pl = new BABYLON.PointLight("pl", BABYLON.Vector3.Zero(), scene);
            pl.diffuse = new BABYLON.Color3(1, 1, 1);
            pl.specular = new BABYLON.Color3(1, 1, 1);
            pl.intensity = 0.8;

            var mat = new BABYLON.StandardMaterial("mat1", scene);
            mat.alpha = 1.0;
            mat.diffuseColor = new BABYLON.Color3(0.8, 0.8, 0.8);
            
            var texture = new BABYLON.Texture("images/3d.png", scene);
            mat.diffuseTexture = texture;

            var hSpriteNb =  3;  // 3 sprites per raw
            var vSpriteNb =  2;  // 2 sprite raws

            var faceUV = new Array(6);
            faceUV[4] = new BABYLON.Vector4(0, 0, 1/hSpriteNb, 1/vSpriteNb);

            var options = {
               width:3,
               height:3,
               depth: 3,
               faceUV:faceUV
            };

            var box = BABYLON.MeshBuilder.CreateBox("box", options, scene);
            box.material = mat;

            scene.registerBeforeRender(function() { 
               pl.position = camera.position;
            });
            return scene;
         };
         var scene = createScene();
         engine.runRenderLoop(function() {
            scene.render();
         });
      </script>
   </body>
</html>

Çıktı

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

Bu demoda 3d.png adlı bir resim kullandık. 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. Lütfen 3d.png'nin bir sprite görüntüsü olduğunu unutmayın; hareketli görüntü, görüntülerden oluşan bir koleksiyondur. Görüntüyü, küpün tüm kenarlarıyla birlikte bir küp üzerinde göstermek istedik. Ayrıca, seçtiğiniz benzer sprite görsellerini indirebilir ve demo bağlantısında kullanabilirsiniz.

Kutu için kullanılan doku - images/3d.png

MeshCylinder

Bu bölümde MeshCylinder'ın nasıl oluşturulacağını göreceğiz.

MeshCylinder oluşturmak için BABYLON.MeshBuilder.CreateCylinder sınıfını kullanmanız gerekir.

Sınıfın parametreleri aşağıdaki gibidir -

var meshcylinder = BABYLON.MeshBuilder.CreateCylinder("meshcylinder", {
   height: 3,
   diameter: 35,
   tessellation: 52
}, scene);

Mesh ve meshbuilder kullanan CreateCylinder arasındaki fark şudur: meshbuilder'daki seçenekleri kullanabilirsiniz. Şu anda silindire geçirilecek seçenekler olarak yükseklik, çap ve mozaik kullanıyoruz. Bu ağ için malzeme olarak tel kafesli standart malzeme kullanıyoruz. Tarayıcıdaki çıktıyı kontrol edin ve silindiri görün. Sahnede dönen bir çark gibi oyununuzda da benzer yapıyı kullanabilirsiniz.

Demo

<!doctype html>
<html>
   <head>
      <meta charset = "utf-8">
      <title>Babylon.js demo - Mesh Builder</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(0.8, 0.8, 0.8);
            
            var camera = new BABYLON.ArcRotateCamera("Camera", -Math.PI / 6, 1.3, 40, new BABYLON.Vector3(0, -3, 0), scene);
            
            var light = new BABYLON.HemisphericLight("hemi", new BABYLON.Vector3(0, 1, 0), scene);

            var mat = new BABYLON.StandardMaterial("mat", scene);
            mat.diffuseColor = new BABYLON.Color3(0.1, .5, 0);
            mat.specularColor = new BABYLON.Color3(0, 0, 0);
            mat.wireframe = true;

            var meshcylinder = BABYLON.MeshBuilder.CreateCylinder("meshcylinder", {
               height: 3,
               diameter: 35,
               tessellation: 52
            }, scene);

            meshcylinder.material = mat;
            meshcylinder.position = new BABYLON.Vector3(0, 0, 0);

            scene.activeCamera.attachControl(canvas);
            return scene;
         };
         
         var scene = createScene();
         engine.runRenderLoop(function() {
            scene.render();
         });
      </script>
   </body>
</html>

Çıktı

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

Ağ oluşturucu ile oluşturulan bir dizi şekil artık tek bir demoda birlikte kullanılacaktır. Aşağıdaki demo bağlantısında kapsanan şekiller sonraki bölümlerde listelenmiştir.

  • Ground

  • Cone

  • Plane

  • Disc

  • Torus

  • Polyhedron

  • IcoSphere

BabylonJS - Mesh Kesişimi ve Noktası

Oyunlarda Mesh Kesişimi, bir oyunda 2 nesne kesiştiğinde ne yapılması gerektiğini bildiğiniz için önemlidir. Aynı kavram, ağlar kesiştiğinde yakalanması gereken olay üzerine aşağıdaki demoda açıklanmıştır.

Aşağıda verilen demoda, aşağıdaki iki kavramı ele aldık -

  • Kesişim Mesh
  • Kesişim Noktası
<!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, 1, 1);
            
            var camera = new BABYLON.ArcRotateCamera("ArcRotateCamera", 1, 0.8, 20, new BABYLON.Vector3(0, 0, 0), scene);
            camera.attachControl(canvas, true);

            var matcone = new BABYLON.StandardMaterial("mat1", scene);
            matcone.alpha = 1.0;
            matcone.diffuseColor = new BABYLON.Color3(0, 0, 0);
            matcone.wireframe = true;

            var cone = BABYLON.MeshBuilder.CreateCylinder("cone", {height : 10, diameterTop: 10,diameterBottom:10, tessellation: 5}, scene);
            cone.position= new BABYLON.Vector3(12,1,0);
            cone.material = matcone;	

            var balloon1 = BABYLON.Mesh.CreateSphere("balloon1",5, 1.0, scene);
            var balloon2 = BABYLON.Mesh.CreateSphere("balloon2", 5, 1.0, scene);
            var balloon3 = BABYLON.Mesh.CreateSphere("balloon3", 5, 1.0, scene);
            
            balloon1.material = new BABYLON.StandardMaterial("matBallon", scene);
            balloon2.material = new BABYLON.StandardMaterial("matBallon", scene);
            balloon3.material = new BABYLON.StandardMaterial("matBallon", scene);

            balloon1.position = new BABYLON.Vector3(4, 2, 0);
            balloon2.position = new BABYLON.Vector3(5, 1, 0);
            balloon3.position = new BABYLON.Vector3(7, 0, 0);

            var pointToIntersect = new BABYLON.Vector3(10, 0, 0);
            var a = 0.01;
            
            scene.registerBeforeRender(function () {
               if (balloon1.intersectsMesh(cone, false)) {
                  balloon1.material.emissiveColor = new BABYLON.Color3(1, 0, 0);
               } 
               else {
                  balloon1.material.emissiveColor = new BABYLON.Color3(0, 1, 0);
               }

               if (balloon2.intersectsMesh(cone, false)) {
                  balloon2.material.emissiveColor = new BABYLON.Color3(1, 0, 0);
               } 
               else {
                  balloon2.material.emissiveColor = new BABYLON.Color3(0, 1, 0);
               }

               if (balloon3.intersectsMesh(cone, false)) {
                  balloon3.material.emissiveColor = new BABYLON.Color3(1, 0, 0);
               } 
               else {
                  balloon3.material.emissiveColor = new BABYLON.Color3(0, 1, 0);
               }

               if (balloon3.intersectsPoint(pointToIntersect)) {
                  balloon3.material.emissiveColor = new BABYLON.Color3(0, 0, 0);
               }

               a += 0.01;
               balloon1.position.x += Math.cos(a) / 10;
               balloon2.position.x += Math.cos(a) / 10;
               balloon3.position.x += Math.cos(a) / 10;
            });
            return scene;
         };
         var scene = createScene();
         engine.runRenderLoop(function() {
            scene.render();
         });
      </script>
   </body>
</html>

Çıktı

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

Açıklama

Yukarıdaki kodla, tel kafesli bir silindir oluşturduk. 3 küre oluşturduk. Kürenin orijinal rengi yeşildir.

İçinde scene.registerBeforeRender işlevi, burada silindir olan ağ ile kesişme temelinde kürenin rengini değiştireceğiz.

Aşağıdaki kodu göz önünde bulundurun registerBeforeRender -

if (balloon1.intersectsMesh(cone, false)) {
   balloon1.material.emissiveColor = new BABYLON.Color3(1, 0, 0);
} else {
   balloon1.material.emissiveColor = new BABYLON.Color3(0, 1, 0);
}

intersectsMesh kendisine iletilen parametrede verilen ağ ile kesişirse doğru veya yanlış verir.

Örneğin,

balloon1.intersectsMesh(cone, false); //cone refers to the cylinder mesh here.

Kürenin rengi kırmızıya dönüşür ve silindirle kesişir; aksi takdirde yeşildir.

Kesişme noktası için aşağıdaki kod kullanılır -

var pointToIntersect = new BABYLON.Vector3(10, 0, 0);
if (balloon3.intersectsPoint(pointToIntersect)) {
   balloon3.material.emissiveColor = new BABYLON.Color3(0, 0, 0);
}

Buraya, pointtoIntersectdeğişken, x ekseninde 10 olan konum vektörüdür. Küre kesişme noktasını geçerse, kürenin rengi siyaha dönüşür.

BabylonJS - MeshPicking Collision

Çarpışma seçmek aslında size koordinatları verir ve ağınızı o yere konumlandırabilirsiniz. Nesne fare ile seçilir ve farenizle tıkladığınız yere yerleştirebilirsiniz. Kullanıcının fareyi tıkladığı bir yere bir ağ (nesne) yerleştirmeniz gerektiğini düşünün; bu yüzden, çarpışma seçme yardımıyla, tıklanan yerin konumundaki koordinatlarla size yardımcı olur.

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(1, 1, 1);

            // setup environment
            var light0 = new BABYLON.PointLight("Omni", new BABYLON.Vector3(0, 10, 20), scene);
            var freeCamera = new BABYLON.FreeCamera("FreeCamera", new BABYLON.Vector3(0, 0, -30), scene);

            var balloon1 = BABYLON.Mesh.CreateSphere("balloon1",5, 1.0, scene);
            var balloon2 = BABYLON.Mesh.CreateSphere("balloon2", 5, 1.0, scene);
            balloon1.material = new BABYLON.StandardMaterial("matBallon", scene);
            balloon2.material = new BABYLON.StandardMaterial("matBallon", scene);

            balloon1.position = new BABYLON.Vector3(0, 0, -0.1);
            balloon2.position = new BABYLON.Vector3(0, 0, -0.1);
            balloon1.material.emissiveColor = new BABYLON.Color3(1, 0, 0);
            balloon2.material.emissiveColor = new BABYLON.Color3(0, 0, 1);

            //Wall
            var wall = BABYLON.Mesh.CreatePlane("wall", 30.0, scene);
            wall.material = new BABYLON.StandardMaterial("wallMat", scene);
            wall.material.emissiveColor = new BABYLON.Color3(0.5, 1, 0.5);

            //When pointer down event is raised

            scene.onPointerDown = function (evt, pickResult) {
               // if the click hits the ground object, we change the impact position
               if (pickResult.hit) {
                  var dateValue = new Date();
                  var secondNumber = dateValue.getSeconds();
                  if (secondNumber % 2 == 0) {
                  balloon1.position.x = pickResult.pickedPoint.x;
                  balloon1.position.y = pickResult.pickedPoint.y;
                  } else {
                     balloon2.position.x = pickResult.pickedPoint.x;
                     balloon2.position.y = pickResult.pickedPoint.y;
                  }
               }
            };
            return scene;
         };
         var scene = createScene();
         engine.runRenderLoop(function() {
            scene.render();
         });
      </script>
   </body>
</html>

Çıktı

Açıklama

Yukarıdaki örnekte, bir düzlem ve 2 küre kullandık. Bu çıktıyı oluşturmak için aşağıdaki kodu kullanın -

scene.onPointerDown = function (evt, pickResult) {
   
   // if the click hits the ground object, we change the impact position
   if (pickResult.hit) {
      var dateValue = new Date();
      var secondNumber = dateValue.getSeconds();
      if (secondNumber % 2 == 0) {
      balloon1.position.x = pickResult.pickedPoint.x;
      balloon1.position.y = pickResult.pickedPoint.y;
      } 
      else {
         balloon2.position.x = pickResult.pickedPoint.x;
         balloon2.position.y = pickResult.pickedPoint.y;
      }
   }
};

Olay scene.onPointerDown size örneğimizde koordineli -x, y ve z'yi verir pickResult.

Ground mesh'e tıklarsanız pickResult.hit'i true olarak verir. Tek / çift saniyeleri dikkate alırız ve yukarıda gösterildiği gibi sonuç z ve y koordinatlarını seçmek için kürenin konumunu değiştiririz. Konum değiştirildiğinde küre, tıkladığınız ve farenizi konumlandırdığınız yere yerleştirilir. Aynı şekilde yukarıdaki demoyu deneyebilirsiniz.

BabylonJS - Raycast'ler

Raycast'ler güneş ışınları gibidir ve sahnedeki çarpışmayı ve kesişmeyi kontrol etmek için kullanılır.

Sözdizimi

var ray = new BABYLON.Ray(origin, direction, length);

Parametreler

Raycast'ler için aşağıdaki parametreleri göz önünde bulundurun -

  • Origin - Işının başlayacağı yer.

  • Direction - Işın yönü aşağıdaki gibi hesaplanır -

var forward = new BABYLON.Vector3(0,0,1);		
forward = vecToLocal(forward, box);
var direction = forward.subtract(origin);

Sonra, yönü elde etmek için, onu başlangıç ​​noktasından, kutu konumundan çıkarıyoruz -

  • Length - Işının uzunluğu.

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

            var light = new BABYLON.PointLight("Omni", new BABYLON.Vector3(0, 100, 100), scene);
            
            var camera = new BABYLON.ArcRotateCamera("Camera", 0, 0.8, 100, new BABYLON.Vector3.Zero(), scene);
            camera.attachControl(canvas, true);

            var ground = BABYLON.Mesh.CreateGround("ground", 500, 500, 10, scene);

            var box = BABYLON.Mesh.CreateBox("box", 4.0, scene);
            box.position.y = 2;
            box.scaling.z = 2;
           
            var matBox = new BABYLON.StandardMaterial("matBox", scene);
            matBox.diffuseColor = new BABYLON.Color3(0.8, 0.1, 0.5);
            box.material = matBox;
            box.isPickable = false; 

            var box2 = BABYLON.Mesh.CreateBox("box2", 8.0, scene);
            box2.position = new BABYLON.Vector3(-20, 4, 0); 
            
            var matBox2 = new BABYLON.StandardMaterial("matBox2", scene);
            matBox2.diffuseColor = new BABYLON.Color3(1, 0, 0);
            box2.material = matBox2;

            var box3 = BABYLON.Mesh.CreateBox("box3", 8.0, scene);
            box3.position = new BABYLON.Vector3(20, 4, 0); 
            
            var matBox3 = new BABYLON.StandardMaterial("matBox3", scene);
            matBox3.diffuseColor = new BABYLON.Color3(1, 0, 0);
            box3.material = matBox3;

            var box4 = BABYLON.Mesh.CreateBox("box4", 8.0, scene);
            box4.position = new BABYLON.Vector3(0, 0, 20); 
            
            var matBox4 = new BABYLON.StandardMaterial("matBox4", scene);
            matBox4.diffuseColor = new BABYLON.Color3(0, 1, 0);
            box4.material = matBox4;

            var box5 = BABYLON.Mesh.CreateBox("box5", 8.0, scene);
            box5.position = new BABYLON.Vector3(0, 0, -20); 
            
            var matBox5 = new BABYLON.StandardMaterial("matBox5", scene);
            matBox5.diffuseColor = new BABYLON.Color3(0, 1, 0);
            box5.material = matBox5;

            function mousemovef() {
               var pickResult = scene.pick(scene.pointerX, scene.pointerY);

               if (pickResult.hit) {
                  var diffX = pickResult.pickedPoint.x - box.position.x;
                  var diffY = pickResult.pickedPoint.z - box.position.z;
                  box.rotation.y = Math.atan2(diffX,diffY);			
               }	
            }

            scene.onPointerMove = function () {
               mousemovef();
            };

            function vecToLocal(vector, mesh) {
               var m = mesh.getWorldMatrix();
               var v = BABYLON.Vector3.TransformCoordinates(vector, m);
               return v;		
            }   

            scene.registerBeforeRender(function () {
               var origin = box.position;

               var forward = new BABYLON.Vector3(0,0,1);		
               forward = vecToLocal(forward, box);

               var direction = forward.subtract(origin);
               direction = BABYLON.Vector3.Normalize(direction);

               var length = 100;

               var ray = new BABYLON.Ray(origin, direction, length);
               // ray.show(scene, new BABYLON.Color3(1, 1, 0.1));

               var hit = scene.pickWithRay(ray);

               if (hit.pickedMesh) {
                  hit.pickedMesh.scaling.y  += 0.01;
               }
            });		
            return scene;
         };
         var scene = createScene();
         engine.runRenderLoop(function() {
            scene.render();
         });
      </script>
   </body>
</html>

Çıktı

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

Açıklama

Merkezde ışın yayını olarak görev yapan bir ana kutu var. Kutulardan herhangi birine işaret ettiği anda, kutunun boyutu artacaktır. Bu konsept, oyun oynarken başka hangi nesnenin temasa geçtiğini ve gerekli önlemlerin alınabileceğini bilmek için yararlı olduğunu kanıtlıyor.

Ekleme box.isPickable = false;böylece merkezdeki ana kutu dikkate alınmaz. Işınlara herhangi bir nesnenin temas etmesini istemiyorsanız ekleyinbox.isPickable = false; ona.

Aşağıdaki kod, ışın tarafından seçilen kutunun ölçeklendirmesini ekler.

scene.registerBeforeRender(function () {
   var origin = box.position;	
   var forward = new BABYLON.Vector3(0,0,1);		
   forward = vecToLocal(forward, box);

   var direction = forward.subtract(origin);
   direction = BABYLON.Vector3.Normalize(direction);

   var length = 100;

   var ray = new BABYLON.Ray(origin, direction, length);

   var hit = scene.pickWithRay(ray);

   if (hit.pickedMesh) {
      hit.pickedMesh.scaling.y  += 0.01;
   }
});

var ray = new BABYLON.Ray(origin, direction, length); bir ışın oluşturur ve ana kutu konumunu başlangıç ​​noktası olarak alır.

Işın yönü aşağıdaki gibi hesaplanır -

var forward = new BABYLON.Vector3(0,0,1);		
forward = vecToLocal(forward, box);
var direction = forward.subtract(origin);

Daha sonra yönü elde etmek için onu orijinden, kutu konumundan çıkarıyoruz. İşlevvecToLocal , bir vektörü kafes matrisi ile çarparak, bir konumu kafes bakış açısından dönüştürmek için tasarlanmıştır.

Işını kullanarak vuruş noktasını alıyoruz var hit = scene.pickWithRay(ray);

Işının ağ ile çakıştığı konumu verir.

Ölçeklendirme, aşağıdaki kod satırının yürütülmesiyle seçilen ağa uygulanır -

if (hit.pickedMesh) {
   hit.pickedMesh.scaling.y  += 0.01;
}

Çıktıyı görmek için tarayıcıda yukarıdaki örneği deneyin.

Doğrulama işlevli Raycast

Şimdi tahmin işlevli raycast'in nasıl çalıştığını ve rayhelper ile gösterilen yönü görelim.

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

            var light = new BABYLON.PointLight("Omni", new BABYLON.Vector3(0, 100, 100), scene);
            var camera = new BABYLON.ArcRotateCamera("Camera", 0, 0.8, 100, new BABYLON.Vector3.Zero(), scene);
            camera.attachControl(canvas, true);

            var ground = BABYLON.Mesh.CreateGround("ground", 500, 500, 10, scene);

            var box = BABYLON.Mesh.CreateBox("box", 4.0, scene);
            box.position.y = 2;
            box.scaling.z = 2;
            var matBox = new BABYLON.StandardMaterial("matBox", scene);
            matBox.diffuseColor = new BABYLON.Color3(0.8, 0.1, 0.5);
            box.material = matBox;
            box.isPickable = false; 

            var box2 = BABYLON.Mesh.CreateBox("box2", 8.0, scene);
            box2.position = new BABYLON.Vector3(-20, 4, 0); 
            var matBox2 = new BABYLON.StandardMaterial("matBox2", scene);
            matBox2.diffuseColor = new BABYLON.Color3(1, 0, 0);
            box2.material = matBox2;

            var box3 = BABYLON.Mesh.CreateBox("box3", 8.0, scene);
            box3.position = new BABYLON.Vector3(20, 4, 0); 
            var matBox3 = new BABYLON.StandardMaterial("matBox3", scene);
            matBox3.diffuseColor = new BABYLON.Color3(1, 0, 0);
            box3.material = matBox3;

            var box4 = BABYLON.Mesh.CreateBox("box4", 8.0, scene);
            box4.position = new BABYLON.Vector3(0, 0, 20); 
            var matBox4 = new BABYLON.StandardMaterial("matBox4", scene);
            matBox4.diffuseColor = new BABYLON.Color3(0, 1, 0);
            box4.material = matBox4;

            var box5 = BABYLON.Mesh.CreateBox("box5", 8.0, scene);
            box5.position = new BABYLON.Vector3(0, 0, -20); 
            var matBox5 = new BABYLON.StandardMaterial("matBox5", scene);
            matBox5.diffuseColor = new BABYLON.Color3(0, 1, 0);
            box5.material = matBox5;

            //ray showing the direction
            var ray = new BABYLON.Ray();
            var rayHelper = new BABYLON.RayHelper(ray);

            var localMeshDirection = new BABYLON.Vector3(0, 0, -1);
            var localMeshOrigin = new BABYLON.Vector3(0, 0, -.4);
            var length = 10;

            rayHelper.attachToMesh(box, localMeshDirection, localMeshOrigin, length);
            rayHelper.show(scene);

            function mousemovef() {
               var pickResult = scene.pick(scene.pointerX, scene.pointerY);

               if (pickResult.hit) {
                  var diffX = pickResult.pickedPoint.x - box.position.x;
                  var diffY = pickResult.pickedPoint.z - box.position.z;
                  box.rotation.y = Math.atan2(diffX,diffY);			
               }	
            }

            scene.onPointerMove = function () {
               mousemovef();
            };

            function vecToLocal(vector, mesh) {
               var m = mesh.getWorldMatrix();
               var v = BABYLON.Vector3.TransformCoordinates(vector, m);
               return v;		
            }   

            scene.registerBeforeRender(function () {
               var origin = box.position;
               function predicate(mesh) {
                  if (mesh == box2 || mesh == box || mesh == box5) {
                     return false;
                  }
                  return true;
               }
               
               var forward = new BABYLON.Vector3(0,0,1);		
               forward = vecToLocal(forward, box);

               var direction = forward.subtract(origin);
               direction = BABYLON.Vector3.Normalize(direction);

               var length = 100;

               var ray = new BABYLON.Ray(origin, direction, length);
               // ray.show(scene, new BABYLON.Color3(1, 1, 0.1));

               var hit = scene.pickWithRay(ray, predicate);
               if (hit.pickedMesh) {
                  hit.pickedMesh.scaling.y  += 0.01;
               }
            });		
            return scene;
         };
         var scene = createScene();
         engine.runRenderLoop(function() {
            scene.render();
         });
      </script>
   </body>
</html>

Çıktı

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

Açıklama

Doğrulama işlevli Raycast, istediğimiz ağı seçmemize yardımcı olur. Bir ağın seçilmesini istemiyorsak, aynı şeyi göz ardı edebiliriz.

function predicate(mesh) {
   if (mesh == box2 || mesh == box || mesh == box5) {
      return false;
   }
   return true;
}

Yukarıdaki işlev, ışın tarafından seçilen ağı verir. Seçilen ağ kutu2, kutu veya kutu5 ise, yanlış döndürür; aksi takdirde true.

Aynı şekilde yukarıdaki örneği deneyebilirsiniz.

BabylonJS - Mesh Gölgeler

Gölgeler, ışığın oluşturulan ağa düşme şekline göre oluşturulur. Çıktının 3B dünyada gerçekçi görünmesini sağlamada önemli bir rol oynarlar.

Şimdi babylonj'leri kullanarak nasıl gölge yaratılacağını öğrenelim.

Sözdizimi

var shadowGenerator00 = new BABYLON.ShadowGenerator(shadowsize, light);

Parametreler

Kafes gölgeleriyle ilgili aşağıdaki parametreleri göz önünde bulundurun -

  • Shadowsize - Gölgenin boyutu.

  • Light - Sahnede kullanılan ışık.

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(1, 1, 1);	
            var camera = new BABYLON.ArcRotateCamera("ArcRotateCamera", 1, 0.8, 20, new BABYLON.Vector3(0, 0, 0), scene);
            camera.attachControl(canvas, true);
            // light1
            var light = new BABYLON.DirectionalLight("dir01", new BABYLON.Vector3(-1, -2, -1), scene);
            light.position = new BABYLON.Vector3(20, 40, 20);

            var ground01 = BABYLON.Mesh.CreateGround("Spotlight Hard Shadows", 24, 60, 1, scene, false);
            var groundMaterial = new BABYLON.StandardMaterial("ground", scene);
            groundMaterial.diffuseTexture = new BABYLON.Texture("images/gr1.jpg", scene);
            groundMaterial.specularColor = new BABYLON.Color3(0, 0, 0);
            groundMaterial.emissiveColor = new BABYLON.Color3(0.2, 0.2, 0.2);

            ground01.material = groundMaterial;
            ground01.receiveShadows = true;
            ground01.position.x = -5;

            var box = BABYLON.Mesh.CreateBox("box", 3.0, scene);
            box.position.x = -5;
            box.position.y = 5;
            var shadowGenerator00 = new BABYLON.ShadowGenerator(512, light);
            shadowGenerator00.getShadowMap().renderList.push(box);
            //shadowGenerator00.usePoissonSampling = true;
            //shadowGenerator00.useExponentialShadowMap = true;
            shadowGenerator00.useBlurExponentialShadowMap = true;
            shadowGenerator00.bias = 0.01;
            scene.registerBeforeRender(function() {
               box.rotation.x += 0.01;
               box.rotation.x += 0.01;
            });
            return scene;
         };
         var scene = createScene();
         engine.runRenderLoop(function() {
            scene.render();
         });
      </script>
   </body>
</html>

Çıktı

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

Açıklama

Gölgeler oluşturmak için, gölge oluşturucuyu oluşturmanız gerekir. Aşağıda gösterilen bir örneği düşünün.

var shadowGenerator00 = new BABYLON.ShadowGenerator(512, light);

Gölgenin gerekli olduğu ağı tanımlamak için, aynısını yukarıdaki jeneratöre eklemeniz gerekir.

shadowGenerator00.getShadowMap().renderList.push(box);

Şimdi bunun üzerine bir zemin ve bir kutu oluşturduk. Kutunun gölgesinin yere düşmesini istiyoruz. Bunu yapmak için, zeminin aşağıdaki gibi gölge alacak şekilde işaretlendiğinden emin olmalıyız -

ground01.receiveShadows = true;

Gölgeler için aşağıdaki gibi bazı filtreler mevcuttur -

shadowGenerator.usePoissonSampling = true; - Called Poisson sampling 
shadowGenerator.useExponentialShadowMap = true; - Exponential Shadow Map
shadowGenerator.useBlurExponentialShadowMap= true;  - Blur Exponential Shadow Map

Demomuzda shadowGenerator00.useBlurExponentialShadowMap = true; Diğerlerini deneyebilir ve çıktının nasıl göründüğünü görebilirsiniz.

Burada gr1.jpg adlı görüntüyü kullandık. Görüntüler yerel olarak görüntülerde / klasörde saklanır. İstediğiniz herhangi bir görseli indirebilir ve demo bağlantısında kullanabilirsiniz.

BabylonJS - Ağlarda Gelişmiş Dokular

Bu bölümde, ağlar üzerindeki gelişmiş dokular hakkında bilgi edineceğiz. Farklı dokular aşağıda gösterilmiştir -

  • Küp Doku

  • Ayna ve Çarpma Dokusu

  • Video Doku

Ağa biraz karmaşık doku uygulayalım - ayna, çarpma, video ve kırılma.

Sr.No. Örgü ve Açıklama
1 MeshHightlight Katmanı

Vurgu katmanı, sahnedeki ağı vurgulamak için kullanılır. Ona renk verebilirsiniz ve renk ağın kenarlarına uygulanır. Bir oyunda vurgulamak istediğinizde, mesh hightlight katmanı aynı şekilde kullanılabilir.

2 Bir Mesh'i Biçimlendir

Morphing, bir nesnenin şeklini bazı geçiş yöntemleriyle değiştirir. Şekiller için güncellenebilir parametreyi gördük; aksi takdirde parametre false olarak ayarlanır. Morphing için, true olarak ayarlanır ve mesh, şekli değiştirmek için güncellenir.

3 Mesh için Eylemler

Eylemler, ağa etkileşim eklemek için kullanılır. Mesh'e tıkladığınızda veya mesh kesiştiğinde veya çarpıştığında olaylar etkinleştirilir.

4 Mesh AssetsManager

Assestsmanager sınıfı ile sahneye ağlar, görüntüler ve ikili dosyalar yükleyebilirsiniz.

5 Mesh İçe Aktar

Import Mesh kullanarak öğreneceğiz.

6 Mesh Morph Hedefleri

Halihazırda çizgilerin, şeritlerin, çokgenlerin vb. Morphingini görmüştük. Şimdi, bu demoda kürenin ve kutunun dönüşümünü göreceğiz. Morph hedefleriyle, aşağıdaki demoda görülen kürenin şekli değiştirilir.

7 Mesh Örnekleri

Sahnenizde aynı ağları çizmek istiyorsanız örneklerden yararlanın.

8 Mesh LOD ve Örnekler

LOD, mesafe çizgisi anlamına gelir. Bu özellik, izleyicinin mesafesine göre kafesleri belirlemenize olanak tanır. İzleyiciden nesneye olan mesafe arttıkça, ağın ayrıntı seviyesi LOD kullanılarak açıkça gösterilir.

9 Mesh VolumemetricLightS Dağıtma İşlem Sonrası

Bu işlem ışığı aşağıda verilen çıktıda gösterildiği gibi dağıtır. Aynısını tarayıcıda test edin ve ışığın ağ boyunca nasıl dağıldığını göreceksiniz.

10 Mesh KenarlarıRenderer

EdgesRendering, yukarıdaki çıktıda gösterildiği gibi ağın etrafına egdes çizmek için kullanılır.

11 Mesh Karışım Modları

Malzemelerin alfamodunu değiştirerek bir karışım modu oluşturabilirsiniz.

12 Mesh SolidParticles

SolidParticle Sistemi bir ağ üzerinde güncellenir. Bir ağ üzerinde gördüğümüz tüm özellikler katı partikül üzerinde kullanılabilir.

13 Mesh FacetData

Faset verileri hafızada çok yer kaplar ve bu özellik varsayılan olarak etkin değildir. Bunu etkinleştirmek için, gerektiği gibi bir ağ oluşturmalı ve faset verilerini ona güncellemeliyiz.

Tarayıcınızda aşağıda verilen demo bağlantılarını çalıştırın. Aşağıda verilen demolarda x, y ve z eksenini çizdik. X, y ve z ekseninde pozitif ve negatif yönde çizilen sayılar vardır. Aynısını tarayıcıda çalıştırın, ihtiyacınız olması durumunda değerleri değiştirin ve şekillerinizi, ağlarınızı çizin, konumlandırın ve x, y ve z eksenlerinde nasıl işlediklerini görün. X, y ve z ekseninde belirtilen sayılarla, ağın konumlandırmasının nasıl yapıldığını görmek yardımcı olacaktır.

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( .5, .5, .5);

            // camera
            var camera = new BABYLON.ArcRotateCamera("camera1",  0, 0, 0, new BABYLON.Vector3(5, 3, 0), scene);
            camera.setPosition(new BABYLON.Vector3(5, 10, -10));
            camera.attachControl(canvas, true);
            
            // lights
            var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(1, 0.5, 0), scene);
            light.intensity = 0.8;
            var spot = new BABYLON.SpotLight(
               "spot", 
               new BABYLON.Vector3(25, 15, -10), 
               new BABYLON.Vector3(-1, -0.8, 1), 15, 1, scene);
            spot.diffuse = new BABYLON.Color3(1, 1, 1);
            spot.specular = new BABYLON.Color3(0, 0, 0);
            spot.intensity = 0.2; 
            
            // material
            var mat = new BABYLON.StandardMaterial("mat1", scene);
            mat.alpha = 1.0;
            mat.diffuseColor = new BABYLON.Color3(0.5, 0.5, 1.0);
            mat.backFaceCulling = false;
            //mat.wireframe = true;

            // show axis
            var showAxis = function(size) {
               var makeTextPlane = function(text, color, size) {
                  var dynamicTexture = new BABYLON.DynamicTexture("DynamicTexture", 50, scene, true);
                  dynamicTexture.hasAlpha = true;
                  dynamicTexture.drawText(text, 5, 40, "bold 36px Arial", color , "transparent", true);
                  
                  var plane = new BABYLON.Mesh.CreatePlane("TextPlane", size, scene, true);
                  plane.material = new BABYLON.StandardMaterial("TextPlaneMaterial", scene);
                  plane.material.backFaceCulling = false;
                  
                  plane.material.specularColor = new BABYLON.Color3(0, 0, 0);
                  plane.material.diffuseTexture = dynamicTexture;
                  return plane;
               };

               var axisX = BABYLON.Mesh.CreateLines("axisX", [ 
                  new BABYLON.Vector3(-size * 0.95, 0.05 * size, 0),
                  new BABYLON.Vector3(-size, 0, 0), 
                  new BABYLON.Vector3(-size * 0.95, -0.05 * size, 0),
                  new BABYLON.Vector3(-size, 0, 0),
                  new BABYLON.Vector3.Zero(), 
                  new BABYLON.Vector3(size, 0, 0), 
                  new BABYLON.Vector3(size * 0.95, 0.05 * size, 0), 
                  new BABYLON.Vector3(size, 0, 0), 
                  new BABYLON.Vector3(size * 0.95, -0.05 * size, 0)
               ], scene);
               
               axisX.color = new BABYLON.Color3(1, 0, 0);
               var xChar = makeTextPlane("X", "red", size / 10);
               xChar.position = new BABYLON.Vector3(0.9 * size, -0.05 * size, 0);

               var xChar1 = makeTextPlane("-X", "red", size / 10);
               xChar1.position = new BABYLON.Vector3(-0.9 * size, 0.05 * size, 0);

               var axisY = BABYLON.Mesh.CreateLines("axisY", [
                  new BABYLON.Vector3( -0.05 * size, -size * 0.95, 0),
                  new BABYLON.Vector3(0, -size, 0),
                  new BABYLON.Vector3(0.05 * size, -size * 0.95, 0),
                  new BABYLON.Vector3(0, -size, 0), 
                  new BABYLON.Vector3.Zero(), 
                  new BABYLON.Vector3(0, size, 0), 
                  new BABYLON.Vector3( -0.05 * size, size * 0.95, 0), 
                  new BABYLON.Vector3(0, size, 0), 
                  new BABYLON.Vector3( 0.05 * size, size * 0.95, 0)
               ], scene);
               
               axisY.color = new BABYLON.Color3(0, 1, 0);
               var yChar = makeTextPlane("Y", "green", size / 10);
               yChar.position = new BABYLON.Vector3(0, 0.9 * size, -0.05 * size);
               var yChar1 = makeTextPlane("-Y", "green", size / 10);
               yChar1.position = new BABYLON.Vector3(0, -0.9 * size, 0.05 * size);

               var axisZ = BABYLON.Mesh.CreateLines("axisZ", [
                  new BABYLON.Vector3( 0 , -0.05 * size, -size * 0.95), 
                  new BABYLON.Vector3(0, 0, -size),
                  new BABYLON.Vector3( 0 , 0.05 * size, -size * 0.95),
                  new BABYLON.Vector3(0, 0, -size), 
                  new BABYLON.Vector3.Zero(), 
                  new BABYLON.Vector3(0, 0, size), 
                  new BABYLON.Vector3( 0 , -0.05 * size, size * 0.95),
                  new BABYLON.Vector3(0, 0, size), 
                  new BABYLON.Vector3( 0, 0.05 * size, size * 0.95)
               ], scene);
               
               axisZ.color = new BABYLON.Color3(0, 0, 1);
               var zChar = makeTextPlane("Z", "blue", size / 10);
               zChar.position = new BABYLON.Vector3(0, 0.05 * size, 0.9 * size);
               var zChar1 = makeTextPlane("-Z", "blue", size / 10);
               zChar1.position = new BABYLON.Vector3(0, 0.05 * size, -0.9 * size);
            };
            showAxis(10);
            return scene;
         };
         var scene = createScene();
         engine.runRenderLoop(function() {
            scene.render();
         });
      </script>
   </body>
</html>

Çıktı

Koordinatları x, y ve z ekseni boyunca tanımlayalı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( .5, .5, .5);

            // camera
            var camera = new BABYLON.ArcRotateCamera("camera1",  0, 0, 0, new BABYLON.Vector3(5, 3, 0), scene);
            camera.setPosition(new BABYLON.Vector3(5, 10, -10));
            camera.attachControl(canvas, true);
            
            // lights
            var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(1, 0.5, 0), scene);
            light.intensity = 0.8;
            var spot = new BABYLON.SpotLight(
               "spot", new BABYLON.Vector3(25, 15, -10), 
               new BABYLON.Vector3(-1, -0.8, 1), 15, 1, scene);
            spot.diffuse = new BABYLON.Color3(1, 1, 1);
            spot.specular = new BABYLON.Color3(0, 0, 0);
            spot.intensity = 0.2; 
            
            // material
            var mat = new BABYLON.StandardMaterial("mat1", scene);
            mat.alpha = 1.0;
            mat.diffuseColor = new BABYLON.Color3(0.5, 0.5, 1.0);
            mat.backFaceCulling = false;
            
            //mat.wireframe = true;
            var makeTextPlane = function(text, color, size) {
               var dynamicTexture = new BABYLON.DynamicTexture("DynamicTexture", 50, scene, true);
               dynamicTexture.hasAlpha = true;
               dynamicTexture.drawText(text, 5, 40, "bold 36px Arial", color , "transparent", true);
               
               var plane = new BABYLON.Mesh.CreatePlane("TextPlane", size, scene, true);
               plane.material = new BABYLON.StandardMaterial("TextPlaneMaterial", scene);
               plane.material.backFaceCulling = false;
               plane.material.specularColor = new BABYLON.Color3(0, 0, 0);
               plane.material.diffuseTexture = dynamicTexture;
               return plane;
            };
            
            // show axis
            var showAxis = function(size) {
               var axisX = BABYLON.Mesh.CreateLines("axisX", [ 
                  new BABYLON.Vector3(-size * 0.95, 0.05 * size, 0),
                  new BABYLON.Vector3(-size, 0, 0), 
                  new BABYLON.Vector3(-size * 0.95, -0.05 * size, 0),
                  new BABYLON.Vector3(-size, 0, 0),
                  new BABYLON.Vector3.Zero(), 
                  new BABYLON.Vector3(size, 0, 0), 
                  new BABYLON.Vector3(size * 0.95, 0.05 * size, 0), 
                  new BABYLON.Vector3(size, 0, 0), 
                  new BABYLON.Vector3(size * 0.95, -0.05 * size, 0)
               ], scene);
               axisX.color = new BABYLON.Color3(1, 0, 0);
               var xChar = makeTextPlane("X", "red", size / 10);
               xChar.position = new BABYLON.Vector3(0.9 * size, -0.05 * size, 0);

               var xChar1 = makeTextPlane("-X", "red", size / 10);
               xChar1.position = new BABYLON.Vector3(-0.9 * size, 0.05 * size, 0);
               var xcor = [];
               for (i =- 10; i <= 10; i++) {
                  xcor[i] = makeTextPlane(i, "red", size / 10);
                  xcor[i].position = new BABYLON.Vector3(i, 0, 0);
               }

               var axisY = BABYLON.Mesh.CreateLines("axisY", [
                  new BABYLON.Vector3( -0.05 * size, -size * 0.95, 0),
                  new BABYLON.Vector3(0, -size, 0),
                  new BABYLON.Vector3(0.05 * size, -size * 0.95, 0),
                  new BABYLON.Vector3(0, -size, 0), 
                  new BABYLON.Vector3.Zero(), 
                  new BABYLON.Vector3(0, size, 0), 
                  new BABYLON.Vector3( -0.05 * size, size * 0.95, 0), 
                  new BABYLON.Vector3(0, size, 0), 
                  new BABYLON.Vector3( 0.05 * size, size * 0.95, 0)
               ], scene);
               
               axisY.color = new BABYLON.Color3(0, 1, 0);
               var yChar = makeTextPlane("Y", "green", size / 10);
               yChar.position = new BABYLON.Vector3(0, 0.9 * size, -0.05 * size);
               var yChar1 = makeTextPlane("-Y", "green", size / 10);
               yChar1.position = new BABYLON.Vector3(0, -0.9 * size, 0.05 * size);

               var ycor = [];
               for (y=-10;y<=10;y++) {
                  xcor[y] = makeTextPlane(y, "green", size / 10);
                  xcor[y].position = new BABYLON.Vector3(0, y, 0);
               }		

               var axisZ = BABYLON.Mesh.CreateLines("axisZ", [
                  new BABYLON.Vector3( 0 , -0.05 * size, -size * 0.95), 
                  new BABYLON.Vector3(0, 0, -size),
                  new BABYLON.Vector3( 0 , 0.05 * size, -size * 0.95),
                  new BABYLON.Vector3(0, 0, -size), 
                  new BABYLON.Vector3.Zero(), 
                  new BABYLON.Vector3(0, 0, size), 
                  new BABYLON.Vector3( 0 , -0.05 * size, size * 0.95),
                  new BABYLON.Vector3(0, 0, size), 
                  new BABYLON.Vector3( 0, 0.05 * size, size * 0.95)
               ], scene);
               
               axisZ.color = new BABYLON.Color3(0, 0, 1);
               var zChar = makeTextPlane("Z", "blue", size / 10);
               zChar.position = new BABYLON.Vector3(0, 0.05 * size, 0.9 * size);
               var zChar1 = makeTextPlane("-Z", "blue", size / 10);
               zChar1.position = new BABYLON.Vector3(0, 0.05 * size, -0.9 * size);

               var zcor = [];
               for (z =- 10; z <= 10; z++) {
                  xcor[z] = makeTextPlane(z, "green", size / 10);
                  xcor[z].position = new BABYLON.Vector3(0, 0, z);
               }
            };	

            //Lets draw a mesh along the axis.

            var spriteManagerPlayer = new BABYLON.SpriteManager("playerManager", "images/bird.png", 1, 200, scene);
            var player = new BABYLON.Sprite("player", spriteManagerPlayer);
            player.position.x = 2;
            player.position.y = 2;	
            player.position.z = 0;	

            var zChardot = makeTextPlane(".", "red", 1);		
            zChardot.position = new BABYLON.Vector3(1.8, 1.8,0);

            var box = BABYLON.Mesh.CreateBox("box", '2', scene);
            box.position = new BABYLON.Vector3(-5,3,0); // center point of box x-axis is -5 and y axis is 3.

            var box = BABYLON.Mesh.CreateBox("box", '2', scene);
            box.position = new BABYLON.Vector3(0,3,-3); // center point of box x-axis is -5 and y axis is 3.

            var redSphere = BABYLON.Mesh.CreateSphere("red", 32, 1, scene); //no position for sphere so by default it takes 0,0,0
            showAxis(10);
            returnscene;
         };
         var scene = createScene();
         engine.runRenderLoop(function() {
            scene.render();
         });
      </script>
   </body>
</html>

Çıktı

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

Bu demoda image bird.png kullandık. Görüntüler yerel olarak görüntülerde / klasörde 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.

Images/bird.png

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( .5, .5, .5);

            // camera
            var camera = new BABYLON.ArcRotateCamera("camera1",  0, 0, 0, new BABYLON.Vector3(5, 3, 0), scene);
            camera.setPosition(new BABYLON.Vector3(5, 10, -10));
            camera.attachControl(canvas, true);
            
            // lights
            var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(1, 0.5, 0), scene);
            light.intensity = 0.8;
            
            var spot = new BABYLON.SpotLight(
               "spot", 
               new BABYLON.Vector3(25, 15, -10), 
               new BABYLON.Vector3(-1, -0.8, 1), 15, 1, scene);
            spot.diffuse = new BABYLON.Color3(1, 1, 1);
            spot.specular = new BABYLON.Color3(0, 0, 0);
            spot.intensity = 0.2; 
            
            // material
            var mat = new BABYLON.StandardMaterial("mat1", scene);
            mat.alpha = 1.0;
            mat.diffuseColor = new BABYLON.Color3(0.5, 0.5, 1.0);
            mat.backFaceCulling = false;
            
            //mat.wireframe = true;
            var makeTextPlane = function(text, color, size) {
               var dynamicTexture = new BABYLON.DynamicTexture("DynamicTexture", 50, scene, true);
               dynamicTexture.hasAlpha = true;
               dynamicTexture.drawText(text, 5, 40, "bold 36px Arial", color , "transparent", true);
               var plane = new BABYLON.Mesh.CreatePlane("TextPlane", size, scene, true);
               plane.material = new BABYLON.StandardMaterial("TextPlaneMaterial", scene);
               plane.material.backFaceCulling = false;
               plane.material.specularColor = new BABYLON.Color3(0, 0, 0);
               plane.material.diffuseTexture = dynamicTexture;
               return plane;
            };
            
            // show axis
            var showAxis = function(size) {	
               var axisX = BABYLON.Mesh.CreateLines("axisX", [ 
                  new BABYLON.Vector3(-size * 0.95, 0.05 * size, 0),
                  new BABYLON.Vector3(-size, 0, 0), 
                  new BABYLON.Vector3(-size * 0.95, -0.05 * size, 0),
                  new BABYLON.Vector3(-size, 0, 0),
                  new BABYLON.Vector3.Zero(), 
                  new BABYLON.Vector3(size, 0, 0), 
                  new BABYLON.Vector3(size * 0.95, 0.05 * size, 0), 
                  new BABYLON.Vector3(size, 0, 0), 
                  new BABYLON.Vector3(size * 0.95, -0.05 * size, 0)], scene);
               axisX.color = new BABYLON.Color3(1, 0, 0);
               var xChar = makeTextPlane("X", "red", size / 10);
               xChar.position = new BABYLON.Vector3(0.9 * size, -0.05 * size, 0);

               var xChar1 = makeTextPlane("-X", "red", size / 10);
               xChar1.position = new BABYLON.Vector3(-0.9 * size, 0.05 * size, 0);
               var xcor = [];
               for (i =- 10; i <= 10; i++) {
                  xcor[i] = makeTextPlane(i, "red", size / 10);
                  xcor[i].position = new BABYLON.Vector3(i, 0, 0);
               }

               var axisY = BABYLON.Mesh.CreateLines("axisY", [
                  new BABYLON.Vector3( -0.05 * size, -size * 0.95, 0),
                  new BABYLON.Vector3(0, -size, 0),
                  new BABYLON.Vector3(0.05 * size, -size * 0.95, 0),
                  new BABYLON.Vector3(0, -size, 0), 
                  new BABYLON.Vector3.Zero(), 
                  new BABYLON.Vector3(0, size, 0), 
                  new BABYLON.Vector3( -0.05 * size, size * 0.95, 0), 
                  new BABYLON.Vector3(0, size, 0), 
                  new BABYLON.Vector3( 0.05 * size, size * 0.95, 0)
               ], scene);
               
               axisY.color = new BABYLON.Color3(0, 1, 0);
               var yChar = makeTextPlane("Y", "green", size / 10);
               yChar.position = new BABYLON.Vector3(0, 0.9 * size, -0.05 * size);
               var yChar1 = makeTextPlane("-Y", "green", size / 10);
               yChar1.position = new BABYLON.Vector3(0, -0.9 * size, 0.05 * size);

               var ycor = [];
               for (y =- 10; y <= 10; y++) {
                  xcor[y] = makeTextPlane(y, "green", size / 10);
                  xcor[y].position = new BABYLON.Vector3(0, y, 0);
               }

               var axisZ = BABYLON.Mesh.CreateLines("axisZ", [
                  new BABYLON.Vector3( 0 , -0.05 * size, -size * 0.95), 
                  new BABYLON.Vector3(0, 0, -size),
                  new BABYLON.Vector3( 0 , 0.05 * size, -size * 0.95),
                  new BABYLON.Vector3(0, 0, -size), 
                  new BABYLON.Vector3.Zero(), 
                  new BABYLON.Vector3(0, 0, size), 
                  new BABYLON.Vector3( 0 , -0.05 * size, size * 0.95),
                  new BABYLON.Vector3(0, 0, size), 
                  new BABYLON.Vector3( 0, 0.05 * size, size * 0.95)
               ], scene);
               axisZ.color = new BABYLON.Color3(0, 0, 1);
               var zChar = makeTextPlane("Z", "blue", size / 10);
               zChar.position = new BABYLON.Vector3(0, 0.05 * size, 0.9 * size);
               var zChar1 = makeTextPlane("-Z", "blue", size / 10);
               zChar1.position = new BABYLON.Vector3(0, 0.05 * size, -0.9 * size);

               var zcor = [];
               for (z =- 10; z <= 10; z++) {
                  xcor[z] = makeTextPlane(z, "green", size / 10);
                  xcor[z].position = new BABYLON.Vector3(0, 0, z);
               }
            };

            var kite = BABYLON.Mesh.CreateLines("kite", [
               new BABYLON.Vector3(-4,0,0),
               new BABYLON.Vector3(0,4,0), 
               new BABYLON.Vector3(4,0,0), 
               new BABYLON.Vector3(0,-4,0),
               new BABYLON.Vector3(-4,0,0)
            ], scene);
            kite.color = new BABYLON.Color3(1, 1, 1);

            var path = [];
            path.push(new BABYLON.Vector3(-4, 0, 0));
            path.push(new BABYLON.Vector3(0, 0, 0));
            path.push(new BABYLON.Vector3(4, 0, 0));

            var lines1 = BABYLON.Mesh.CreateLines("lines",path, scene, true);
            lines1.color = new BABYLON.Color3(1, 1, 1);
            showAxis(10);	
            return scene;
         };
         var scene = createScene();
         engine.runRenderLoop(function() {
            scene.render();
         });
      </script>
   </body>
</html>

Çıktı

Yukarıdaki kod satırı aşağıdaki çıktıyı üretecektir:

Vektör Döndürme

Şimdi vektör döndürmenin nasıl çalıştığını görelim.

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( .5, .5, .5);

            // camera
            var camera = new BABYLON.ArcRotateCamera("camera1",  0, 0, 0, new BABYLON.Vector3(5, 3, 0), scene);
            camera.setPosition(new BABYLON.Vector3(0, 0, 0));
            camera.attachControl(canvas, true);
            
            // lights
            var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(1, 0.5, 0), scene);
            light.intensity = 0.8;
            var spot = new BABYLON.SpotLight(
               "spot", 
               new BABYLON.Vector3(25, 15, -10), 
               new BABYLON.Vector3(-1, -0.8, 1), 15, 1, scene);
            spot.diffuse = new BABYLON.Color3(1, 1, 1);
            spot.specular = new BABYLON.Color3(0, 0, 0);
            spot.intensity = 0.2; 
            
            // material
            var mat = new BABYLON.StandardMaterial("mat1", scene);
            mat.alpha = 1.0;
            mat.diffuseColor = new BABYLON.Color3(0.5, 0.5, 1.0);
            mat.backFaceCulling = false;
            
            //mat.wireframe = true;
            var makeTextPlane = function(text, color, size) {
               var dynamicTexture = new BABYLON.DynamicTexture("DynamicTexture", 50, scene, true);
               dynamicTexture.hasAlpha = true;
               dynamicTexture.drawText(text, 5, 40, "bold 36px Arial", color , "transparent", true);
               var plane = new BABYLON.Mesh.CreatePlane("TextPlane", size, scene, true);
               plane.material = new BABYLON.StandardMaterial("TextPlaneMaterial", scene);
               plane.material.backFaceCulling = false;
               plane.material.specularColor = new BABYLON.Color3(0, 0, 0);
               plane.material.diffuseTexture = dynamicTexture;
               return plane;
            };
            // show axis
            var showAxis = function(size) {
               var axisX = BABYLON.Mesh.CreateLines("axisX", [ 
                  new BABYLON.Vector3(-size * 0.95, 0.05 * size, 0),
                  new BABYLON.Vector3(-size, 0, 0), 
                  new BABYLON.Vector3(-size * 0.95, -0.05 * size, 0),
                  new BABYLON.Vector3(-size, 0, 0),
                  new BABYLON.Vector3.Zero(), 
                  new BABYLON.Vector3(size, 0, 0), 
                  new BABYLON.Vector3(size * 0.95, 0.05 * size, 0), 
                  new BABYLON.Vector3(size, 0, 0), 
                  new BABYLON.Vector3(size * 0.95, -0.05 * size, 0)
               ], scene);
               
               axisX.color = new BABYLON.Color3(1, 0, 0);
               var xChar = makeTextPlane("X", "red", size / 10);
               xChar.position = new BABYLON.Vector3(0.9 * size, -0.05 * size, 0);

               var xChar1 = makeTextPlane("-X", "red", size / 10);
               xChar1.position = new BABYLON.Vector3(-0.9 * size, 0.05 * size, 0);
               var xcor = [];
               for (i =- 10; i <= 10; i++) {
                  xcor[i] = makeTextPlane(i, "red", size / 10);
                  xcor[i].position = new BABYLON.Vector3(i, 0, 0);
               }

               var axisY = BABYLON.Mesh.CreateLines("axisY", [
                  new BABYLON.Vector3( -0.05 * size, -size * 0.95, 0),
                  new BABYLON.Vector3(0, -size, 0),
                  new BABYLON.Vector3(0.05 * size, -size * 0.95, 0),
                  new BABYLON.Vector3(0, -size, 0), 
                  new BABYLON.Vector3.Zero(), 
                  new BABYLON.Vector3(0, size, 0), 
                  new BABYLON.Vector3( -0.05 * size, size * 0.95, 0), 
                  new BABYLON.Vector3(0, size, 0), 
                  new BABYLON.Vector3( 0.05 * size, size * 0.95, 0)
               ], scene);
               
               axisY.color = new BABYLON.Color3(0, 1, 0);
               var yChar = makeTextPlane("Y", "green", size / 10);
               yChar.position = new BABYLON.Vector3(0, 0.9 * size, -0.05 * size);
               var yChar1 = makeTextPlane("-Y", "green", size / 10);
               yChar1.position = new BABYLON.Vector3(0, -0.9 * size, 0.05 * size);

               var ycor = [];
               for (y =- 10; y <= 10; y++) {
                  xcor[y] = makeTextPlane(y, "green", size / 10);
                  xcor[y].position = new BABYLON.Vector3(0, y, 0);
               }

               var axisZ = BABYLON.Mesh.CreateLines("axisZ", [
                  new BABYLON.Vector3( 0 , -0.05 * size, -size * 0.95), 
                  new BABYLON.Vector3(0, 0, -size),
                  new BABYLON.Vector3( 0 , 0.05 * size, -size * 0.95),
                  new BABYLON.Vector3(0, 0, -size), 
                  new BABYLON.Vector3.Zero(), 
                  new BABYLON.Vector3(0, 0, size), 
                  new BABYLON.Vector3( 0 , -0.05 * size, size * 0.95),
                  new BABYLON.Vector3(0, 0, size), 
                  new BABYLON.Vector3( 0, 0.05 * size, size * 0.95)
               ], scene);
               
               axisZ.color = new BABYLON.Color3(0, 0, 1);
               var zChar = makeTextPlane("Z", "blue", size / 10);
               zChar.position = new BABYLON.Vector3(0, 0.05 * size, 0.9 * size);
               var zChar1 = makeTextPlane("-Z", "blue", size / 10);
               zChar1.position = new BABYLON.Vector3(0, 0.05 * size, -0.9 * size);

               var zcor = [];
               for (z =- 10; z <= 10; z++) {
                  xcor[z] = makeTextPlane(z, "green", size / 10);
                  xcor[z].position = new BABYLON.Vector3(0, 0, z);
               }
            };

            var yellowSphere = BABYLON.Mesh.CreateSphere("yellowSphere",32, 1, scene);
            yellowSphere.setPivotMatrix(BABYLON.Matrix.Translation(2, 0, 0));
            var yellowMaterial = new BABYLON.StandardMaterial("yellowMaterial", scene);
            yellowMaterial.diffuseColor = BABYLON.Color3.Yellow();
            yellowSphere.material = yellowMaterial;

            var wheel1 = BABYLON.MeshBuilder.CreateTorus('t1', {diameter: 2.0}, scene);
            wheel1.position.x = -2.0
            wheel1.position.z = -2.0;

            showAxis(10);	
            var k = 0.0;
            var y = 0.0;
            var x = 0.0;
            scene.registerBeforeRender(function () {
               wheel1.rotation.copyFromFloats(0.0, 0.0, Math.PI / 2);
               wheel1.addRotation(0.0, y, 0.0); 
               wheel1.addRotation(x, 0.0, 0.0);
               yellowSphere.rotation.y += 0.01;
               y += 0.05; 
            });	
            return scene;
         };
         var scene = createScene();
         engine.runRenderLoop(function() {
            scene.render();
         });
      </script>
   </body>
</html>

Çıktı

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

Çıkartmalar, bir nesneye yapıştırılan çıkartmalardır. Çıkartma çizimi, ağ üzerine çizilen 2d görüntü (örneğin, oyundaki nesne) yardımıyla yapılır. Oyunlarda, mermi ateşleyen bir ordunuz olduğunu düşünün, mermi izleniminin nesnede görülmesi gerekir. Yani Babylonjs'de, herhangi bir nesneye tıkladığınızda, tıkladığınız yere 2D bir resim çizeceğiniz etiketler kullanılarak yapılır.

Çıkartmalar, oluşturulan ağa ayrıntılar eklemek için kullanılır - madde işaretleri, delikler vb. Gibi ayrıntılar Aşağıda verilen demo bağlantısında, bir görüntü kullanıyoruz ve bunu içe aktarılan ağa ekliyoruz.

Çıkartma eklemek için aşağıdaki kodu kullanabilirsiniz -

var newDecal = BABYLON.Mesh.CreateDecal("decal", mesh, decalPosition, normal, decalSize, angle);

Ağa yapıştırma eklemek için aşağıdaki kod yürütülür -

BABYLON.SceneLoader.ImportMesh("Shcroendiger'scat", "scenes/", "SSAOcat.babylon", scene, function (newMeshes) {
   var cat = newMeshes[0]; / /this is mesh shown on the screen.

   // Set the target of the camera to the first imported mesh
   camera.target = cat;

   var decalMaterial = new BABYLON.StandardMaterial("decalMat", scene);
   decalMaterial.diffuseTexture = new BABYLON.Texture("images/impact1.jpg", scene);
   decalMaterial.diffuseTexture.hasAlpha = true;
   decalMaterial.zOffset = -2;

   var onPointerDown = function (evt) {
      if (evt.button !== 0) {
         return;
      }

      // check if we are under a mesh
      var pickInfo = scene.pick(scene.pointerX, scene.pointerY, function (mesh) { return mesh === cat; 
      // this will give all the meshes , but it will pick the mesh whch is same as cat and return true if it is found });
      if (pickInfo.hit) { // if true
         var decalSize = new BABYLON.Vector3(5, 5, 5); //size of decal is defined

         var newDecal = BABYLON.Mesh.CreateDecal("decal", cat, pickInfo.pickedPoint, pickInfo.getNormal(true), decalSize); //decal is created 
         newDecal.material = decalMaterial; //decal material is added.
      }
   }
   var canvas = engine.getRenderingCanvas();
   canvas.addEventListener("pointerdown", onPointerDown, false);

   scene.onDispose = function () {
      canvas.removeEventListener("pointerdown", onPointerDown);
   }
});

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

            //Adding a light
            var light = new BABYLON.HemisphericLight("Hemi", new BABYLON.Vector3(0, 1, 0), scene);

            //Adding an Arc Rotate Camera
            var camera = new BABYLON.ArcRotateCamera("Camera", -1.85, 1.2, 200, BABYLON.Vector3.Zero(), scene);

            camera.attachControl(canvas, true);

            // The first parameter can be used to specify which mesh to import. Here we import all meshes
            BABYLON.SceneLoader.ImportMesh("Shcroendiger'scat", "scenes/", "SSAOcat.babylon", scene, function (newMeshes) {
               var cat = newMeshes[0];

               // Set the target of the camera to the first imported mesh
               camera.target = cat;

               var decalMaterial = new BABYLON.StandardMaterial("decalMat", scene);
               decalMaterial.diffuseTexture = new BABYLON.Texture("images/impact1.jpg", scene);
               decalMaterial.diffuseTexture.hasAlpha = true;
               decalMaterial.zOffset = -2;

               var onPointerDown = function (evt) {
                  if (evt.button !== 0) {
                     return;
                  }

                  // check if we are under a mesh
                  var pickInfo = scene.pick(scene.pointerX, scene.pointerY, function (mesh) { return mesh === cat; });
                  if (pickInfo.hit) {
                     var decalSize = new BABYLON.Vector3(5, 5, 5);

                     var newDecal = BABYLON.Mesh.CreateDecal("decal", cat, pickInfo.pickedPoint, pickInfo.getNormal(true), decalSize);
                     newDecal.material = decalMaterial;
                  }
               }
               var canvas = engine.getRenderingCanvas();
               canvas.addEventListener("pointerdown", onPointerDown, false);

               scene.onDispose = function () {
                  canvas.removeEventListener("pointerdown", onPointerDown);
               }
            });	
            return scene;
         };
         var scene = createScene();
         engine.runRenderLoop(function() {
            scene.render();
         });
      </script>
   </body>
</html>

Yukarıdaki demo bağlantısında, SSAOcat.babylon ağını kullandık. SSAOcat.babylon için json dosyasını buradan indirebilirsiniz -

SSAOcat.babylon

Dosyayı sahnelere / klasöre kaydedin. Bu, çıktıyı aşağıda gösterildiği gibi almanıza yardımcı olacaktır.

Çıktı

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

Bu demoda görüntü kullandık impact1.jpg. Görüntüler yerel olarak görüntülerde / klasörde 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.

images/impact1.jpg

BabylonJS, karmaşık matematik eğrisinin bir kısmını oluşturmak için api'de inşa etti. Daha önce şeritleri gördük, deseni çizmek ve ağa verilen yolların koordinatlarını hesaplamak için karmaşık denklem kullanılarak oluşturulan çizgiler. Curves API'de olduğu gibi karmaşık hesaplamalar yapmaktan kaçınmak için burada yerleşik bir API'ye sahibiz.

Açıklanan eğriler aşağıdaki gibidir -

  • Karesel Bezier eğrisi
  • Kübik Bezier eğrisi
  • Hermite eğri
  • Catmull-Rom eğri

Kuadratik Bezier Eğrisi

Bu bölümde Kuadratik Bezier Eğrisi hakkında bilgi edineceğiz.

Sözdizimi

var bezier = BABYLON.Curve3.CreateQuadraticBezier(origin, control, destination, nb_of_points);

Parametreler

Kuadratik Bezier Eğrisi ile ilgili aşağıdaki parametreleri göz önünde bulundurun.

  • Origin - Eğri için başlangıç ​​noktası.

  • Control - Eğri için kontrol noktaları.

  • Destination - Varış noktası.

  • Noofpoints - Dizideki noktalar.

Kübik Bezeir Eğrisi

Bu bölümde Kübik Bezier Eğrisi hakkında bilgi edineceğiz.

Sözdizimi

var bezier3 = BABYLON.Curve3.CreateCubicBezier(origin, control1, control2, destination, nb_of_points)

Parametreler

Kübik Bezier Eğrisi ile ilgili aşağıdaki parametreleri göz önünde bulundurun.

  • Origin - Başlangıç ​​noktası.

  • control1 - Vektör biçiminde ilk kontrol noktası.

  • control2 - Vektör biçiminde ikinci kontrol noktası.

  • Destination - Vektör biçiminde varış noktası.

  • no_of_points - Dizi biçiminde nokta sayısı.

HermiteSpline Eğrisi

Bu bölümde Hermite Spline Eğrisi hakkında bilgi edineceğiz.

Sözdizimi

var hermite = BABYLON.Curve3.CreateHermiteSpline(p1, t1, p2, t2, nbPoints);

Parametreler

Hermite Spline Eğrisi ile ilgili aşağıdaki parametreleri göz önünde bulundurun -

  • p1 - Eğri için başlangıç ​​noktası.

  • t1 - Orijin teğet vektör noktası.

  • p2 - Varış noktası.

  • t2 - Hedef teğet vektörü.

  • NbPoints - Son eğri için nokta dizisi.

Catmull-Rom Spline Eğrisi

Bu bölümde Catmull-Rom Spline Eğrisi hakkında bilgi edineceğiz.

Sözdizimi

var nbPoints = 20;   // the number of points between each Vector3 control points
var points = [vec1, vec2, ..., vecN];  // an array of Vector3 the curve must pass through : the control points
var catmullRom = BABYLON.Curve3.CreateCatmullRomSpline(points, nbPoints);

Parametreler

Catmull-Rom Spline Eğrisi ile ilgili aşağıdaki parametreleri göz önünde bulundurun -

  • Points - Bir dizi Vector3, eğri kontrol noktalarından geçmelidir.

  • NbPoints - Her Vector3 kontrol noktası arasındaki nokta sayısı.

var path = catmullRom.getPoints(); // getPoints() returns an array of successive Vector3.
var l = catmullRom.length(); // method returns the curve length.

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( .5, .5, .5);

            // camera
            var camera = new BABYLON.ArcRotateCamera("camera1",  0, 0, 0, new BABYLON.Vector3(5, 3, 0), scene);
            camera.setPosition(new BABYLON.Vector3(0, 0, -100));
            camera.attachControl(canvas, true);
            
            // lights
            var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(1, 0.5, 0), scene);
            light.intensity = 0.8;
            var spot = new BABYLON.SpotLight(
            "spot", 
            new BABYLON.Vector3(25, 15, -10), 
            new BABYLON.Vector3(-1, -0.8, 1), 15, 1, scene);
            spot.diffuse = new BABYLON.Color3(1, 1, 1);
            spot.specular = new BABYLON.Color3(0, 0, 0);
            spot.intensity = 0.2; 
            
            // material
            var mat = new BABYLON.StandardMaterial("mat1", scene);
            mat.alpha = 1.0;
            mat.diffuseColor = new BABYLON.Color3(0.5, 0.5, 1.0);
            mat.backFaceCulling = false;
            
            //mat.wireframe = true;
            var makeTextPlane = function(text, color, size) {
               var dynamicTexture = new BABYLON.DynamicTexture("DynamicTexture", 50, scene, true);
               dynamicTexture.hasAlpha = true;
               dynamicTexture.drawText(text, 5, 40, "bold 36px Arial", color , "transparent", true);
               
               var plane = new BABYLON.Mesh.CreatePlane("TextPlane", size, scene, true);
               
               plane.material = new BABYLON.StandardMaterial("TextPlaneMaterial", scene);
               plane.material.backFaceCulling = false;
               plane.material.specularColor = new BABYLON.Color3(0, 0, 0);
               plane.material.diffuseTexture = dynamicTexture;
               return plane;
            };
            
            // show axis
            var showAxis = function(size) { 
               var axisX = BABYLON.Mesh.CreateLines("axisX", [ 
                  new BABYLON.Vector3(-size * 0.95, 0.05 * size, 0),
                  new BABYLON.Vector3(-size, 0, 0), 
                  new BABYLON.Vector3(-size * 0.95, -0.05 * size, 0),
                  new BABYLON.Vector3(-size, 0, 0),
                  new BABYLON.Vector3.Zero(), 
                  new BABYLON.Vector3(size, 0, 0), 
                  new BABYLON.Vector3(size * 0.95, 0.05 * size, 0), 
                  new BABYLON.Vector3(size, 0, 0), 
                  new BABYLON.Vector3(size * 0.95, -0.05 * size, 0)
               ], scene);
               
               axisX.color = new BABYLON.Color3(1, 0, 0);
               var xChar = makeTextPlane("X", "red", size / 10);
               xChar.position = new BABYLON.Vector3(0.9 * size, -0.05 * size, 0);			
               
               var xChar1 = makeTextPlane("-X", "red", size / 10);
               xChar1.position = new BABYLON.Vector3(-0.9 * size, 0.05 * size, 0);
               
               var xcor = [];
               for (i =- 20; i <= 20; i++) {
                  xcor[i] = makeTextPlane(i, "red", size / 10);
                  xcor[i].position = new BABYLON.Vector3(i, 0, 0);
               }
               
               var axisY = BABYLON.Mesh.CreateLines("axisY", [
                  new BABYLON.Vector3( -0.05 * size, -size * 0.95, 0),
                  new BABYLON.Vector3(0, -size, 0),
                  new BABYLON.Vector3(0.05 * size, -size * 0.95, 0),
                  new BABYLON.Vector3(0, -size, 0),
                  new BABYLON.Vector3.Zero(),
                  new BABYLON.Vector3(0, size, 0), 
                  new BABYLON.Vector3( -0.05 * size, size * 0.95, 0), 
                  new BABYLON.Vector3(0, size, 0), 
                  new BABYLON.Vector3( 0.05 * size, size * 0.95, 0)
               ], scene);
               
               axisY.color = new BABYLON.Color3(0, 1, 0);
               var yChar = makeTextPlane("Y", "green", size / 10);
               yChar.position = new BABYLON.Vector3(0, 0.9 * size, -0.05 * size);
               var yChar1 = makeTextPlane("-Y", "green", size / 10);
               yChar1.position = new BABYLON.Vector3(0, -0.9 * size, 0.05 * size);
               var ycor = [];
               for (y =- 20; y <= 20; y++) {
                  xcor[y] = makeTextPlane(y, "green", size / 10);
                  xcor[y].position = new BABYLON.Vector3(0, y, 0);
               }


               var axisZ = BABYLON.Mesh.CreateLines("axisZ", [
                  new BABYLON.Vector3( 0 , -0.05 * size, -size * 0.95), 
                  new BABYLON.Vector3(0, 0, -size),
                  new BABYLON.Vector3( 0 , 0.05 * size, -size * 0.95),
                  new BABYLON.Vector3(0, 0, -size), 
                  new BABYLON.Vector3.Zero(), 
                  new BABYLON.Vector3(0, 0, size), 
                  new BABYLON.Vector3( 0 , -0.05 * size, size * 0.95),
                  new BABYLON.Vector3(0, 0, size), 
                  new BABYLON.Vector3( 0, 0.05 * size, size * 0.95)
               ], scene);
               axisZ.color = new BABYLON.Color3(0, 0, 1);
               var zChar = makeTextPlane("Z", "blue", size / 10);
               zChar.position = new BABYLON.Vector3(0, 0.05 * size, 0.9 * size);
               var zChar1 = makeTextPlane("-Z", "blue", size / 10);
               zChar1.position = new BABYLON.Vector3(0, 0.05 * size, -0.9 * size);

               var zcor = [];
               for (z =- 20; z <= 20; z++) {
                  xcor[z] = makeTextPlane(z, "green", size / 10);
                  xcor[z].position = new BABYLON.Vector3(0, 0, z);
               }
            };

            var quadraticBezierVectors = BABYLON.Curve3.CreateQuadraticBezier( 
            BABYLON.Vector3.Zero(), 
            new BABYLON.Vector3(10, 5, 5), 
            new BABYLON.Vector3(5, 10, 0), 15);
            var quadraticBezierCurve = BABYLON.Mesh.CreateLines("qbezier", quadraticBezierVectors.getPoints(), scene);
            quadraticBezierCurve.color = new BABYLON.Color3(1, 1, 0.5);

            var cubicBezierVectors = BABYLON.Curve3.CreateCubicBezier( 
            BABYLON.Vector3.Zero(), 
            new BABYLON.Vector3(10, 5, 20), 
            new BABYLON.Vector3(-50, 5, -20), 
            new BABYLON.Vector3( -10, 20, 10), 60);
            var cubicBezierCurve = BABYLON.Mesh.CreateLines("cbezier", cubicBezierVectors.getPoints(), scene);
            cubicBezierCurve.color = new BABYLON.Color3(1, 0, 0);

            var continued = cubicBezierVectors.continue(cubicBezierVectors).continue(quadraticBezierVectors);

            var points = continued.getPoints();
            var nbPoints = 60;
            var l = continued.length() / 2;
            var p1 = points[points.length - 1];
            var t1 = (p1.subtract(points[points.length - 2])).scale(l);
            var p2 = points[0];
            var t2 = (points[1].subtract(p2)).scale(l);

            var hermite = BABYLON.Curve3.CreateHermiteSpline(p1, t1, p2, t2, nbPoints);

            continued = continued.continue(hermite);

            var points = continued.getPoints();
            var continuedCurve = BABYLON.Mesh.CreateLines("continued", points, scene);
            continuedCurve.position = new BABYLON.Vector3(20, -20, 20);
            continuedCurve.color = new BABYLON.Color3(0, 0, 0);

            var nbPoints = 20;                     // the number of points between each Vector3 control points
            var points = [new BABYLON.Vector3(10, 5, 20), 
            new BABYLON.Vector3(-20, 5, -20), 
            new BABYLON.Vector3(-25, 5, -20), 
            new BABYLON.Vector3( -30, 20, 10),];  // an array of Vector3 the curve must pass through : the control points
            var catmullRom = BABYLON.Curve3.CreateCatmullRomSpline(points, nbPoints);

            var path = catmullRom.getPoints();
            var l = catmullRom.length();

            var finalcatmullCurve = BABYLON.Mesh.CreateLines("continued", path, scene);

            var mySinus = [];
            for (var i = 0; i < 30; i++) {
               mySinus.push( new BABYLON.Vector3(i, Math.sin(i / 10), 0) );
            }

            var mySinusCurve3 = new BABYLON.Curve3(mySinus);
            var myFullCurve = mySinusCurve3.continue(cubicBezierVectors).continue(quadraticBezierVectors);
            var points1 = myFullCurve.getPoints();
            var curve3d = BABYLON.Mesh.CreateLines("continued", points1, scene);
            curve3d.color = new BABYLON.Color3(0.9, 1, 0.2);
            showAxis(20);
            return scene;
         };
         var scene = createScene();
         engine.runRenderLoop(function() {
            scene.render();
         });
      </script>
   </body>
</html>

Çıktı

Yukarıdaki kod satırı aşağıdaki çıktıyı üretecektir -

BabylonJS'nin Dinamik Dokusu bir tuval oluşturur ve doku üzerine kolayca metin yazabilirsiniz. Aynı zamanda canvas ile çalışmanıza ve dinamik doku ile kullanılmak üzere html5 canvas ile mevcut tüm özellikleri kullanmanıza olanak sağlar.

Doku üzerine nasıl yazı yazılacağını gösterecek ve ayrıca oluşturduğumuz ağ üzerine bir bezier Eğrisi çizecek bir örnek üzerinde çalışacağız.

Sözdizimi

Dinamik doku oluşturmak için sözdizimi aşağıdadır -

var myDynamicTexture = new BABYLON.DynamicTexture(name, option, scene);

Parametreler

Dinamik doku oluşturmak için gerekli parametreler aşağıdadır -

  • name - dinamik dokunun adı

  • option - dinamik dokunun genişliğine ve yüksekliğine sahip olacak

  • scene - sahne oluşturuldu

Sözdizimi

Doku üzerine metin yazmak için sözdizimi aşağıdadır -

myDynamicTexture.drawText(text, x, y, font, color, canvas color, invertY, update);

Parametreler

Doku üzerine metin yazmak için gerekli parametreler aşağıdadır -

  • text - yazılacak metin;

  • x - sol kenardan uzaklık;

  • Y - ters Y'ye bağlı olarak üst veya alt kenardan uzaklık;

  • font - yazı tipi stili, yazı tipi boyutu, yazı_adı biçiminde yazı tipi tanımı;

  • invertY - varsayılan olarak doğrudur, bu durumda y üstten uzaklıktır, false olduğunda y alttan uzaklıktır ve harfler ters çevrilmiştir;

  • update - varsayılan olarak doğru, dinamik doku hemen güncellenecektir.

Demo

<!doctype html>
<html>
   <head>
      <meta charset = "utf-8">
      <title>MDN Games: Babylon.js demo - shapes</title>
      <script src = "https://end3r.github.io/MDN-Games-3D/Babylon.js/js/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);

            var camera = new BABYLON.ArcRotateCamera("Camera", -Math.PI/2, Math.PI / 3, 25, BABYLON.Vector3.Zero(), scene);
            camera.attachControl(canvas, true);

            var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(0, 1, 0), scene);
            light.intensity = 0.7;	

            var box = BABYLON.Mesh.CreateBox("box", 3.0, scene);
            box.position = new BABYLON.Vector3(0, 0, -5); 

            //Create dynamic texture		
            var textureGround = new BABYLON.DynamicTexture("dynamic texture", {width:512, height:256}, scene);   
            var textureContext = textureGround.getContext();

            var materialGround = new BABYLON.StandardMaterial("Mat", scene);    				
            materialGround.diffuseTexture = textureGround;
            box.material = materialGround;

            //Add text to dynamic texture
            var font = "bold 60px Arial";
            textureGround.drawText("Box", 200, 150, font, "green", "white", true, true);
            return scene;
         };
         var scene = createScene();
         engine.runRenderLoop(function() {
            scene.render();
         });
      </script>
   </body>
</html>

Çıktı

Dinamik doku ayrıca aşağıdaki gibi dinamik doku üzerinde html5 canvas yöntemleri ve özellikleriyle çalışılmasına izin verir -

Sözdizimi

var ctx = myDynamicTexture.getContext();

Demo

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

            var camera = new BABYLON.ArcRotateCamera("Camera", -Math.PI/2, Math.PI / 3, 25, BABYLON.Vector3.Zero(), scene);
            camera.attachControl(canvas, true);

            var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(0, 1, 0), scene);
            light.intensity = 0.7;		

            var ground = BABYLON.MeshBuilder.CreateGround("ground1", {width: 20, height: 10, subdivisions: 25}, scene);

            //Create dynamic texture
            var textureGround = new BABYLON.DynamicTexture("dynamic texture", 512, scene);   
            var textureContext = textureGround.getContext();

            var materialGround = new BABYLON.StandardMaterial("Mat", scene);    				
            materialGround.diffuseTexture = textureGround;
            ground.material = materialGround;

            //Draw on canvas
            textureContext.beginPath();
            textureContext.moveTo(75,40);
            textureContext.bezierCurveTo(75,37,70,25,50,25);
            textureContext.bezierCurveTo(20,25,20,62.5,20,62.5);
            textureContext.bezierCurveTo(20,80,40,102,75,120);
            textureContext.bezierCurveTo(110,102,130,80,130,62.5);
            textureContext.bezierCurveTo(130,62.5,130,25,100,25);
            textureContext.bezierCurveTo(85,25,75,37,75,40);
            textureContext.fillStyle = "red";
            textureContext.fill();
            textureGround.update();
            
            return scene;
         };
         var scene = createScene();
            engine.runRenderLoop(function() {
            scene.render();
         });
      </script>
   </body>
</html>

Çıktı

Açıklama

Yer ağı oluşturduk ve ona dinamik doku ekledik.

//ground mesh
var ground = BABYLON.MeshBuilder.CreateGround("ground1", {width: 20, height: 10, subdivisions: 25}, scene);

//Create dynamic texture
var textureGround = new BABYLON.DynamicTexture("dynamic texture", 512, scene);   

//adding dynamic texture to ground using standard material
var materialGround = new BABYLON.StandardMaterial("Mat", scene);    			
materialGround.diffuseTexture = textureGround;
ground.material = materialGround;

Tuval ile dinamik doku üzerinde çalışmak için önce tuval yöntemini çağırmamız gerekir -

var textureContext = textureGround.getContext()

Tuvale bezierCurve'u aşağıdaki gibi ekleyeceğiz -

textureContext.beginPath();
textureContext.moveTo(75,40);

textureContext.bezierCurveTo(75,37,70,25,50,25);
textureContext.bezierCurveTo(20,25,20,62.5,20,62.5);
textureContext.bezierCurveTo(20,80,40,102,75,120);
textureContext.bezierCurveTo(110,102,130,80,130,62.5);
textureContext.bezierCurveTo(130,62.5,130,25,100,25);
textureContext.bezierCurveTo(85,25,75,37,75,40);

textureContext.fillStyle = "red";
textureContext.fill();
textureGround.update();

Paralaks eşleme, ofset eşleme olarak da adlandırılır. Geometrinin yüzeyindeki rölyef etkisini vurgulamak için malzemenin dokularına ofset olarak uygulanan bir yükseklik haritası kullanır. 3Dworld'de derinliği uygulanan taş duvarlar daha belirgin görünecek ve son kullanıcıya gerçekçi görünecektir. Daha dik görüş açılarında, doku koordinatları daha fazla yer değiştirir ve görünüm değiştikçe paralaks etkilerinden dolayı derinlik yanılsaması verir.

Parallex haritalama standart malzeme ile kullanılır. Bunu standart malzeme bölümünde öğrendik.

Paralleks haritalama ile mevcut olan 3 özellik vardır.

  • material.useParallax = true;- Bu, paralleks haritalamayı etkinleştirir. Bu özelliği kullanmak için önce malzemeye kabartma dokusu atamanız gerekir.

  • material.useParallaxOcclusion = true;- Bu özelliği kullanmak için useParallax'ı true olarak ayarlamanız gerekir. Paralaks Oklüzyonunu etkinleştirir.

  • material.parallaxScaleBias = 0.1;- Ağa söylenecek derinlik için bir ölçeklendirme faktörü uygular. .05 ile .1 arasında bir değer Paralaks için uygundur. Oklüzyon için 0.2'ye ulaşabilirsiniz.

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() {
            // This creates a basic Babylon Scene object (non-mesh)
            var scene = new BABYLON.Scene(engine);

            // This creates and positions a free camera (non-mesh)
            var camera = new BABYLON.ArcRotateCamera("camera1", 0, Math.PI / 2, 100, new BABYLON.Vector3(0, 0, 0), scene);
            camera.attachControl(canvas, false);

            // This targets the camera to scene origin
            camera.setTarget(BABYLON.Vector3.Zero());

            // This creates a light, aiming 0,1,0 - to the sky (non-mesh)
            var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(0, 1, 0), scene);

            // Default intensity is 1. Let's dim the light a small amount
            light.intensity = 0.7;

            var mesh = BABYLON.Mesh.CreateBox("box01", 25, scene);
            mesh.position = new BABYLON.Vector3(0, 0, 0);

            var brickWallDiffURL = "images/a1.png";
            var brickWallNHURL = "images/a2.png";
            var stoneDiffURL = "images/pebble.jpg";
            var stoneNHURL = "images/a3.png";

            var stoneDiffuseTexture = new BABYLON.Texture(stoneDiffURL, scene);
            
            var stoneNormalsHeightTexture = new BABYLON.Texture(stoneNHURL, scene);
            
            var wallDiffuseTexture = new BABYLON.Texture(brickWallDiffURL, scene);
            
            var wallNormalsHeightTexture = new BABYLON.Texture(brickWallNHURL, scene);
            
            var normalsHeightTexture = stoneNormalsHeightTexture;

            var material = new BABYLON.StandardMaterial("mtl01", scene);
            material.diffuseTexture = stoneDiffuseTexture;
            material.bumpTexture = stoneNormalsHeightTexture;
            
            material.useParallax = true;
            material.useParallaxOcclusion = true;
            material.parallaxScaleBias = 0.1;
            material.specularPower = 1000.0;
            material.specularColor = new BABYLON.Color3(0.5, 0.5, 0.5);
            mesh.material = material;	
            return scene;		
         };
         var scene = createScene();
         engine.runRenderLoop(function() {
            scene.render();
         });
      </script>
   </body>
</html>

Çıktı

Yukarıdaki kod satırı aşağıdaki çıktıyı üretecektir -

Bu demoda görüntüleri kullandık a1.png, a2.png, pebble.jpg ve a3.png. 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.

Görüntüler / a1.png

Images / a2.png

Images / pebble.jpg

images / a3.png

Işık dağıldığında ve görüntünün üzerine düştüğünde, görünüm açısından farklı bir görüntü görürsünüz ve renk de değişir. Işık efektinin gerçekçi bir oluşumunu göstermek için bir oyun geliştirdiğinizde mercek parlaması kullanılır. Aynanın üzerine düşen güneş ışınlarını düşünün ve bunun görülen etkisine çoğunlukla Mercek Parlaması denir.

Sözdizimi

Aşağıda mercek parlaması oluşturmak için sözdizimi verilmiştir -

var lensFlareSystem = new BABYLON.LensFlareSystem("lensFlareSystem", light0, scene);

Parametreler

Mercek parlaması oluşturmak için aşağıdaki parametreleri göz önünde bulundurun -

  • Name - Mercek parlaması sistemine verilen isim.

  • Light - Bu ışık kaynağı veya kamera olabilir.

  • Scene - Mercek parlamasının ekleneceği sahne.

Sahneye işaret fişekleri eklemek için aşağıdaki komutu uygulayın -

var flare1 = new BABYLON.LensFlare(0.5, 0.15, new BABYLON.Color3(1, 1, 1), "images/sun1.png", lensFlareSystem);
  • Size - 0 ile 1 arasında değişen değer.

  • Position - Merceğin kaynağı (yayıcı) parlar (bir kamera, ışık veya ağ olabilir).

  • Lensflaresystem - lensflaresystem sınıfı kullanılarak oluşturulan nesne.

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 = BABYLON.Color3.Gray();
            var camera = new BABYLON.ArcRotateCamera(
               "Camera", -Math.PI / 2, 1.5, 15, BABYLON.Vector3.Zero(), scene);
            camera.attachControl(canvas, false);

            var light1 = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(0, -1, 0), scene);
            light1.groundColor = new BABYLON.Color3(0.2, 0.2, 0.2);
            light1.intensity = 0.5;
            
            var bigdiamond = BABYLON.Mesh.CreateSphere("sphere", 32,6, scene);
            bigdiamond.visibility = 0.6;
            var dmat = new BABYLON.StandardMaterial("dmat", scene);
            dmat.diffuseColor = BABYLON.Color3.Blue();
            
            var texture = new BABYLON.Texture("images/earth.jpg", scene);
            dmat.diffuseTexture = texture;		
            dmat.specularColor = BABYLON.Color3.White();
            bigdiamond.material = dmat;

            var lensflare1 = new BABYLON.LensFlareSystem("lensFlareSystem", camera, scene);
            var flare1 = new BABYLON.LensFlare(
               Math.random(), 0.15, new BABYLON.Color3(1, 1, 1), "images/sun1.png", lensflare1);

            var lensflare2 = new BABYLON.LensFlareSystem("lensFlareSystem", camera, scene);
            var flare2 = new BABYLON.LensFlare(
               Math.random()/2, 0.1, new BABYLON.Color3(1, 0, 0), "images/sun1.png", lensflare2);

            var lensflare3 = new BABYLON.LensFlareSystem("lensFlareSystem", camera, scene);
            var flare3 = new BABYLON.LensFlare(
               Math.random()/8, 0.1, new BABYLON.Color3(1, 0, 1), "images/sun1.png", lensflare3);

            var lensflare4 = new BABYLON.LensFlareSystem("lensFlareSystem", camera, scene);
            var flare4 = new BABYLON.LensFlare(
               Math.random()/12, 0.1, new BABYLON.Color3(0, 1, 0), "images/sun1.png", lensflare4);

            scene.registerBeforeRender(function() {
               scene.getCameraByID("Camera").alpha += 0.01;
            });		
            return scene;
         };
         var scene = createScene();
         engine.runRenderLoop(function() {
            scene.render();
         });
      </script>
   </body>
</html>

Çıktı

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

earth.jpg

images / sun1.png

Şu anda üzerinde çalışmakta olduğunuz ekranı yakalamak için, ekran baskısı tuşunu kullanarak yüksek çözünürlüklü ekran görüntüsü almak mümkün değildir. BabylonJS, bunu yapmaya yardımcı olan bir ekran görüntüsü API'si sağlar. Dosyayı png formatında kaydeder ve görüntünün kalitesinden ödün verilmez.

Sözdizimi

Ekranın ekran görüntüsünü almak için aşağıda gösterildiği gibi motor, kamera ve boyutu sağlamamız gerekiyor.

BABYLON.Tools.CreateScreenshot(engine, camera, { width: 1024, height: 300 }, function (data) {
   var img = document.createElement("img");
   img.src = data;
   document.body.appendChild(img);	
});

Bir kullanıcı tıkladığında ekran görüntüsü API'sini çağıran bir düğme yerleştirilir.

Ekran görüntüsü api'ye aktarılan motorda değişiklikler yapılır.

var engine = new BABYLON.Engine(canvas, true, { 
   preserveDrawingBuffer: true, stencil: true 
});

Gibi seçenekler gerektirir preserveDrawingBuffer ve stencil true olarak ayarlayın.

Düğme şu şekilde eklenir -

ssButton = document.createElement("input");
document.body.appendChild (ssButton);

Yukarıdaki düğmeye tıklama etkinliği eklenir ve createscreenshotdenir. Ekranın sonundaki ekran görüntüsünü güncelleyecektir. İmage src için kullanılan verilerin ekran görüntüsü url'si oluşturulmuştur.

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, { preserveDrawingBuffer: true, stencil: true });	
         var createScene  = function() {
            var scene = new BABYLON.Scene(engine);
            
            // Setup environment
            var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(1, 0.5, 0), scene);
            
            var camera = new BABYLON.ArcRotateCamera("ArcRotateCamera", 1, 0.8, 20, new BABYLON.Vector3(0, 0, 0), scene);
            camera.attachControl(canvas, true);

            var gmat = new BABYLON.StandardMaterial("mat1", scene);
            gmat.alpha = 1.0;
            
            //gmat.diffuseColor = new BABYLON.Color3(1, 0, 0);
            var texture = new BABYLON.Texture("images/mat.jpg", scene);
            gmat.diffuseTexture = texture;

            var ground = BABYLON.MeshBuilder.CreateGround("ground", {width: 150, height:15}, scene);
            ground.material = gmat;

            var mat = new BABYLON.StandardMaterial("mat1", scene);
            mat.alpha = 1.0;
            mat.diffuseColor = new BABYLON.Color3(1, 0, 0);
            
            var texture = new BABYLON.Texture("images/rugby.jpg", scene);
            mat.diffuseTexture = texture;

            var sphere = BABYLON.MeshBuilder.CreateSphere("sphere", {diameter: 2, diameterX: 3}, scene);
            sphere.position= new BABYLON.Vector3(15,1,0);
            sphere.material = mat;

            var faceColors = new Array();
            faceColors[1] = new BABYLON.Color4(0,1,0,1);   // green front

            var matcone = new BABYLON.StandardMaterial("mat1", scene);
            matcone.alpha = 1.0;
            matcone.diffuseColor = new BABYLON.Color3(0.9, 0, 2);
            
            var texture = new BABYLON.Texture("images/cone.jpg", scene);
            matcone.diffuseTexture = texture;

            var cone = BABYLON.MeshBuilder.CreateCylinder("cone", {diameterTop: 0, tessellation: 4}, scene);
            cone.position= new BABYLON.Vector3(12,1,0);
            cone.material = matcone;

            var matplane = new BABYLON.StandardMaterial("matplane", scene);
            matplane.alpha = 1.0;
            matplane.diffuseColor = new BABYLON.Color3(0.9, 0, 2);
            
            var texture = new BABYLON.Texture("images/board.jpg", scene);
            matplane.diffuseTexture = texture;
            var plane = BABYLON.MeshBuilder.CreatePlane("plane", {width: 5, height : 5}, scene);
            plane.position= new BABYLON.Vector3(9,2.5,0);
            plane.material = matplane;		
            
            var disc = BABYLON.MeshBuilder.CreateDisc("disc", {tessellation: 3}, scene);
            disc.position= new BABYLON.Vector3(5,1,0);		

            var mattorus = new BABYLON.StandardMaterial("matoct", scene);
            mattorus.alpha = 1.0;
            
            var texture = new BABYLON.Texture("images/ring.jpg", scene);
            mattorus.diffuseTexture = texture;
            
            var torus = BABYLON.MeshBuilder.CreateTorus("torus", {thickness: 0.5}, scene);		
            torus.position= new BABYLON.Vector3(3,1,0);
            torus.material = mattorus;

            var matoct = new BABYLON.StandardMaterial("matoct", scene);
            matoct.alpha = 1.0;
            
            var texture = new BABYLON.Texture("images/d1.png", scene);
            matoct.diffuseTexture = texture;
            var octahedron = BABYLON.MeshBuilder.CreatePolyhedron("oct", {type: 1, size: 3}, scene);
            
            octahedron.position= new BABYLON.Vector3(-2,5,0);
            octahedron.material = matoct;	

            var matico = new BABYLON.StandardMaterial("matico", scene);
            matico.alpha = 1.0;
            
            var texture = new BABYLON.Texture("images/diamond.jpg", scene);
            matico.diffuseTexture = texture;		
            
            var icosphere = BABYLON.MeshBuilder.CreateIcoSphere("ico", {radius: 5, radiusY: 3, subdivisions: 2}, scene);
            icosphere.position= new BABYLON.Vector3(-13,3,0);		
            icosphere.material = matico;		
            
            //add screenshot button
            var ssButton = document.getElementById("takescreenshot");
            if (ssButton == null) {
               ssButton = document.createElement("input");
               document.body.appendChild(ssButton);
            }
            
            ssButton.id = "takescreenshot";
            ssButton.type = "button";
            ssButton.style.position = "fixed";
            ssButton.style.right = "0px";
            ssButton.style.top = "100px";
            ssButton.value = "create screenshot";
            
            ssButton.onclick = function () {
               BABYLON.Tools.CreateScreenshot(engine, camera, { width: 1024, height: 300 },
               function (data) {
                  var img = document.createElement("img");
                  img.src = data;
                  document.body.appendChild(img);
               });
            };			
            return scene;
         }
         var scene = createScene();
         engine.runRenderLoop(function() {
            scene.render();
         });	
      </script>
   </body>
</html>

Çıktı

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

Bu demoda görüntüleri kullandık mat.jpg, rugby.jpg, cone.jpg, board.jpg, ring.jpg, d1.png, diamond.jpg. Görüntüler yerel olarak görüntülerde / klasörde 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.

Images / mat.jpg

Images / rugby.jpg

Images / cone.jpg

Images / board.jpg

Images / ring.jpg

Görüntüler / d1.png

Resimler / diamond.jpg

Ayna benzeri bir sahne oluşturmak için yansıma probları kullanılır. Bu, içindeki ağların yansımasını görmeye yardımcı olur. Ayna benzeri bir sahne oluşturmak için, yansımayı görmek istediğiniz sınıfı ve gerekli ağları aramanız gerekir. Daha sonra, ağları aşağıda gösterildiği gibi oluşturma listesine eklemeniz gerekir. Su yüzeyli skybox'ınız olduğunu ve bulutları veya ağaç yansımasını veya suda uçan kuşu göstermeniz gerektiğini düşünün, bunu yansıtma sondasını kullanarak yapabilirsiniz ve oluşturulan ağlar aşağıda gösterildiği gibi render listesine eklenebilir.

Sözdizimi

var probe = new BABYLON.ReflectionProbe("main", 512, scene);
probe.renderList.push(yellowSphere);
probe.renderList.push(greenSphere);	
probe.renderList.push(blueSphere);	
probe.renderList.push(mirror);

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

            var camera = new BABYLON.ArcRotateCamera("camera1", 0, 0, 10, BABYLON.Vector3.Zero(), scene);

            camera.setPosition(new BABYLON.Vector3(0, 5, -10));
            camera.attachControl(canvas, true);

            camera.upperBetaLimit = Math.PI / 2;
            camera.lowerRadiusLimit = 4;

            var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(0, 1, 0), scene);
            light.intensity = 0.7;

            var knot = BABYLON.Mesh.CreateTorusKnot("knot", 1, 0.4, 128, 64, 2, 3, scene);

            var yellowSphere = BABYLON.Mesh.CreateSphere("yellowSphere", 16, 1.5, scene);
            yellowSphere.setPivotMatrix(BABYLON.Matrix.Translation(3, 0, 0));

            var blueSphere = BABYLON.Mesh.CreateSphere("blueSphere", 16, 1.5, scene);
            blueSphere.setPivotMatrix(BABYLON.Matrix.Translation(-1, 3, 0));

            var greenSphere = BABYLON.Mesh.CreateSphere("greenSphere", 16, 1.5, scene);
            greenSphere.setPivotMatrix(BABYLON.Matrix.Translation(0, 0, 3));

            // Mirror
            var mirror = BABYLON.Mesh.CreateBox("Mirror", 1.0, scene);
            mirror.scaling = new BABYLON.Vector3(100.0, 0.01, 100.0);
            mirror.material = new BABYLON.StandardMaterial("mirror", scene);
            mirror.material.diffuseTexture = new BABYLON.Texture("images/square.jpg", scene);
            
            mirror.material.diffuseTexture.uScale = 10;
            mirror.material.diffuseTexture.vScale = 10;
            mirror.material.reflectionTexture = new BABYLON.MirrorTexture("mirror", 1024, scene, true);
            
            mirror.material.reflectionTexture.mirrorPlane = new BABYLON.Plane(0, -1.0, 0, -2.0);
            mirror.material.reflectionTexture.renderList = [greenSphere, yellowSphere, blueSphere, knot];
            mirror.material.reflectionTexture.level = 0.5;
            mirror.position = new BABYLON.Vector3(0, -2, 0);	

            // Main material	
            var mainMaterial = new BABYLON.StandardMaterial("main", scene);
            knot.material = mainMaterial;

            var probe = new BABYLON.ReflectionProbe("main", 512, scene);
            probe.renderList.push(yellowSphere);
            probe.renderList.push(greenSphere);	
            probe.renderList.push(blueSphere);	
            probe.renderList.push(mirror);	
            
            mainMaterial.diffuseColor = new BABYLON.Color3(1, 0.5, 0.5);	
            mainMaterial.reflectionTexture = probe.cubeTexture;
            mainMaterial.reflectionFresnel<h3>Parameters</h3> = new BABYLON.Fresnel<h3>Parameters</h3>();
            mainMaterial.reflectionFresnel<h3>Parameters</h3>.bias = 0.02;

            // Fog
            scene.fogMode = BABYLON.Scene.FOGMODE_LINEAR;
            scene.fogColor = scene.clearColor;
            scene.fogStart = 20.0;
            scene.fogEnd = 50.0;

            // Animations
            scene.registerBeforeRender(function () {
               yellowSphere.rotation.y += 0.01;
               greenSphere.rotation.y += 0.01;
               blueSphere.rotation.y += 0.01;
            });
            return scene;
         };
         var scene = createScene();
         engine.runRenderLoop(function() {
            scene.render();
         });
      </script>
   </body>
</html>

Çıktı

Bu demoda görüntü kullandık square.jpg. Görüntüler yerel olarak görüntülerde / klasörde 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.

images / square.jpg

StandardRenderingPipeline, gerçek dünyayla ilgili bir dizi son işlem efektiyle birlikte gelir. Işık efekti ve aydınlatma efekti gibi farklı işlem sonrası efektler vardır.

Aşağıda verilen örnekte lens efekti, ışıkların işlem sonrası efekti gibi çeşitli efektler göreceksiniz.

HDR küp dokusu kullanır ve doku .hdr olmalıdır. Bu doku, kamerayı döndürürken görülebilen panaromik bir efekt verir.

var hdrTexture = new BABYLON.HDRCubeTexture("images/GravelPlaza_REF.hdr", scene, 512);

Aşağıdaki kod satırıyla efekti elde etmek için standart oluşturma işlem hattı sınıfı çağrılır -

// Create rendering pipeline
var pipeline = new BABYLON.StandardRenderingPipeline("standard", scene, 1.0 / devicePixelRatio, null, [camera]);
pipeline.lensTexture = new BABYLON.Texture("images/lensdirt.jpg", scene)

Aşağıda gösterilen demoda, küp doku ortamını oluşturacağız. Aynı için zemin ağını kullanacağız ve tüm sahneye standart işleme boru hattı uygulayacağız.

Doku, bir görüntü olan lensTexture kullanılarak verilir ve sahneyi hareket ettirirken aynı dokuyu görebilirsiniz.

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);
            var camera = new BABYLON.ArcRotateCamera("Camera", -Math.PI / 4, Math.PI / 2.5, 200, BABYLON.Vector3.Zero(), scene);
            camera.attachControl(canvas, true);
            camera.minZ = 0.1;

            // Light
            new BABYLON.PointLight("point", new BABYLON.Vector3(0, 40, 0), scene);

            // Environment Texture
            var hdrTexture = new BABYLON.HDRCubeTexture("images/GravelPlaza_REF.hdr", scene, 512);

            // Skybox
            var hdrSkybox = BABYLON.Mesh.CreateBox("hdrSkyBox", 1000.0, scene);
            var hdrSkyboxMaterial = new BABYLON.PBRMaterial("skyBox", scene);
            hdrSkyboxMaterial.backFaceCulling = false;
            hdrSkyboxMaterial.reflectionTexture = hdrTexture.clone();
            hdrSkyboxMaterial.reflectionTexture.coordinatesMode = BABYLON.Texture.SKYBOX_MODE;
            hdrSkyboxMaterial.microSurface = 1.0;
            hdrSkyboxMaterial.cameraExposure = 0.6;
            hdrSkyboxMaterial.cameraContrast = 1.6;
            hdrSkyboxMaterial.disableLighting = true;
            hdrSkybox.material = hdrSkyboxMaterial;
            hdrSkybox.infiniteDistance = true;

            // Create mesh
            var woodbox = BABYLON.MeshBuilder.CreateBox("plane", { 
               width: 40, 
               height: 50, 
               depth: 65 
            }, scene);

            var wood = new BABYLON.PBRMaterial("wood", scene);
            wood.reflectionTexture = hdrTexture;
            wood.directIntensity = 1.5;
            wood.environmentIntensity = 0.5;
            wood.specularIntensity = 0.3;
            wood.cameraExposure = 0.9;
            wood.cameraContrast = 1.6;

            wood.reflectivityTexture = new BABYLON.Texture("images/reflectivity.png", scene);
            wood.useMicroSurfaceFromReflectivityMapAlpha = true;

            wood.albedoColor = BABYLON.Color3.White();
            wood.albedoTexture = new BABYLON.Texture("images/albedo.png", scene);
            woodbox.material = wood;

            // Create rendering pipeline
            var pipeline = new BABYLON.StandardRenderingPipeline("standard", scene, 1.0 / devicePixelRatio, null, [camera]);
            pipeline.lensTexture = new BABYLON.Texture("images/lensdirt.jpg", scene);

            // Return scene
            return scene;
         };
         var scene = createScene();
         engine.runRenderLoop(function() {
            scene.render();
         });
      </script>
   </body>
</html>

Görüntüler klasörü oluşturun ve .hdr dosyasını içinde saklayın. Www.hdrlabs.com'dan görüntüleri / GravelPlaza_REF.hdr kullandık .

İstediğiniz .hdr tipi dosyaları indirebilir ve demo bağlantısında kullanabilirsiniz.

Çıktı

Yukarıdaki kod satırı aşağıdaki çıktıyı üretecektir -

Bu demoda görüntüleri kullandık images/GravelPlaza_REF.hdr, images/reflectivity.png, images/albedo.png, images/lensdirt.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. Lütfen .hdr dosyalarının boyutu çok büyük olduğu için buraya yapıştırmanın zor olduğunu unutmayın.

Images / reflektiflik.png

Images / albedo.png

Images / lensdirt.png

Gölgelendirici malzemesi size çıktı olarak bir malzeme verir. Bu malzemeyi herhangi bir ağa uygulayabilirsiniz. Temel olarak verileri sahnenizden tepe noktasına ve parça gölgelendiricilerine aktarır.

Gölgelendirici malzemesini elde etmek için aşağıdaki sınıfa denir -

var myShaderMaterial = new BABYLON.ShaderMaterial(name, scene, route, options);

Parametreler

Gölgelendirici malzemesiyle ilgili aşağıdaki parametreleri göz önünde bulundurun -

  • Name - Gölgelendiriciyi adlandıran bir dize.

  • Scene - Gölgelendiricinin kullanılacağı sahne.

  • Route - Üç yoldan biriyle gölgelendirici koduna giden yol -

object - {
   vertex: "custom", 
   fragment: "custom" 
}, used with 
BABYLON.Effect.ShadersStore["customVertexShader"] and
BABYLON.Effect.ShadersStore["customFragmentShader"]

object - { 
   vertexElement: "vertexShaderCode", 
   fragmentElement: "fragmentShaderCode" 
}, 
used with shader code in <script> tags

string - "./COMMON_NAME",

Sonda bahsedilen sözdizimi, index.html klasöründeki COMMON_NAME.vertex.fx ve COMMON_NAME.fragment.fx harici dosyalar ile kullanılır.

  • Options - isimlerini dizeler olarak içeren öznitelikleri ve üniforma dizilerini içeren nesne.

Değerlere sahip gölgelendirici sözdizimi aşağıda gösterildiği gibidir -

var shaderMaterial = new BABYLON.ShaderMaterial("shader", scene, {
   vertex: "custom",
   fragment: "custom",
},
{
   attributes: ["position", "normal", "uv"],
   uniforms: ["world", "worldView", "worldViewProjection", "view", "projection"]
});

Nitelikler dizi biçiminde olmalıdır. Bunlar, vector3 3B kayan nokta vektörleri olan pozisyon, normal ve uv içerir.

  • vec2 - Kayan noktalı sayıların iki boyutlu vektörü.

  • vec3 - Üç boyutlu kayan nokta sayıları vektörü.

  • mat4 - 4 sütun ve 4 satırlık kayan nokta sayılarına sahip bir matris.

  • gl_Position - Ekran koordinatları için konumsal veri sağlar.

  • gl_FragColor - Ekrandaki bir yüzeyin gösterimi için renk verileri sağlar.

Yukarıdakiler GLSL dilinde yerleşik değişkenlerdir.

Köşe konumlarının olabildiğince doğru olması gerektiğinden, tüm kayan nokta sayıları yüksek hassasiyete sahip olacak şekilde ayarlanmalıdır. Bu, her gölgelendirici için kodun başında yapılır -precision highp float. Hassas highp float, bir şamandıra için ne kadar hassasiyet kullanılacağını belirler.

Aşağıdaki demo, birinci nesne yöntemine dayanmaktadır.

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">
         //downloaded HDR files from :http://www.hdrlabs.com/sibl/archive.html
         var canvas = document.getElementById("renderCanvas");
         var engine = new BABYLON.Engine(canvas, true);
         var createScene  = function() {
            var scene = new BABYLON.Scene(engine);

            var camera = new BABYLON.ArcRotateCamera(
               "Camera", Math.PI / 4, Math.PI / 4, 4, BABYLON.Vector3.Zero(), scene);

            camera.attachControl(canvas, true);

            var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(0, 1, 0), scene);

            BABYLON.Effect.ShadersStore["customVertexShader"] = "\r\n" + 
               "precision highp float;\r\n" + 
               "// Attributes\r\n" + 
               "attribute vec3 position;\r\n" + 
               "attribute vec2 uv;\r\n" + 
               "// Uniforms\r\n" + 
               "uniform mat4 worldViewProjection;\r\n" + 

               "// Varying\r\n" + 
               "varying vec2 vUV;\r\n" + 
               "void main(void) {
                  \r\n" + 
                  "gl_Position = worldViewProjection * vec4(position, 1.0);\r\n" + 
                  "vUV = uv;\r\n"+"
               }
               \r\n";
               BABYLON.Effect.ShadersStore["customFragmentShader"] = "\r\n"+
                  "precision highp float;\r\n" + 
                  "varying vec2 vUV;\r\n" + 
                  "uniform sampler2D textureSampler;\r\n" + 
               "void main(void) {
                  \r\n"+
                  "gl_FragColor = texture2D(textureSampler, vUV);\r\n"+"
               }
               \r\n";

            var shaderMaterial = new BABYLON.ShaderMaterial("shader", scene, {
               vertex: "custom",
               fragment: "custom",
            },
            
            {
               attributes: ["position", "normal", "uv"],
               uniforms: ["world", "worldView", "worldViewProjection", "view", "projection"]
            });

            var mainTexture = new BABYLON.Texture("images/mat.jpg", scene);

            shaderMaterial.setTexture("textureSampler", mainTexture);

            shaderMaterial.backFaceCulling = false;

            var box = BABYLON.MeshBuilder.CreateBox("box", {}, scene);
            box.material = shaderMaterial;
            return scene;
         };
         var scene = createScene();
         engine.runRenderLoop(function() {
            scene.render();
         });
      </script>
   </body>
</html>

Çıktı

Yukarıdaki kod satırı aşağıdaki çıktıyı üretecektir -

Bu demoda görüntü kullandık mat.jpg. Görüntüler yerel olarak görüntülerde / klasörde 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.

Images / mat.jpg

Babylonjs, iskeletler ve kemikler oluşturmak için API'ler sunar.

Sözdizimi

Şimdi farklı işlevler için sözdizimini görelim.

İskelet için

BABYLON.Skeleton = function (name, id, scene)

Kemik için

BABYLON.Bone = function (name, skeleton, parentBone, matrix)

Skeletons and Bones blender kullanılarak oluşturulabilir ve aynısı .babylonjs biçiminde dışa aktarılabilir.

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

            //Adding a light
            var light = new BABYLON.PointLight("Omni", new BABYLON.Vector3(20, 20, 100), scene);

            //Adding an Arc Rotate Camera
            var camera = new BABYLON.ArcRotateCamera("Camera", 0, 0.8, 100, BABYLON.Vector3.Zero(), scene);
            camera.attachControl(canvas, false);

            BABYLON.SceneLoader.ImportMesh(
               "him", "scenes/Dude/", "Dude.babylon", scene, function (newMeshes, particleSystems, skeletons) {
               var dude = newMeshes[0];
               console.log(dude);
               dude.rotation.y = Math.PI;
               dude.position = new BABYLON.Vector3(0, 0, -80);
               scene.beginAnimation(skeletons[0], 0, 100, true, 1.0);
            })
            return scene;
         };
         var scene = createScene();
         engine.runRenderLoop(function() {
            scene.render();
         });
      </script>
   </body>
</html>

Yukarıdaki demo bağlantısında Dude.babylon ağını kullandık. Dude.babylon için json dosyasını buradan indirebilirsiniz -

Dude.babylon

Çıktıyı aşağıda gösterildiği gibi almak için dosyayı sahneler halinde kaydedin.

Çıktı

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

Açıklama

Import mesh için babylonjs dude mesh kullandık.

Ağ bize iskeletler veriyor. Örneğin iskelet = iskeletler [0];

İskeletlerden kemik almak için aşağıdaki komutu uygulayın -

skeleton.bones; //it gives a array.

Yukarıdaki demoda 2 küre oluşturduk ve ağa geçtik. Bunun için aşağıdaki komutları uyguladık -

sphere.attachToBone(skeleton.bones[30], dude);

Ve,

sphere1.attachToBone(skeleton.bones[40], dude);

attachToBone kemiğe herhangi bir ağ verebileceğiniz bir fonksiyondur.

Skeleton.bones[30] ve skeleton.bones[40] iskeletin ellerini ifade eder.

Babylon.js, sahneye etkileşimler eklemeye yardımcı olan Fizik motoru için eklenti sistemine sahiptir. 2 nesne arasındaki çarpışmayı ve zıplamayı gösterir ve daha çok gerçek hayat etkileşimi gibi yapar Demo, topların birbirleriyle çarpıştığını ve etrafta hareket ettiğini gösterecektir. Bilardo gibi oyunlarda, oyuncunun sopayla topa vurduğu ve topların diğer toplarla çarpıştığı oyunlarda aynı davranışı görüyoruz.Burada Fizik Motoru topların gerçekçi bir görünümünü vermeye çalışıyor. zemin yüzeyine çarptığında çarpışıyor ve sıçrıyor. Motor, gerekli olduğunda ve ayrıca ağlar diğer ağlarla çarpışırsa belirli eylemleri gerçekleştirmemiz gerektiğinde çağrılacak impuls, kuvvet, değişen hız, geri arama işlevlerinin uygulanmasına yardımcı olan sınıflara ve API'ye sahiptir.

Kullanılabilecek 3 Fizik eklentisi vardır -

  • Cannon.js
  • Oimo.js
  • Energy.js

Demo

<!doctype html>
<html>
   <head>
      <meta charset = "utf-8">
      <title>BabylonJs - Ball/Ground Demo</title>
      <script type = "text/javascript" src="https://cdn.babylonjs.com/Oimo.js"></script>
      <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 v3 = BABYLON.Vector3;
         
         var createScene = function () {	
            // This creates a basic Babylon Scene object (non-mesh)
            var scene = new BABYLON.Scene(engine);

            var camera = new BABYLON.ArcRotateCamera("Camera", 0.86, 1.37, 250, BABYLON.Vector3.Zero(), scene);
            
            camera.attachControl(canvas);
            camera.maxZ = 5000;
            camera.lowerRadiusLimit = 120;
            camera.upperRadiusLimit = 430;
            camera.lowerBetaLimit =0.75;
            camera.upperBetaLimit =1.58 ;

            new BABYLON.HemisphericLight("hemi", new BABYLON.Vector3(0, 1, 0), scene);

            var randomNumber = function (min, max) {
               if (min == max) {
                  return (min);
               }
               var random = Math.random();
               return ((random * (max - min)) + min);
            };

            var mat = new BABYLON.StandardMaterial("ground", scene);
            var t = new BABYLON.Texture("images/gr1.jpg", scene);
            t.uScale = t.vScale = 10;
            mat.diffuseTexture = t;
            mat.specularColor = BABYLON.Color3.Black();
            
            var g = BABYLON.Mesh.CreateBox("ground", 200, scene);
            
            g.position.y = -20;
            g.position.x = 0
            g.scaling.y = 0.01;
            g.material = mat;	
            
            scene.enablePhysics(new BABYLON.Vector3(0, -10, 0), new BABYLON.OimoJSPlugin());
            
            g.physicsImpostor = new BABYLON.PhysicsImpostor(g, BABYLON.PhysicsImpostor.BoxImpostor, { 
               mass: 0, 
               restitution: 0.9 
            }, scene);
            
            var getPosition = function(y) {
               return new v3(randomNumber(-100, 100), y, randomNumber(-100, 100));
            };
            
            var allspheres = [];
            var y = 50;
            var max = 50;
            
            for (var index = 0; index < max; index++) {
               var redSphere = BABYLON.Mesh.CreateSphere("s" + index, 32, 8, scene);
               redSphere.position = getPosition(y);
               redSphere.physicsImpostor = new BABYLON.PhysicsImpostor(redSphere, BABYLON.PhysicsImpostor.SphereImpostor,{
                  mass: 1, restitution:0.9
               }, scene);
               
               redSphere.physicsImpostor.applyImpulse(new BABYLON.Vector3(1, 2, -1), new BABYLON.Vector3(1, 2, 0));
               
               var redMat = new BABYLON.StandardMaterial("ground", scene);
               redMat.diffuseColor = new BABYLON.Color3(0.4, 0.4, 0.4);
               redMat.specularColor = new BABYLON.Color3(0.4, 0.4, 0.4);
               redMat.emissiveColor = BABYLON.Color3.Red();
               redSphere.material = redMat;
               
               // push all spheres in the allspheres variable
               allspheres.push(redSphere);			
               y += 10; // increment height
            }
            scene.registerBeforeRender(function() {
               allspheres.forEach(function(obj) { 
                  // if the sphers falls down its updated again over here
                  // If object falls
                  if (obj.position.y < -100) {
                     obj.position = getPosition(200);				
                  }
               });
            })
            return scene;
         };
         var scene = createScene();
         engine.runRenderLoop(function() {
            scene.render();
         });
      </script>
   </body>
</html>

Çıktı

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

Bu demoda görüntü kullandık images/gr1.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.

images / gr1.jpg

Açıklama

scene.enablePhysics(new BABYLON.Vector3(0,-10,0), new BABYLON.OimoJSPlugin());

Yukarıdaki satır Fizik eklentisini etkinleştirir. Seçtiğiniz eklentiyi kullanabilirsiniz. OimoJsplugin () kullandık.

g.physicsImpostor = newBABYLON.PhysicsImpostor(g, BABYLON.PhysicsImpostor.BoxImpostor, { 
   mass: 0, 
   restitution: 0.9 
}, scene);

Etkileşim için Fizik motoru sahtekar kullanır. Sahtekarlığa uygulandığında, nesnenin şekli değiştirilemez. Değiştirilirse, yeni bir sahtekarın yaratılması gerekecektir.

Küre için, bir sahtekarlığı ayarlayacağız ve gösterildiği gibi bir sıçrama efekti için ona itici güç ekleyeceğiz -

redSphere.physicsImpostor = new BABYLON.PhysicsImpostor(
   redSphere, BABYLON.PhysicsImpostor.SphereImpostor, { 
      mass: 1, 
      restitution:0.9
   }, scene
);

redSphere.physicsImpostor.applyImpulse(
   new BABYLON.Vector3(1, 2, -1), 
   new BABYLON.Vector3(1, 2, 0)
);

Fizik için parametreler

Fizik efektleri için aşağıdaki parametreleri göz önünde bulundurun -

Nesne

Burada, etkileşimi uygulamak istediğiniz nesne. Örneğin küre, kutu vb.

Tür

Tür aşağıdakilerden biri olabilir -

  • BABYLON.PhysicsImpostor.SphereImpostor;
  • BABYLON.PhysicsImpostor.BoxImpostor;
  • BABYLON.PhysicsImpostor.PlaneImpostor;
  • BABYLON.PhysicsImpostor.MeshImpostor;
  • BABYLON.PhysicsImpostor.CylinderImpostor;
  • BABYLON.PhysicsImpostor.ParticleImpostor;
  • BABYLON.PhysicsImpostor.HeightmapImpostor;

kitle

Zorunlu olan tek parametre, nesnenin kg cinsinden kütlesi olan kütledir. Değer olarak 0, statik bir sahtekar yaratacaktır - zeminler için iyidir.

İade

Bu, çarpışırken vücudun "geri vereceği" kuvvet miktarıdır. Düşük bir değer hemen çıkma yaratmaz ve 1 değeri çok hızlı bir etkileşim olur.

scene.registerBeforeRender(function() {
   allspheres.forEach(function(obj) { 
      // if the sphers falls down its updated again over here
      // If object falls
      if (obj.position.y < -100) {
         obj.position = getPosition(200);
      }					
   });
})

Yukarıdaki kod yere düşen küreleri geri getiriyor. Düşmüş herhangi bir küre için zemini güncellemeye devam ediyor. Fizik etkisini görmek için tarayıcıda yukarıdaki demoyu deneyin.

Ses ve müzik olmadan oyun eksiktir. BabylonJS ses motoru, oyuna ses efektleri eklemeye yardımcı olan bir API ile birlikte gelir. Oyunda bir kavga görüldüğünde, silah atışını yapmanız gerekiyor, aynısı burada da babylonjs ses motoru ile gerçekleştirilebilir. Oyunlara klavye / fare kontrolleri efektine göre ses efektini alabilirsiniz. Ses motoru ortam sesi, özel ses ve yönlü ses sunar. Motor, .mp3 ve .wav ses formatlarını destekler.

Sözdizimi

var music = new BABYLON.Sound(
   "Music", "sound.wav", scene, null, { 
      loop: true, 
      autoplay: true 
   }
);

Parametreler

Ses motoruyla ilgili aşağıdaki parametreleri göz önünde bulundurun -

  • Name - Sesin adı.

  • URL - oynatılacak sesin url'si.

  • Scene - Sesin çalınması gereken sahne.

  • Callbackfunction- Ses çalınmaya hazır olduğunda çağrılan geri arama işlevi.Şu anda boş. Birkaç örnek üzerinden geçip nasıl kullanılacağını öğreneceğiz.

  • Json object - Bu nesne, yapılması gerekenin temel ayrıntılarına sahiptir.

  • sound.autoplay - Bununla, dosya indirildikten sonra ses otomatik olarak çalar.

  • loop:true - Bu, sesin sürekli olarak bir döngü içinde çalacağı anlamına gelir.

Proje dizininizde ses klasörü oluşturun ve çıktıyı test etmek için herhangi bir örnek ses dosyasını indirin.

Şimdi oluşturduğumuz sahneye ses ekleyelim.

Demo

<!doctype html>
<html>
   <head>
      <meta charset = "utf-8">
      <title>BabylonJs - Basic Scene- Playing sounds and music</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);
            camera.attachControl(canvas, true);
            
            var music = new BABYLON.Sound("sound", "sounds/scooby.wav", scene, null, { 
               loop: true, 
               autoplay: true 
            });	
            return scene;
         };
         var scene = createScene();
         engine.runRenderLoop(function() {
            scene.render();
         });
      </script>
   </body>
</html>

Çıktı

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

Şimdi nasıl olduğunu kontrol edelim callbackişlevi çalışır. Sesin otomatik olarak çalınmasını istemiyorsanız veya sesi yalnızca istediğiniz zaman çalmak istiyorsanız, bunu geri arama işlevi ile yapabilirsiniz.

Örneğin,

Var music = new BABYLON.Sound ("Music", "music.wav", scene, function callback() {music.play();});

Demo

<!doctype html>
<html>
   <head>
      <meta charset = "utf-8">
      <title>BabylonJs - Basic Scene- Playing sounds and music</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);
            camera.attachControl(canvas, true)
            
            var music = new BABYLON.Sound(
               "sound", "sounds/scooby.wav", scene, function callback() { setTimeout(function() {music.play();}, 5000)});	
            return scene;
         };
         var scene = createScene();
         engine.runRenderLoop(function() {
            scene.render();
         });
      </script>
   </body>
</html>

Geri aramada setTimeout kullanacağız. Bu, sesin yalnızca belirli bir süre sonra çalınmasını istediğimiz anlamına gelir. Zamanlayıcı olarak 5s ekledik, böylece Scooby.wav dosyaları indirilip 5s tamamlandığında ses çalacak.

Klavyede tıklama ve tuşlarla sesler çalın

Sahnenin herhangi bir yerine tıkladığınızda, patlayıcı ses efekti duyacaksınız ve sol, sağ, yukarı veya aşağı ok tuşlarından herhangi birine basarsanız, patlayıcı ses efektini çalacaktır.

Tıklama için etkinliği ekliyoruz onmousedownpencereye ve anahtarlar için, keydown olayını kullanacağız. Anahtar koduna bağlı olarak ses çalınır.

Demo

<!doctype html>
<html>
   <head>
      <meta charset = "utf-8">
      <title>BabylonJs - Basic Scene- Playing sounds and music</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);
            camera.attachControl(canvas, true)
            
            var sound = new BABYLON.Sound("gunshot", "sounds/explosion.wav", scene);

            window.addEventListener("mousedown", function (evt) {	
               if (evt.button === 0) { // onclick
                  sound.play();
               }
            });

            window.addEventListener("keydown", function (evt) { // arrow key left right up down
               if (evt.keyCode === 37 || evt.keyCode === 38 || evt.keyCode === 39 || evt.keyCode === 40) {
                  sound.play();
               }
            });		
            return scene;
         };
         var scene = createScene();
         engine.runRenderLoop(function() {
            scene.render();
         });
      </script>
   </body>
</html>

Çıktı

Yukarıdaki kod satırı aşağıdaki çıktıyı üretecektir -

Başlangıçta karşılaştığımız json nesnesindeki sesin seviyesini kontrol edebilirsiniz.

Örneğin,

Var music = new BABYLON.Sound("sound", "sounds/scooby.wav", scene, null, { 
   loop: true, 
   autoplay: true, 
   volume:0.5 
});

Bir ses dosyasının ne zaman bittiğini bilmek için, aşağıdaki şekilde kullanılabilecek bir olay vardır -

music.onended = function () {	
   console.log("sound ended");
   
   //you can do the required stuff here like play it again or play some other sound etc.
};

SetVolume özelliği, yapıcının yanı sıra sesi de kontrol etmek istemeniz durumunda kullanılabilir.

Örneğin,

music.setVolume(volume);

Sahnenizde birden fazla ses çalıyorsanız, oluşturulan tüm sesler için global bir ses ayarlayabilirsiniz.

Örneğin,

BABYLON.Engine.audioEngine.setGlobalVolume(0.5);

Uzamsal 3B Ses Oluşturma

Sesi uzamsal sese dönüştürmek istiyorsanız (boşluk sesine benzer ses), ses oluşturucunuza seçenekler eklemeniz gerekir.

Örneğin,

var music = new BABYLON.Sound("music", "sounds/explosion.wav", scene, null, { 
   loop: false, 
   autoplay: true, 
   spatialSound: true 
});

Uzaysal ses için farklı seçenekler aşağıdadır -

  • DistanceModel- Varsayılan olarak "doğrusal" bir denklem kullanıyor. Diğer seçenekler "ters" veya "üstel" dir.

  • MaxDistance - 100 olarak ayarlanmıştır. Bu, dinleyici sesten 100 birimden uzaklaştığında sesin 0 olacağı anlamına gelir. Artık sesi duyamazsınız.

  • PanningModel- "HRTF" olarak ayarlanmıştır. Spesifikasyon, insan deneklerinden ölçülen dürtü yanıtları ile bir evrişim kullanan daha yüksek kaliteli bir mekansalleştirme algoritması olduğunu söylüyor. Stereo çıkışı ifade eder.

  • MaxDistance - Sadece distanceModel doğrusal olduğunda kullanılır, ters veya üstel olarak kullanılmaz.

Uzamsal ses ile demo

<!doctype html>
<html>
   <head>
      <meta charset = "utf-8">
      <title>BabylonJs - Basic Scene- Playing sounds and music</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);
            camera.attachControl(canvas, true);	
            
            var music = new BABYLON.Sound(
               "music", "sounds/explosion.wav", scene, null, {
                  loop: false, autoplay: true, spatialSound: true, distanceModel: "exponential"
               }
            );
            return scene;
         };
         var scene = createScene();
         engine.runRenderLoop(function() {
            scene.render();
         });
      </script>
   </body>
</html>

Bir ağa ses eklemek

BABYLON.Sound'u kullanarak ağınıza ses ekleyebilirsiniz. Ağ hareket ediyorsa, ses de onunla birlikte hareket edecektir.AttachtoMesh (mesh) kullanılacak yöntemdir.

Demo

<!doctype html>
<html>
   <head>
      <meta charset = "utf-8">
      <title>BabylonJs - Basic Scene- Playing sounds and music</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);
            camera.attachControl(canvas, true);

            var materialforbox = new BABYLON.StandardMaterial("texture1", scene);
            var box = BABYLON.Mesh.CreateBox("box", '2', scene);	
            box.material  = materialforbox;
            materialforbox.ambientColor = new BABYLON.Color3(1, 0, 0.2);

            var music = new BABYLON.Sound("music", "sounds/explosion.wav", scene, null, { 
               loop: false, 
               autoplay: true, 
               spatialSound: true, 
               distanceModel: "exponential"
            });	
            music.attachToMesh(box);
            return scene;
         };
         var scene = createScene();
         engine.runRenderLoop(function() {
            scene.render();
         });
      </script>
   </body>
</html>

Çıktı

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