Memulai Belajar Membuat Media 3D Menggunakan BabylonJS

By Harjito

image from Memulai Belajar Membuat Media 3D Menggunakan BabylonJS

Media 3D dalam ilmu sains seperti kimia, sangat membantu bagi siswa untuk memahami konsep-konsep kimia dengan lebih baik. Media 3D mampu memvisualisasikan partikel mikroskopis dalam perspektif 3D. Melalui virtual Reality, siswa dapat mengamati dari berbagai sudut pandang sehingga mampu memahami secara utuh. Distorsi pemahaman dapat diminalkan.

Perangkat Yang Diperlukan

![babylon-start] Untuk membuat media 3D berbasis WebGL tidak diperlukan software yang berat. Software yang dibutuhkan sebagai berikut.

  • Editor (dalam hal ini saya menggunakan VsCode karena ringan dan gratis)
  • Browser (dalam hal ini saya mengguankan chrome)

Menyiapkan Berkas

  • buat sebuah folder di beri nama babylon
  • buat sebuah file di dalam folder babylon beri nama start.html
  • arahkan browser ke alamat ini

Program Pertama

  • Tuliskan script berikut di start.html
<!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);
            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); 

                return scene;
            };

            // merender ke dalam canvas
            var scene = createScene();
            engine.runRenderLoop(function() {
                scene.render();
            });
      </script>
   </body>
</html>
  • simpan
  • buka start.html dengan browser
  • Hasilnya bisa dilihat di sini
  • perhatikan penjelasan dalam kode program (yang ditanda //, silahkan bereksperimen dengan mengubah nilai agar bisa memahami masing-masing bagian)

Live Demo

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