BabylonJS - Jala
Dalam bab ini, kita akan belajar membuat berbagai bentuk menggunakan pembuat jaring. Kami telah mempelajari cara membuat bentuk di salah satu bab sebelumnya.
Perbedaannya adalah dengan meshbuilder memberi Anda fleksibilitas untuk menambahkan warna, gambar pada bentuk.
CreateBox menggunakan MeshBuilder
Sekarang mari kita lihat cara membuat kotak menggunakan MeshBuilder.
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>Keluaran
Baris kode di atas menghasilkan output berikut -
Untuk contoh di atas, kami telah menggunakan gambar sprite seperti yang ditunjukkan di bawah ini. Ini memiliki 3 kolom horizontal dan 2 baris vertikal.
Dalam demo ini, kami telah menggunakan gambar bernama cube.png. Gambar disimpan dalam gambar / folder secara lokal dan juga ditempel di bawah untuk referensi. Harap dicatat cube.png adalah gambar sprite, gambar sprite adalah kumpulan gambar. Kami ingin menampilkan gambar pada sebuah kubus jadi ingin semua sisi kubus menjadi satu. Anda juga dapat mendownload gambar sprite pilihan Anda dan gunakan di link demo.
Pembuat createBox memberi Anda opsi untuk ukuran.
Sebagai contoh,
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
};Ini disebut menerapkan tekstur ke meshbuilder menggunakan metode createBox. Kami telah menggunakan gambar cube.png yang memiliki 3 kolom secara horizontal dan 2 baris secara vertikal. Kubus atau kotak memiliki 6 sisi.
Untuk menerapkan tekstur kita menggunakan parameter options. Misalnya,
Var box = BABYLON.MeshBuilder.CreateBox ('box', options, scene);Kami telah mendefinisikan sebuah array yang disebut faceUV dengan ukuran 6 yang merupakan sisi kubus. Array ini akan selalu memiliki elemen Vector4. Setiap Vector4 (x, y, z, w) akan didefinisikan sebagai berikut -
- x = Ubottom
- y = Vbottom
- z = Utop
- w = Vtop
Vektor-vektor tersebut berada dalam kisaran [0, 1]. Ubottom dan Vbottom adalah koordinat 2D dari titik kiri bawah tempat pemangkasan tekstur dimulai. Utop, Vtop adalah titik kanan atas tempat pemotongan tekstur berakhir.
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);
}Misalkan tekstur default, yaitu gambar yang diberikan diterapkan ke semua permukaan kotak. Jika Anda ingin mengubah hanya 1 sisi atau 1 sisi kotak, Anda dapat langsung menetapkan nilai seperti yang ditunjukkan di bawah ini -
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);Contoh
<!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>Keluaran
Baris kode di atas menghasilkan output berikut -
Dalam demo ini, kami telah menggunakan gambar yang disebut 3d.png. Gambar disimpan dalam gambar / folder secara lokal dan juga ditempel di bawah untuk referensi. Harap dicatat 3d.png adalah gambar sprite; gambar sprite adalah kumpulan gambar. Kami ingin menunjukkan gambar pada sebuah kubus dengan semua sisi kubus menyatu. Anda juga dapat mendownload gambar sprite pilihan Anda dan gunakan di link demo.
Tekstur yang digunakan untuk kotak - images/3d.png
MeshCylinder
Di bagian ini, kita akan melihat bagaimana membuat MeshCylinder.
Untuk membuat MeshCylinder, Anda perlu menggunakan kelas BABYLON.MeshBuilder.CreateCylinder.
Parameter untuk kelas adalah sebagai berikut -
var meshcylinder = BABYLON.MeshBuilder.CreateCylinder("meshcylinder", {
height: 3,
diameter: 35,
tessellation: 52
}, scene);Perbedaan antara CreateCylinder menggunakan mesh dan meshbuilder adalah - Anda dapat menggunakan opsi di meshbuilder. Saat ini kami menggunakan tinggi, diameter, dan tessellation sebagai opsi untuk diteruskan ke silinder. Kami menggunakan material standar dengan wireframe sebagai material mesh ini. Periksa output di browser dan lihat silindernya. Anda dapat menggunakan struktur serupa dalam game Anda sebagai roda yang berputar di adegan.
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>Keluaran
Baris kode di atas menghasilkan output berikut -
Sejumlah bentuk yang dibuat dengan pembuat mesh sekarang akan digunakan bersama dalam satu demo. Bentuk yang tercakup dalam tautan demo di bawah ini tercantum di bagian selanjutnya.
Ground
Cone
Plane
Disc
Torus
Polyhedron
IcoSphere
BabylonJS - Persimpangan dan Titik Mesh
Persimpangan Mesh dalam game penting karena Anda tahu apa yang perlu dilakukan saat 2 objek berpotongan dalam game. Konsep yang sama dijelaskan dalam demo di bawah ini tentang peristiwa yang perlu ditangkap saat mata jaring berpotongan.
Dalam demo yang diberikan di bawah ini, kami telah membahas dua konsep berikut -
- Intersect Mesh
- Titik Persimpangan
<!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>Keluaran
Kode di atas menghasilkan output berikut -
Penjelasan
Dengan kode di atas, kami membuat silinder dengan wireframe sebagai true. Kami membuat 3 bola. Warna asli bola itu hijau.
Dalam scene.registerBeforeRender fungsi, kita akan mengubah warna bola berdasarkan perpotongan dengan mesh yang merupakan silinder di sini.
Perhatikan kode berikut di 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 memberikan true atau false jika berpotongan dengan mesh yang diberikan dalam parameter yang diteruskan padanya.
Sebagai contoh,
balloon1.intersectsMesh(cone, false); //cone refers to the cylinder mesh here.Warna bola diubah menjadi merah itu berpotongan dengan silinder; jika tidak, warnanya hijau.
Kode berikut digunakan untuk titik yang akan berpotongan -
var pointToIntersect = new BABYLON.Vector3(10, 0, 0);
if (balloon3.intersectsPoint(pointToIntersect)) {
balloon3.material.emissiveColor = new BABYLON.Color3(0, 0, 0);
}Sini, pointtoIntersectvariabel adalah vektor posisi yaitu 10 pada sumbu x. Jika bola melewati titik potong, warna bola berubah menjadi hitam.
BabylonJS - Tabrakan MeshPicking
Memilih tabrakan sebenarnya memberi Anda koordinat dan Anda dapat memposisikan jala Anda di tempat itu. Objek diambil oleh mouse dan Anda dapat menempatkannya di mana Anda mengklik dengan mouse Anda. Pertimbangkan Anda perlu menempatkan mesh (objek) di tempat di mana pengguna mengklik mouse; Jadi, dengan bantuan memilih tabrakan, ini membantu Anda dengan koordinat pada posisi tempat diklik.
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>Keluaran
Penjelasan
Dalam contoh di atas, kami telah menggunakan sebuah bidang dan 2 bola. Untuk menghasilkan keluaran ini, gunakan kode berikut -
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;
}
}
};Acara scene.onPointerDown memberi Anda koordinat -x, y dan z yang dalam contoh kita adalah pickResult.
Ini memberi pickResult.hit sebagai true jika Anda mengklik mesh ground. Kami mempertimbangkan detik ganjil / genap dan mengubah posisi bola untuk memilih koordinat z dan y hasil seperti yang ditunjukkan di atas. Setelah posisinya diubah, bola ditempatkan di tempat Anda mengklik dan menempatkan mouse Anda. Anda dapat mencoba demo di atas untuk hal yang sama.
BabylonJS - Raycasts
Raycast seperti sinar matahari dan digunakan untuk memeriksa tabrakan dan persimpangan di tempat kejadian.
Sintaksis
var ray = new BABYLON.Ray(origin, direction, length);Parameter
Pertimbangkan parameter berikut untuk raycast -
Origin - Tempat dimana sinar akan mulai.
Direction - Arah sinar dihitung sebagai berikut -
var forward = new BABYLON.Vector3(0,0,1);
forward = vecToLocal(forward, box);
var direction = forward.subtract(origin);Kemudian, untuk mendapatkan arahnya, kita kurangi dari titik asal, posisi kotak -
Length - Panjang sinar.
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>Keluaran
Baris kode di atas menghasilkan output berikut -
Penjelasan
Ada kotak utama di tengah yang berfungsi sebagai siaran sinar. Saat kotak menunjuk ke salah satu kotak, ukuran kotak akan bertambah. Konsep ini terbukti berguna saat bermain game untuk mengetahui objek lain mana yang bersentuhan dan tindakan yang diperlukan dapat diambil.
Menambahkan box.isPickable = false;sehingga kotak utama di tengah tidak diperhatikan. Jika Anda tidak ingin objek apa pun yang termasuk dalam sinar bersentuhan, tambahkanbox.isPickable = false; untuk itu.
Kode berikut menambahkan penskalaan kotak yang diambil oleh sinar.
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); membuat sinar dan mengambil posisi kotak utama sebagai asal.
Arah ke sinar dihitung sebagai berikut -
var forward = new BABYLON.Vector3(0,0,1);
forward = vecToLocal(forward, box);
var direction = forward.subtract(origin);Kemudian, untuk mendapatkan arahnya, kita kurangi dari titik asal, posisi kotak. FungsinyavecToLocal dirancang untuk mengubah posisi dari sudut pandang mesh dengan mengalikan vektor dengan matriks mesh.
Kami mendapatkan titik hit dari sinar menggunakan var hit = scene.pickWithRay(ray);
Ini memberikan posisi di mana sinar bertepatan dengan jala.
Penskalaan diterapkan ke mesh yang dipilih dengan menjalankan baris kode berikut -
if (hit.pickedMesh) {
hit.pickedMesh.scaling.y += 0.01;
}Coba contoh di atas di browser untuk melihat hasilnya.
Raycast dengan fungsi predikat
Sekarang mari kita lihat bagaimana raycast dengan fungsi predikat bekerja dan arah yang ditunjukkan dengan rayhelper.
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>Keluaran
Baris kode di atas menghasilkan output berikut -
Penjelasan
Raycast dengan fungsi predikat membantu memilih mesh mana yang kita inginkan. Jika kita tidak ingin jala dipilih, kita bisa mengabaikan hal yang sama.
function predicate(mesh) {
if (mesh == box2 || mesh == box || mesh == box5) {
return false;
}
return true;
}Fungsi di atas memberikan mesh yang dipilih oleh sinar. Jika mesh yang dipilih adalah box2, box, atau box5, itu akan mengembalikan false; jika tidak, benar.
Anda dapat mencoba contoh di atas untuk hal yang sama.
BabylonJS - Mesh Shadows
Bayangan dirender berdasarkan cara cahaya jatuh pada jaring yang dibuat. Mereka memainkan peran penting untuk membuat keluarannya terlihat realistis di dunia 3D.
Sekarang mari kita belajar cara membuat bayangan menggunakan babylonjs.
Sintaksis
var shadowGenerator00 = new BABYLON.ShadowGenerator(shadowsize, light);Parameter
Pertimbangkan parameter berikut yang terkait dengan bayangan mesh -
Shadowsize - Ukuran bayangan.
Light - Cahaya digunakan di tempat kejadian.
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>Keluaran
Baris kode di atas menghasilkan output berikut -
Penjelasan
Untuk membuat bayangan, Anda perlu membuat shadowgenerator. Perhatikan contoh yang ditunjukkan di bawah ini.
var shadowGenerator00 = new BABYLON.ShadowGenerator(512, light);Untuk menentukan mesh yang membutuhkan bayangan, Anda perlu menambahkan yang sama ke generator di atas.
shadowGenerator00.getShadowMap().renderList.push(box);Sekarang, kami telah membuat tanah dan kotak di atasnya. Kami ingin bayangan kotak jatuh ke tanah. Untuk melakukan itu, kita perlu memastikan bahwa tanah telah ditandai untuk menerima bayangan yang dilakukan sebagai berikut -
ground01.receiveShadows = true;Ada beberapa filter yang tersedia untuk bayangan yaitu sebagai berikut -
shadowGenerator.usePoissonSampling = true; - Called Poisson sampling
shadowGenerator.useExponentialShadowMap = true; - Exponential Shadow Map
shadowGenerator.useBlurExponentialShadowMap= true; - Blur Exponential Shadow MapDalam demo kami, kami telah menggunakan shadowGenerator00.useBlurExponentialShadowMap = true; Anda dapat mencoba yang lain dan melihat bagaimana keluarannya.
Di sini, kami telah menggunakan gambar yang disebut gr1.jpg. Gambar disimpan di gambar / folder secara lokal. Anda dapat mengunduh gambar apa pun pilihan Anda dan menggunakannya di tautan demo.
BabylonJS - Tekstur Canggih pada Mesh
Di bagian ini, kita akan belajar tentang tekstur lanjutan pada mesh. Tekstur yang berbeda ditunjukkan di bawah ini -
Tekstur Kubus
Tekstur Cermin dan Benjolan
Tekstur Video
Mari kita terapkan beberapa tekstur kompleks pada mesh - mirror, bump, video dan refraksi.
| Sr.No. | Jaring & Deskripsi |
|---|---|
| 1 | Lapisan MeshHightlight
Highlight layer digunakan untuk menyorot mesh di scene. Anda bisa memberi warna padanya dan warnanya diterapkan ke tepi mesh. Dalam kasus dalam permainan yang Anda ingin hightlight, lapisan mesh hightlight dapat digunakan untuk hal yang sama. |
| 2 | Morf a Mesh
Morphing mengubah bentuk objek ke objek lain dengan beberapa cara transisi. Kami telah melihat parameter yang dapat diperbarui untuk bentuk; parameter disetel ke false jika tidak. Untuk morphing, ini disetel ke true dan mesh diperbarui untuk mengubah bentuk. |
| 3 | Tindakan untuk Mesh
Tindakan digunakan untuk menambahkan interaksi ke mesh. Peristiwa diaktifkan saat Anda mengklik tautan, atau saat tautan berpotongan atau bertabrakan. |
| 4 | Mesh AssetsManager
Dengan kelas assestsmanager, Anda dapat memuat mesh, gambar, dan file biner di tempat kejadian. |
| 5 | Impor Mesh
Menggunakan Import Mesh kita akan belajar. |
| 6 | Target Morf Mesh
Kita telah melihat morhphing garis, pita, poligon, dll. Sekarang kita akan melihat morphing dari bola dan kotak dalam demo ini. Dengan target morph, bentuk bola berubah seperti yang terlihat pada demo di bawah ini. |
| 7 | Instans Mesh
Jika Anda ingin menggambar mesh yang identik dalam adegan Anda, gunakan contoh. |
| 8 | LOD & Instans Jala
LOD adalah singkatan dari garis jarak. Fitur ini memungkinkan Anda menentukan mesh berdasarkan jarak penampil. Saat jarak dari penampil ke objek meningkat, level detail untuk mesh ditampilkan dengan jelas menggunakan LOD. |
| 9 | Mesh VolumemetricLightScatteringProses pasca
Proses ini menyebarkan cahaya seperti yang ditunjukkan pada keluaran yang diberikan di bawah ini. Uji hal yang sama di browser dan Anda akan melihat bagaimana cahaya menyebar melalui mesh. |
| 10 | Mesh EdgesRenderer
EdgesRendering digunakan untuk menggambar egdes di sekitar mesh seperti yang ditunjukkan pada output di atas. |
| 11 | Mode Campuran Mesh
Anda dapat membuat mode campuran dengan memodifikasi alphamode bahan. |
| 12 | Mesh SolidPartikel
Sistem SolidParticle diperbarui pada mesh. Semua properti yang telah kita lihat pada jaring dapat digunakan pada partikel padat. |
| 13 | Mesh FacetData
Data faset membutuhkan banyak memori dan fitur ini tidak diaktifkan secara bawaan. Untuk mengaktifkannya, kita perlu membuat mesh sesuai kebutuhan dan mengupdate data facet. |