Membuat Animasi Bola Bergerak dalam Kotak 3D
By Harjito
Membuat animasi pergerakan partikel dalam kotak 3 dimensi bisa membantu siswa mempelajari bagaimana perilaku partikel dalam ruang.
Script yang diperlukan
- buat file baru di folder babylon, beri nama particle-in-box.html
- tambahkan script berikut
- perhatikan keterangan program
<!doctype html>
<html>
<head>
<meta charset = "utf-8">
<title> Babylon.JS : Get Started</title>
<!-- memanggil package BabylonJS -->
<script src="babylon.js"></script>
<style>
canvas { width: 100%; height: 100%;}
</style>
</head>
<body>
<!--membuat area kerja-->
<canvas id = "renderCanvas"></canvas>
<script type = "text/javascript">
var canvas = document.getElementById("renderCanvas");
var engine = new BABYLON.Engine(canvas, true);
// mendefinisikan objek
var ball, left_border, right_border, front_border, back_border, top_border, bottom_border
var createScene = function() {
// memuat scene
var scene = new BABYLON.Scene(engine);
// memberikan warna background
scene.clearColor = new BABYLON.Color3(0, 0.2, 0.3);
// meletakkan kamera (sudut pandang 3D)
var camera = new BABYLON.ArcRotateCamera("Camera", 1, 0.8, 10, new BABYLON.Vector3(0, 0, 0), scene);
scene.activeCamera.attachControl(canvas);
// meletakkan lampu/pencahayaan
var light0 = new BABYLON.PointLight("Omni", new BABYLON.Vector3(0, 5, 10), scene);
// membuat kotak berukuran 5 x 5 x 5
box = BABYLON.Mesh.CreateBox("box", 5.0, scene);
// menyiapkan material warna untuk kotak
var myMaterial = new BABYLON.StandardMaterial("myMaterial", scene);
myMaterial.diffuseColor = new BABYLON.Color3(0.8, 0.6, 0.5);
box.material = myMaterial
// meletakkan kotak pada koordinat 0,0,0
box.position = new BABYLON.Vector3(0, 0, 0);
// membuat batas kiri
left_border = BABYLON.Mesh.CreateBox("box", 5.0, scene);
left_border.position = new BABYLON.Vector3(5, 0, 0);
// membuat batas kiri
right_border = BABYLON.Mesh.CreateBox("box", 5.0, scene);
right_border.position = new BABYLON.Vector3(-5, 0, 0);
// membuat batas atas
top_border = BABYLON.Mesh.CreateBox("box", 5.0, scene);
top_border.position = new BABYLON.Vector3(0, 5, 0);
// membuat batas bawah
bottom_border = BABYLON.Mesh.CreateBox("box", 5.0, scene);
bottom_border.position = new BABYLON.Vector3(0, -5, 0);
// membuat batas depan
front_border = BABYLON.Mesh.CreateBox("box", 5.0, scene);
front_border.position = new BABYLON.Vector3(0, 0, 5);
// membuat batas belakang
back_border = BABYLON.Mesh.CreateBox("box", 5.0, scene);
back_border.position = new BABYLON.Vector3(0, 0, -5);
// Mebuat kuat utama transparan 50%
box.visibility = 0.5
// membuat kotak pembatas transparan 100%
left_border.visibility = 0
right_border.visibility = 0
top_border.visibility = 0
bottom_border.visibility = 0
front_border.visibility = 0
back_border.visibility = 0
// menambahkan bola di pusat dengan jari-jari 0,3
ball = BABYLON.Mesh.CreateSphere(0, 0, 0.3, scene);
ball.position = new BABYLON.Vector3(0, 0, 0);
// menambahkan animasi pergerakan bola dalam kotak, dengan periode 10 milisecond
setInterval(animate, 10)
return scene;
};
// menentukan posisi baru
function setCoordinate(dir){
var x = dir[2] * Math.cos(dir[0]) * Math.cos(dir[1]);
var y = dir[2] * Math.cos(dir[0]) * Math.sin(dir[1]);
var z = dir[2] * Math.sin(dir[0]);
return [x, y, z]
}
// menyiapkan animasi
function animate(){
// mengatur sudut dan kecepatan gerak awal
if(!ball.dir){
ball.dir = [Math.PI/6, Math.PI/3, 0.01]
}
if (ball.intersectsMesh(left_border) || ball.intersectsMesh(right_border)){
// Mengubah arah Jika bola menumbuk batas kiri atau kanan
if(ball.dir[0] <= Math.PI){
ball.dir[0] = Math.PI - ball.dir[0];
}else{
ball.dir[0] = 3*Math.PI - ball.dir[0];
}
ball.dir[1] = 2*Math.PI - ball.dir[1];
}else if (ball.intersectsMesh(front_border) || ball.intersectsMesh(back_border)){
// Mengubah arah Jika bola menumbuk batas depan atau belakang
ball.dir[0] = 2*Math.PI - ball.dir[0];
} else if (ball.intersectsMesh(top_border) || ball.intersectsMesh(bottom_border)) {
// Mengubah arah Jika bola menumbuk batas atas atau bawah
ball.dir[1] = 2*Math.PI - ball.dir[1];
}
// Memindahkan ke posisi baru
var newPos = setCoordinate(ball.dir)
ball.position.x += newPos[0]
ball.position.y += newPos[1]
ball.position.z += newPos[2]
}
// merender ke dalam canvas
var scene = createScene();
engine.runRenderLoop(function() {
scene.render();
});
</script>
</body>
</html>
Live Demo
Tags:
Ikuti terus tutorial saya di e-Project dan channel
saya di
