360 Degree Image Viewer Javascript

MUAZHAN

5 min read

·

Jun 22, 2024

34

Share

360 Derajat Penampil Gambar dengan JavaScript

Penampil gambar 360 derajat memungkinkan pengguna untuk melihat gambar objek dari semua sudut. Hal ini berguna untuk berbagai aplikasi, seperti e-niaga, real estat, dan visualisasi 3D.

Dalam artikel ini, kita akan membahas bagaimana membangun penampil gambar 360 derajat sederhana menggunakan JavaScript.

Persiapan

Pertama, kita perlu menyiapkan gambar-gambar yang akan digunakan untuk penampil 360 derajat. Kita akan menggunakan serangkaian gambar yang menunjukkan objek dari sudut yang berbeda. Gambar-gambar ini harus diberi nama secara berurutan, misalnya image_001.jpg, image_002.jpg, image_003.jpg, dan seterusnya.

Selanjutnya, kita perlu membuat struktur HTML dasar untuk penampil gambar. Kita akan menggunakan elemen div untuk menampung gambar dan elemen canvas untuk menggambar gambar.

Berikut kode HTML-nya:

JavaScript

Sekarang, kita perlu menulis kode JavaScript untuk menggambar gambar dan mengendalikan rotasi.

const container = document.getElementById("container");
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

// Jumlah gambar
const numImages = 36;

// Array untuk menyimpan gambar
const images = [];

// Muat semua gambar
for (let i = 1; i <= numImages; i++) {
    let image = new Image();
    image.src = `images/image_${i.toString().padStart(3, '0')}.jpg`;
    images.push(image);
}

// Sudut rotasi saat ini
let currentAngle = 0;

// Lebar dan tinggi gambar
let imageWidth;
let imageHeight;

// Fungsi untuk menggambar gambar pada kanvas
function drawImage() {
    // Hitung indeks gambar saat ini berdasarkan sudut
    const imageIndex = Math.floor(currentAngle / (360 / numImages)) % numImages;
    const image = images[imageIndex];

    // Atur lebar dan tinggi gambar
    imageWidth = image.width;
    imageHeight = image.height;

    // Hitung posisi gambar
    const x = (canvas.width - imageWidth) / 2;
    const y = (canvas.height - imageHeight) / 2;

    // Gambar gambar pada kanvas
    ctx.drawImage(image, x, y);
}

// Fungsi untuk menangani rotasi
function handleRotation(event) {
    // Dapatkan perubahan sudut dari mousemove event
    const deltaX = event.movementX;
    currentAngle += deltaX * 0.1;

    // Gambar ulang gambar
    drawImage();
}

// Event listener untuk mousemove pada container
container.addEventListener("mousemove", handleRotation);

// Gambar gambar awal
drawImage();

Kode JavaScript ini pertama-tama memuat semua gambar yang diperlukan dan menyimpannya dalam array images. Kemudian, ia menetapkan variabel currentAngle ke 0 untuk mewakili sudut rotasi awal.

Fungsi drawImage() digunakan untuk menggambar gambar pada kanvas. Ia menghitung indeks gambar saat ini berdasarkan sudut rotasi dan gambar gambar yang sesuai. Fungsi handleRotation() menangani rotasi gambar. Ia menggunakan event.movementX untuk mendapatkan perubahan sudut dari mousemove event. Kemudian, ia memperbarui sudut rotasi saat ini dan menggambar ulang gambar.

Kesimpulan

Kode ini menunjukkan contoh sederhana tentang bagaimana membangun penampil gambar 360 derajat dengan JavaScript. Anda dapat memperluas kode ini untuk menambahkan fitur tambahan, seperti:

• Kontrol Rotasi: Menambahkan tombol atau elemen lain untuk mengontrol rotasi gambar.
• Animasi: Menambahkan animasi untuk rotasi yang lebih mulus.
• Hotspot: Menambahkan hotspot ke gambar untuk menampilkan informasi tambahan.
• Responsif: Memasukkan kemampuan untuk mengatur penampil gambar dengan ukuran viewport.

Dengan menggunakan kode dasar ini sebagai titik awal, Anda dapat membuat penampil gambar 360 derajat yang interaktif dan menarik untuk berbagai aplikasi.