Malay

TUTORIAL WebGL

Aplikasi WebGL

Contoh WebGL

WebGL - Interactive Cube

Hai, pencinta pemrograman! Hari ini, kita akan memulai perjalanan menarik ke dunia WebGL. Kita akan membuat kubus interaktif yang dapat Anda putar dengan tetikus Anda. Jangan khawatir jika Anda belum pernah mengoding sebelumnya - saya akan mengarahkan Anda di setiap langkah dengan kesabaran seekor penyu tua. Ayo masuk ke dalam!

WebGL - Interactive Cube

Memahami dasar-dasar

Sebelum kita mulai menggambar kubus kita, mari kitaulas beberapa konsep fundamental singkat.

Apa itu WebGL?

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

apa yang kita butuhkan

  1. Sebuah editor teks (seperti Notepad++ atau Visual Studio Code)
  2. Sebuah browser web (Chrome, Firefox, atau browser modern lainnya)
  3. Sedikit kecurigaan dan sepenuhnya kekerasan!

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="en">
<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 mengatur struktur HTML kita dan menyertakan pustaka Three.js, yang akan membuat pekerjaan WebGL kita jauh lebih mudah.

Langkah 2: Membuat Scene

Sekarang, mari kita menambahkan beberapa JavaScript untuk membuat scene 3D kita. Ganti komentar dalam 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 memberikan warna hijau padanya.
  • 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 berulang-ulang, memutar kubus sedikit setiap frame dan menggambar ulang scene.

Langkah 4: Membuatnya Interaktif

Sekarang, mari kita tambahkan interaktifitas sehingga kita dapat memutar kubus dengan tetikus. 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 tetikus, memungkinkan kita untuk memutar kubus dengan mengklik dan menggeser.

Langkah 5: Menambahkan Beberapa Pizzazz

Marilah kita membuat kubus kita lebih menarik dengan memberikan warna yang berbeda pada setiap permukaannya. Ganti baris pembuatan material 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 Anda berbicara tentang pemrograman grafik 3D. Sebagai Anda terus mengembangkan perjalanan Anda, Anda akan menemukan hal-hal yang menakjubkan yang Anda dapat buat.

Ingat, belajar mengoding seperti belajar menunggang sepeda. Mungkin tampak wobble di awal, tetapi dengan latihan, Anda akan mulai menembus waktu dalam tidak lama lagi!

Berikut adalah tabel yang menguraikan metode utama yang kita gunakan:

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

Terus mencoba, terus belajar, dan terutama, bersenang-senang! Dunia WebGL adalah milik Anda, dan Anda sekarang dilengkapi untuk mulai menjelajahi itu. Selamat coding!

Credits: Image by storyset

Tutorial Sebelumnya:
WebGL - Putaran Kubus