Globus: 3D globusni kun va tun almashinuvi bilan loyihangizga qanday integratsiya qilish
Zamonaviy veb-dunyoda interaktiv 3D grafika tobora ommalashib bormoqda. Eng ta'sirli va foydali elementlardan biri bu — kun/tun tsikliga ega 3D globus. Ushbu maqolada men o'z tajribam va tayyor yechim bilan bo'lishaman, uni siz o'z loyihangizga osonlikcha integratsiya qilishingiz mumkin.
Biz uchta integratsiya usulini ko'rib chiqamiz: oddiy iframe'dan tortib, globe.gl kutubxonasidan foydalangan holda to'liq sozlashgacha. Siz saytingizga globusni litsenziya talablarini buzmasdan qanday qo'shishni va uni o'zingizning noyob dizayningizning bir qismiga aylantirishni o'rganasiz.
Tayyor yechim: kun/tun tsikliga ega interaktiv globus
Quyida iframe orqali o'rnatilgan ishlaydigan misol keltirilgan. Bu funksiyani sahifangizga qo'shishning - bu eng tezkor usul.
1-usul: iframe orqali integratsiya
Eng oddiy va tezkor usul — rasmiy saytdan tayyor misolni o'rnatish. Agar sizga chuqur sozlashsiz tez yechim kerak bo'lsa, bu ideal variant.
<iframe src="https://globe.gl/example/day-night-cycle/"
width="100%" height="500"
style="border:0; border-radius:16px;"
allowfullscreen loading="lazy">
</iframe>
Kamchiliklari: Cheklangan sozlash, tashqi resursga bog'liqlik, xatti-harakat yoki ko'rinishni o'zgartirib bo'lmaydi.
2-usul: globe.gl bilan mustaqil integratsiya
Bu yondashuv sizga globus ustidan to'liq nazoratni beradi. Siz teksturalarni, aylanish tezligini o'zgartirishingiz, markerlar qo'shishingiz va yana ko'p narsalarni qilishingiz mumkin. Men o'z loyihalarimda aynan shu usuldan foydalanaman.
Asosiy HTML shabloni
<!DOCTYPE html>
<html>
<head>
<style> body { margin: 0; } </style>
<script src="//cdn.jsdelivr.net/npm/globe.gl"></script>
</head>
<body>
<div id="globeViz" style="width:100vw;height:100vh;"></div>
<script>
// Bu yerda sizning ishga tushirish kodingiz
</script>
</body>
</html>
Kun/tun tsiklining amalga oshirilishi (misoldagidek)
Kun/tun o'tish effektini yaratish uchun Three.js dan ShaderMaterial ishlatiladi, u quyosh pozitsiyasiga qarab kunduzgi va tungi teksturalarni aralashtiradi. Mana kommentariylar bilan moslashtirilgan kod:
<script type="module">
import { TextureLoader, ShaderMaterial, Vector2 } from 'https://esm.sh/three';
import * as solar from 'https://esm.sh/solar-calculator';
const VELOCITY = 1; // tezlik (kadrga minut)
// --- Teksturalarni aralashtirish uchun shader ---
const dayNightShader = {
// ... (to'liq shader kodini rasmiy misolda topishingiz mumkin)
};
// --- Quyosh pozitsiyasi funksiyasi ---
const sunPosAt = dt => {
const day = new Date(+dt).setUTCHours(0,0,0,0);
const t = solar.century(dt);
const longitude = (day - dt) / 864e5 * 360 - 180;
return [longitude - solar.equationOfTime(t) / 4, solar.declination(t)];
};
// --- Globusni ishga tushirish ---
const world = new Globe(document.getElementById('globeViz'));
// Teksturalarni yuklash
Promise.all([
new TextureLoader().loadAsync('//cdn.jsdelivr.net/npm/three-globe/example/img/earth-day.jpg'),
new TextureLoader().loadAsync('//cdn.jsdelivr.net/npm/three-globe/example/img/earth-night.jpg')
]).then(([dayTexture, nightTexture]) => {
// ... materialni yaratish va animatsiyani ishga tushirish
});
</script>
To'liq ishlaydigan kodni har doim globe.gl rasmiy repozitoriyida topishingiz mumkin. Men uni asos sifatida ishlatib, o'z ehtiyojlaringizga moslashtirishni tavsiya qilaman.
Qonuniylik va manbaga havola
globe.gl kutubxonasi MIT litsenziyasi ostida tarqatiladi, bu uni tijorat va shaxsiy loyihalarda erkin ishlatish imkonini beradi. Biroq, litsenziya shartlariga ko'ra, men mualliflik huquqini ko'rsatishga majburman.
Alternativ yondashuvlar
- Three.js + Orbit Controls: Three.js yordamida globusni noldan yaratish. Maksimal moslashuvchanlikni beradi, lekin ko'proq kod talab qiladi.
- Cesium kutubxonasi: Geografik vizualizatsiyalar uchun kuchli vosita, lekin og'irroq va o'rganish qiyinroq.
- Xarita API'lari (Google Maps, Mapbox): 3D Yer ko'rinishini qo'shish imkonini beradi, lekin ko'pincha API kalitlari talab qilinadi va bepul tarifda cheklovlar mavjud.