Indonesia

Tutorial WebGL

Aplikasi WebGL

Contoh WebGL

WebGL - Interactive Cube

Halo, para programer pemula! Hari ini, kita akan memulai perjalanan menarik ke dunia WebGL. Kita akan membuat kubus interaktif yang dapat Anda putar dengan mouse Anda. Jangan khawatir jika Anda belum pernah mengoding sebelumnya - saya akan mengarahkan Anda melalui setiap langkah dengan kesabaran seekor penyu tua. Ayo masuk ke dalam!

WebGL - Interactive Cube

Memahami Konsep Dasar

Sebelum kita mulai menggambar kubus kita, mari kita cepat melihat beberapa konsep dasar.

Apa Itu WebGL?

WebGL (Web Graphics Library) adalah API JavaScript yang memungkinkan kita untuk merender grafik 3D di dalam peramban web. Itu seperti memberikan halaman web Anda superpower untuk menciptakan efek visual yang memukau!

apa yang Kita Butuhkan

  1. Editor teks (seperti Notepad++ atau Visual Studio Code)
  2. Peramban web (Chrome, Firefox, atau peramban modern lainnya)
  3. Sedikit kecurigaan dan sejumplah kegigihan!

Contoh – Menggambar Kubus Interaktif

Langkah 1: Menyiapkan HTML

Pertama, mari kita buat kerangka halaman web kita. Buka editor teks Anda dan buat file baru bernama interactive_cube.html. Salin dan tempel kode berikut:

<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>WebGL Interactive Cube</title>
<style>
canvas { width: 100%; height: 100% }
</style>
</head>
<body>
<canvas id="myCanvas"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<script>
// Kode WebGL kami akan berada di sini
</script>
</body>
</html>

Ini menyiapkan struktur HTML kita dan menyertakan pustaka Three.js, yang akan membuat pekerjaan WebGL kita menjadi lebih mudah.

Langkah 2: Membuat Scene

Sekarang, mari kita tambahkan beberapa JavaScript untuk membuat scene 3D kita. Ganti komentar di tag script dengan kode ini:

// Set up the scene, camera, and renderer
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer({ canvas: document.getElementById('myCanvas') });
renderer.setSize(window.innerWidth, window.innerHeight);

// Create a cube
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

camera.position.z = 5;

mari kitauraikan ini:

  • Kita menciptakan scene, seperti panggung untuk objek 3D kita.
  • Kamera menentukan pandangan kita.
  • Renderer bertanggung jawab untuk menggambar scene kita.
  • Kita menciptakan kubus menggunakan BoxGeometry dan memberinya warna hijau.
  • Akhirnya, kita menempatkan kamera 5 unit jauh dari pusat.

Langkah 3: Menganimasikan Kubus

Untuk membuat kubus kita berputar, kita perlu menambahkan loop animasi. Tambahkan kode ini setelah blok sebelumnya:

function animate() {
requestAnimationFrame(animate);

cube.rotation.x += 0.01;
cube.rotation.y += 0.01;

renderer.render(scene, camera);
}
animate();

Fungsi ini akan dipanggil berkali-kali, memutar kubus sedikit setiap frame dan menggambar ulang scene.

Langkah 4: Membuatnya Interaktif

Sekarang, mari kita tambahkan interaktivitas sehingga kita dapat memutar kubus dengan mouse. Tambahkan kode ini sebelum fungsi animate():

let isDragging = false;
let previousMousePosition = { x: 0, y: 0 };

document.addEventListener('mousedown', () => isDragging = true);
document.addEventListener('mouseup', () => isDragging = false);
document.addEventListener('mousemove', (e) => {
if (isDragging) {
const deltaMove = {
x: e.offsetX - previousMousePosition.x,
y: e.offsetY - previousMousePosition.y
};

cube.rotation.y += deltaMove.x * 0.01;
cube.rotation.x += deltaMove.y * 0.01;
}

previousMousePosition = {
x: e.offsetX,
y: e.offsetY
};
});

Kode ini menambahkan penggunaan event listener untuk aksi mouse, memungkinkan kita untuk memutar kubus dengan mengklik dan menggeser.

Langkah 5: Menambahkan Beberapa Pizzazz

Marilah kita membuat kubus kita sedikit lebih menarik dengan memberinya warna yang berbeda di setiap permukaannya. Ganti baris pembuatan material dengan ini:

const materials = [
new THREE.MeshBasicMaterial({ color: 0xff0000 }), // Merah
new THREE.MeshBasicMaterial({ color: 0x00ff00 }), // Hijau
new THREE.MeshBasicMaterial({ color: 0x0000ff }), // Biru
new THREE.MeshBasicMaterial({ color: 0xffff00 }), // Kuning
new THREE.MeshBasicMaterial({ color: 0xff00ff }), // Magenta
new THREE.MeshBasicMaterial({ color: 0x00ffff })  // Cyan
];
const cube = new THREE.Mesh(geometry, materials);

Sekarang setiap permukaan kubus akan memiliki warna yang berbeda!

Kesimpulan

Selamat! Anda baru saja menciptakan kubus 3D interaktif menggunakan WebGL. Ini hanya permulaan saat ini ketika bicara tentang pemrograman grafik 3D. Saat Anda terus melanjutkan perjalanan Anda, Anda akan menemukan hal-hal yang lebih menarik yang dapat Anda buat.

Ingat, belajar mengoding seperti belajar menunggang sepeda. Mungkin terlihat wobble di awal, tapi dengan latihan, Anda akan segera berjalan di sepanjang jalan!

Berikut adalah tabel yang menggabungkan metode utama yang kita gunakan:

Metode Deskripsi
THREE.Scene() Membuat scene 3D baru
THREE.PerspectiveCamera() Menyiapkan pandangan kamera
THREE.WebGLRenderer() Menangani rendering scene
THREE.BoxGeometry() Membuat geometri kubus
THREE.MeshBasicMaterial() Menentukan material untuk kubus
THREE.Mesh() Menggabungkan geometri dan material
requestAnimationFrame() Memanggil loop animasi

Terus eksperimen, terus belajar, dan yang paling penting, bersenang-senang! Dunia WebGL adalah milik Anda, dan Anda sekarang dilengkapi untuk mulai menjelajahinya. Selamat coding!

Credits: Image by storyset

Tutorial Sebelumnya:
WebGL - Rotasi Kubus