Membuat Animasi Banyak Bola Bergerak dalam Kotak 3D

By Harjito

image from Membuat Animasi Banyak Bola Bergerak dalam Kotak 3D

Untuk pemrograman dinamis, sangat penting untuk mengubah nilai-nilai/konstanta menjadi variabel. Dengan menjadikan variabel, maka nilainya bisa dimanipulasi baik dalam program maupun secara interaktif (dipicu oleh event tertentu). Pada bagian ini kita akan belajar bagaimana membuat animasi banyak bola dalam kotak.

Langkap Pemrograman

  • Buat file baru dengan nama particle-in-box-v2.html
  • Buat folder dengan nama img
  • Download (save image) texture dari website ini ke folder img
  • Ubah nama file texture dengan metal.jpeg
  • 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>
        <!--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 boxSize = 5, ballSize =0.3, balls = [];
            const limit = (boxSize-ballSize)/2
                           
            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(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;
               }

               // // menambahkan animasi pergerakan bola dalam kotak, dengan periode 10 milisecond
               setInterval(animate, 20) 
               return scene;
            };

            // menyiapkan animasi
            function animate(){
               // Menentukan sudut pergerakan secara acak
               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();
            });
      </script>
   </body>
</html>

Live Demo

Tags:

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


Donasi