BabylonJS - Ağ

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 boyutlu 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; sprite resmi, resimlerden oluşan bir koleksiyondur. Görüntüyü, küpün tüm kenarları 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 -

Mesh oluşturucu ile oluşturulan bir dizi şekil artık tek bir demoda birlikte kullanılacak. 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şim, 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 fonksiyon, 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şiyorsa 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; böylece, çarpışma seçme yardımı ile, 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 olan 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ştirildikten sonra 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 başlangıç ​​noktasından, 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ı çalıştırarak 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 fonksiyon, ışı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 3D 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österilmektedir -

  • 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 Hacimsel Işık Dağılımı

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 etkinleştirilmemiştir. Bunu etkinleştirmek için, gerektiği gibi bir ağ oluşturmamız ve faset verilerini ona güncellememiz gerekir.