Membuat Animasi Banyak Bola Bergerak dalam Kotak 3D Dengan Tombol Pengendali (2)
By Harjito
Selain tombol kontrol, input data juga penting untuk ditambahkan dalam media simulatif. Pada sessi ini kita akan belajar menabahkan inout berupa slider untuk mengubah ukuran kotak
Langkap Pemrograman
- Buat file baru dengan nama particle-in-box-interactif.html
- Tuliskan perintah berikut:
<!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>
<canvas id = "renderCanvas"></canvas>
<!-- menambahkan panel -->
<div id="panel">
<h3>
<label>Control</label>
<button id="play">Play</button>
<button id="pause">Pause</button>
<button id="stop">Stop</button><br>
<label>Resize Box</label>
<input type="range" min="1" max="100" value="50" class="slider" id="slider">
</h3>
</div>
<!--membuat area kerja-->
<script type = "text/javascript">
var canvas = document.getElementById("renderCanvas");
var engine = new BABYLON.Engine(canvas, true);
// mendefinisikan objek
var boxSize = 5, ballSize =0.3, balls = [], playBtn, stopBtn, pauseBtn;
var limit = (boxSize-ballSize)/2
var scene = new BABYLON.Scene(engine);
var status = 'idle';
var createScene = function() {
// 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(2, 8, 10), scene);
// membuat kotak berukuran 5 x 5 x 5
box = BABYLON.Mesh.CreateBox("box", boxSize, 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);
// Mebuat kotak utama transparan 50%
box.visibility = 0.3
var material = new BABYLON.StandardMaterial(scene);
material.alpha = 1;
material.diffuseColor = new BABYLON.Color3(1, 0.2, 0.1);
material.diffuseTexture = new BABYLON.Texture("img/metal.jpeg", scene);
var n = 50
// membuat bola sebanyak 50
for(i=0; i < n; i++){
// membuat bola
balls[i] = BABYLON.Mesh.CreateSphere(0, 0, 0.3, scene);
// meletakkan bola dalam kotak secara acak
balls[i].position = new BABYLON.Vector3(Math.random()*4-2, Math.random()*4-2, Math.random()*4-2);
balls[i].material = material;
balls[i].visibility = 0;
}
setInterval(animate, 20)
// // menambahkan animasi pergerakan bola dalam kotak, dengan periode 10 milisecond
return scene;
};
// menyiapkan animasi
function animate(){
// Menentukan sudut pergerakan secara acak
if(status !='play') return;
balls.forEach(function(ball, key){
if(!ball.dir){
balls[key].dir = [Math.random()*12*Math.PI/6, Math.random()*12*Math.PI/6, 0.02, false]
}
if(Math.abs(balls[key].position.x) >=limit ){
balls[key].dir[0] = Math.PI - balls[key].dir[0];
}
if(Math.abs(balls[key].position.y) >= limit ){
balls[key].dir[1] = 2*Math.PI - balls[key].dir[1];
}
if(Math.abs(balls[key].position.z) >= limit ){
balls[key].dir[0] = 2*Math.PI - balls[key].dir[0];
}
// setCoordinate(key, balls[key].dir)
balls[key].position.x += balls[key].dir[2] * Math.cos(balls[key].dir[0]) * Math.cos(balls[key].dir[1]);
balls[key].position.z += balls[key].dir[2] * Math.sin(balls[key].dir[0]) * Math.cos(balls[key].dir[1]);
balls[key].position.y += balls[key].dir[2] * Math.sin(balls[key].dir[1]);
})
}
// merender ke dalam canvas
var scene = createScene();
engine.runRenderLoop(function() {
scene.render();
});
document.getElementById('play').addEventListener('click', function(e){
e.preventDefault()
if (status == 'idle'){
for(i=0; i< balls.length; i++){
balls[i].visibility = 1;
}
}
status = 'play';
})
document.getElementById('pause').addEventListener('click', function(e){
e.preventDefault()
status = 'pause';
})
document.getElementById('stop').addEventListener('click', function(e){
e.preventDefault()
status = 'idle';
for(i=0; i< balls.length; i++){
balls[i].visibility = 0;
}
})
document.getElementById('slider').addEventListener('click', function(e){
e.preventDefault()
if(parseInt(e.target.value)<10) {
e.target.value = 10;
}
var scaling = parseInt(e.target.value)/50;
status = 'pause';
for(i=0; i< balls.length; i++){
balls[i].position.x = balls[i].position.x*scaling;
balls[i].position.y = balls[i].position.y*scaling;
balls[i].position.z = balls[i].position.z*scaling;
balls[i].visibility = 1;
}
limit = (boxSize*scaling-ballSize)/2;
box.scaling = new BABYLON.Vector3(scaling,scaling,scaling);
status = 'play';
})
</script>
</body>
</html>
Live Demo
Tags:
Ikuti terus tutorial saya di e-Project dan channel
saya di
