BabylonJS - Çıkartmalar
Çıkartmalar, 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
