Tutorial Membuat Virtual Reality untuk Sistem tata Surya

Sistem tata surya sangat menarik untuk dijelaskan jika menggunakan media yang bisa dianmasikan secara 3 Dimensi. Siswa bisa dengan mudah mengamati bagaimana pergerakan planet-planet di mengitari matahari.

Persiapan

• Lihat kembali tutorial sebelumnya di tutorial saya yang berjudul Mengenai WebXR sebagai Platform Virtual Reality Berbasis Web.
• Buat file baru dengan nama solarSystem.html
• Buat file baru dengan nama solarSystem.js
• Buka file solarSystem.html
• Salin isi file getStarted.html, dan ubah bagian src=“getStarted.js” menjadi src=“solarSystem.js”
• Simpan
• Buka file solarSystem.js
• Salin isi file getStarted.js
• Nonaktifkan ground dengan cara blok pada bagian ground, lalu telan ctrl+/, sehingga muncul dobel slash di awal dan warna teks menjadi lebih gelap
• Nonaktikan juga langit (skybox) dengan cara yang sama

Membuat Class Solar System

• Letakkan kursor di awal baris
• Sisispkan code berikut

class solarSystem{
    constructor(scene){
        this.scene = scene;
        this.planets = [];
    }
    drawStar(r){
        var star = BABYLON.Mesh.CreateSphere(0, 16, r, this.scene);
        var material = new BABYLON.StandardMaterial(this.scene);
        material.alpha = 1;
        material.diffuseColor = new BABYLON.Color3(1, 0.1, 0.3);
        star.material = material; 
        star.position = new BABYLON.Vector3(0, 0, 0)
    }
    drawPlanet(a, b, r, color, step){
        var planet = BABYLON.Mesh.CreateSphere(0, 16, r, this.scene);
        var material = new BABYLON.StandardMaterial(this.scene);
        material.alpha = 1;
        material.diffuseColor = new BABYLON.Color3(color[0], color[1], color[2]);
        planet.material = material; 
        var y = Math.pow(b,2);
        planet.position = new BABYLON.Vector3(0, y, 0)

        this.planets[this.planets.length] = {obj: planet, a:a, b:b, dir:true, step:step}        
    }
    planetRevolution(){
        this.planets.forEach(function(planet, i){
            if(planet.dir){
                var x = planet.obj.position.x + planet.step;
                if(x > planet.a){
                    x = planet.a;
                    planet.dir = false;
                }
            }else{
                var x = planet.obj.position.x - planet.step;
                if(x < -planet.a){
                    x = -planet.a;
                    planet.dir = true;
                }
            }

            var y = Math.sqrt(Math.pow(planet.b,2)*(1-Math.pow(x/planet.a,2)))
            if(! planet.dir){
                y = -Math.abs(y);
            }
            planet.obj.position = new BABYLON.Vector3(x, y, 0)
        })
    }
    animate(){
        this.planetRevolution()
    }
}

Menambahkan Objek Tata Surya

• Cari potongan script berikut sceneToRender = returnedScene;
• Letakkkan kursor di akhir returnedScene; (; yang pertama) lalu tekan enter
• Buat Objek tata Surya cara ketikkan: tataSurya = new solarSystem(sceneToRender)
• Tambahkan Matahari dengan cara ketikkan: tataSurya.drawStar(3); //angka 3 adalah jari-jarinya
• Tambahkan sebuah planet dengan cara ketikkan: tataSurya.drawPlanet(1.6, 1.2, 0.5, [1, 0.1, 0.1], 0.01); // karena lintasan planet berupa elips, 1.6 adalag sumbu mayor/2, 1.2 adalah sumbu minor/2, 0.5 adalah jari-jari planet, [1, 0.1, 0.1] adalah warna red, green, blue dan 0.01 adalah kecepatan gerak planet
• Tambahkan planet yang kedua : tataSurya.drawPlanet(3, 2.4, 1, [0.9, 0.3, 0.4], 0.015); //nilainya bisa dicoba-coba
• Bisa ditambahkan planet sesuai selera
• Cari postingan script sceneToRender.render(); letakkan kursor di belakang tanda “;” lalu tekan enter
• Tambahkan perintah tataSurya.animate();
• Untuk menonaktifkan fitur VR cari potongan script scene.createDefaultVRExperience();, tambahkan komentar (ctrl+/)
• script selengkapnya

class solarSystem{
    constructor(scene){
        this.scene = scene;
        this.planets = [];
    }
    drawStar(r){
        var star = BABYLON.Mesh.CreateSphere(0, 16, r, this.scene);
        var material = new BABYLON.StandardMaterial(this.scene);
        material.alpha = 1;
        material.diffuseColor = new BABYLON.Color3(1, 0.1, 0.3);
        star.material = material; 
        star.position = new BABYLON.Vector3(0, 0, 0)
    }
    drawPlanet(a, b, r, color, step){
        var planet = BABYLON.Mesh.CreateSphere(0, 16, r, this.scene);
        var material = new BABYLON.StandardMaterial(this.scene);
        material.alpha = 1;
        material.diffuseColor = new BABYLON.Color3(color[0], color[1], color[2]);
        planet.material = material; 
        var y = Math.pow(b,2);
        planet.position = new BABYLON.Vector3(0, y, 0)

        this.planets[this.planets.length] = {obj: planet, a:a, b:b, dir:true, step:step}        
    }
    planetRevolution(){
        this.planets.forEach(function(planet, i){
            if(planet.dir){
                var x = planet.obj.position.x + planet.step;
                if(x > planet.a){
                    x = planet.a;
                    planet.dir = false;
                }
            }else{
                var x = planet.obj.position.x - planet.step;
                if(x < -planet.a){
                    x = -planet.a;
                    planet.dir = true;
                }
            }

            var y = Math.sqrt(Math.pow(planet.b,2)*(1-Math.pow(x/planet.a,2)))
            if(! planet.dir){
                y = -Math.abs(y);
            }
            planet.obj.position = new BABYLON.Vector3(x, y, 0)
        })
    }
    animate(){
        this.planetRevolution()
    }
}

var canvas = document.getElementById("renderCanvas");
 
var createDefaultEngine = function() { return new BABYLON.Engine(canvas, true, { preserveDrawingBuffer: true, stencil: true,  disableWebGL2Support: false}); };

var createScene = async function () {
 
    var scene = new BABYLON.Scene(engine);
 
	// script untuk Virtual Reality
    scene.createDefaultVRExperience();
 
    // script untuk objek kamera 
    const camera = new BABYLON.ArcRotateCamera("camera", -Math.PI / 2, Math.PI / 2.5, 15, new BABYLON.Vector3(0, 0, 0));
    camera.attachControl(canvas, true);

    // script untuk objek sumber cahaya
    const  light = new BABYLON.DirectionalLight("dir01", new BABYLON.Vector3(0, -1, 1), scene);
    light.position = new BABYLON.Vector3(0, 50, -100);
    light.intensity = 1;
    
    return scene;
}
 
var engine = null;
var scene = null;
var sceneToRender = null;
var tataSurya;
 
// Perintah ini untuk menjalankan pertama kali 
 
initFunction = async function() {               
    var asyncEngineCreation = async function() {
        try {
            return createDefaultEngine();
        } catch(e) {
            return createDefaultEngine();
        }
    }
 
    engine = await asyncEngineCreation();
    if (!engine) throw 'engine should not be null.';
    scene = createScene();
};

initFunction().then(() => {
    scene.then(returnedScene => { 
        sceneToRender = returnedScene; 
        tataSurya = new solarSystem(sceneToRender)
        tataSurya.drawStar(3);
        tataSurya.drawPlanet(1.6, 1.2, 0.5, [1, 0.1, 0.1], 0.01)
        tataSurya.drawPlanet(3, 2.4, 1, [0.9, 0.3, 0.4], 0.015)
        tataSurya.drawPlanet(6, 5, 1.2, [0.9, 0.3, 0.4], 0.02)
    });
    
    engine.runRenderLoop(function () {
        if (sceneToRender && sceneToRender.activeCamera) {
            sceneToRender.render();
            tataSurya.animate();
        }
    });
});

Tags:

• media 3D
• BabylonJS
• Virtual Reality
• solar system