Membuat Animasi Banyak Bola Bergerak dalam Kotak 3D Dengan Tombol Pengendali

By Harjito

image from Membuat Animasi Banyak Bola Bergerak dalam Kotak 3D Dengan Tombol Pengendali

Salah satu komponen yang penting dalam sebuah media interaktif adalah adanya panel pengendali. Dalam sesi ini kita belajar menambahkan tombol pengenadli yaitu play, pause dan stop.

Langkap Pemrograman

  • Buat file baru dengan nama particle-in-box-with-control.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>
               <button id="play">Play</button>
               <button id="pause">Pause</button>
               <button id="stop">Stop</button>
            </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;
            const 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;
               }
            })

      </script>
   </body>
</html>

Live Demo

Ikuti terus tutorial saya di e-Project dan channel saya di