/ Uyenza njani imbonakalo yemifanekiso engama-360 usebenzisa iJavaScript?

Ibhlog

/ Uyenza njani imbonakalo yemifanekiso engama-360 usebenzisa iJavaScript?

Molweni bafana, namhlanje ndiza kunibonisa indlela yokwenza isibukeli semifanekiso esingama-360 ° sisebenzisa iphanellum , kule vidiyo uya kufunda ukuba uwubonisa njani umfanekiso we-360 kwi-HTML, kwaye ungafunda nokuba uyisebenzisa kanjani i-pannellum js



Ngokusebenzisa i-pannellum js unokwenza umbukeli wemifanekiso engama-360 °, umbukeli wevidiyo oyi-360 °, ukhenketho olubonakalayo oluyi-360 ° kunye nezinye ezininzi.

Yintoni ipannellum?

I-Pannellum js ilayibrari engasindi, yasimahla, kunye nomthombo ovulekileyo wombukeli welayibrari yewebhu. Ngokusebenzisa i-pannellum js unokwenza umbonisi wemifanekiso engama-360 °, umbukeli wevidiyo oyi-360 °, ukhenketho olubonakalayo oluyi-360 °, kunye nezinye ezininzi.



Bona kwakho: Ulawula njani ividiyo ngeScrollTrigger

Uyenza njani i-360 image viewer inyathelo ngenyathelo

Inyathelo 1-Ukwenza iProjekthi eNtsha

Kule nyathelo, kufuneka senze ifolda entsha yeprojekthi kunye neefayile (index.html, style.css, main.js) yokudala umbukeli wemifanekiso engama-360. Kwinyathelo elilandelayo, uya kuqala ukwenza ubume bephepha lewebhu.



Inyathelo 2-Ukuseta ulwakhiwo olusisiseko

Kule nyathelo, siya kongeza ikhowudi ye-HTML ukwenza isiseko seprojekthi.

How to display a 360 image in HTML?

Olu lolwakhiwo lwesiseko samaphepha amaninzi ewebhu asebenzisa i-HTML.

Yongeza le khowudi ilandelayo ngaphakathi | Ithegi:

Inyathelo 3-Yongeza ithala leencwadi lePannellum kunye nefayile ephambili yejs

Uyifumana njani ilayibrari yePannellum?

Indlela yoku-1: Ngu-CDN JS -> Fumana iCDN
Indlela yesi-2: Ungayikhuphela iPannellum ngokusemthethweni -> Fumana iCDN

Inyathelo 4-Ukongeza izitayile zabafundi

Kule nyathelo, siya kongeza izitayile kwiklasi yecandelo Ngaphakathi style.css yefayile

* { padding: 0; margin: 0; } #panorama-360-view { width: 100vw; height: 100vh; }

Inyathelo 5 -Yongeza iKhowudi yeJs

Kwinyathelo lokugqibela kufuneka senze ikhowudi ye main.js

pannellum.viewer ('panorama-360-view', {'type': 'equirectangular', 'panorama': 'https://i.ibb.co/6PGHKkT/360-image.jpg'> Jonga ngoku  

#html #css #javascript #iqalaner