SQL Server Tips, Teknik, dan Artikel

Cara Menambahkan Globe 3D Ke Situs Web Anda (Seperti Stripe / Github)

layers-loop.h264.2020-12-21-11_16_56.gif

[ad_1]

Pengembang web di seluruh dunia kagum dengan bola dunia 3D yang dibuat oleh Stripe dan GitHub.

Beberapa bulan yang lalu ketika saya sedang membangun situs Agensi untuk Isotropic, saya ingin menambahkan bola dunia 3D, dan pergi ke lubang kelinci teknis. Dalam artikel ini, kita akan melihat cara membuat bola dunia 3d, dan cara terbaik untuk menerapkan efek unik ini di situs web Anda sendiri.

lapisan-loop-h264-2020-12-21-11_16_56

Jika Anda mencoba menambahkan bola dunia 3D ke situs web Anda, berikut adalah cara terbaik untuk melakukannya pada tahun 2022.

Contoh Dunia 3D

Dua contoh paling populer dari bola dunia 3D yang diterapkan di situs web utama berasal dari Stripe dan GitHub. Keduanya adalah keajaiban pengembangan web, dan memanfaatkan beberapa teknik JavaScript yang sangat keren, menarik, dan canggih.

Pada dasarnya, kedua perusahaan berkata kepada tim teknik mereka, “bangun sesuatu yang menyenangkan dan keren”! Dan inilah yang kami dapatkan:

isotropik-2022-07-08-at-16-25-24
Github Globe
isotropik-2022-07-08-at-16-29-14
Stripe Globe

Ada beberapa contoh situs web lain yang menggunakan globe di beranda, tetapi ini adalah dua yang paling populer dan dibuat dengan baik.

Faktanya, mereka membuat percikan di industri, kedua perusahaan menerbitkan posting blog panjang tentang bagaimana mereka membangun dan mengimplementasikan bola dunia 3D:

Dari kedua artikel ini, kita dapat melihat bahwa para pengembang mengambil pendekatan yang sama satu sama lain, dan memanfaatkan WebGL dan shader.

Apa yang gila tentang bola dunia GitHub adalah bahwa titik-titik tersebut sebenarnya diisi secara dinamis dari geografi permintaan tarik – gila!

Cara Menambahkan Globe 3D ke Situs Web Anda

Jika Anda membaca artikel yang kami tautkan di atas, Anda akan melihat bahwa membangun bola dunia dari awal sangatlah rumit. Sebagai gantinya, saya akan menggunakan salah satu solusi di bawah ini:

1) Miniatur Bumi – Globe 3D untuk JavaScript

gambar-11-12

Inilah yang saya gunakan untuk situs agensi. Ini adalah cara termudah untuk menambahkan globe ke situs web. Muncul dengan banyak fungsi dan kemampuan untuk menyesuaikan. Itu juga dilengkapi dengan dukungan dan dokumentasi yang bagus, tetapi merupakan solusi berbayar.

Sangat mudah untuk berintegrasi dengan kumpulan data khusus untuk menampilkan titik dan menyorot wilayah.

2) Visualisasi ThreeJS Globe

gambar-10-12

Ini adalah cara open source paling populer untuk membangun dan mengimplementasikan globe 3D. Ini dikembangkan secara aktif, sangat kuat, dan mudah disesuaikan.

3) GitHub Globe

isotropik-2022-07-08-at-16-37-54

Ini pada dasarnya adalah salinan globe GitHub yang dapat Anda instal dengan mudah menggunakan webpack dan sesuaikan dengan kebutuhan Anda.

RIP – Globekit

GlobeKit adalah proyek yang membangun beberapa bola dunia yang sangat mengagumkan. Sayangnya pasar tidak cukup besar dan mereka menutup operasi pada tahun 2020.

isotropik-2022-07-08-at-16-44-25

Kesimpulan

Jika Anda pernah ingin menambahkan bola dunia 3D ke situs web Anda, ini adalah cara terbaik untuk melakukannya. Ada pertanyaan, komentar, atau saran? Tinggalkan mereka di bawah!

[ad_2]

Artikel terbaru