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