Tutorial Membuat Virtual Reality untuk Sistem tata Surya
By Harjito
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();
}
});
});
Live Demo
Tags:
Ikuti terus tutorial saya di e-Project dan channel
saya di
