How To Add 360° Panoramic Photos to your Website with PANOLENS JS
ฝัง
- เผยแพร่เมื่อ 19 ต.ค. 2024
- In this video you will learn how to add panoramic photos to your website using the PANOLENS Javascript library.
Download PANOLENS file: raw.githubuser...
Download THREE.JS file: threejs.org/bui...
PANOLENS Documentation: pchen66.github...
PANOLENS API: pchen66.github...
Thank you! I was struggling with panolens starting template that uses the image url rather than the html element for the .ImagePanorama() method. This is a lot more flexible. Note: to hide the fullscreen and other controls on the lower right you can use css: .pano-image>div {display: none; }. One universal gripe: "const" makes a variable both global and unchangeable. It most cases you probably want neither.
I actually looked at it several times, when I run it it shows: three.js version is not matched. Please consider use the target revision 105. Searching about the error didn't get very useful information, if anyone can help it would be of great help😌
Thank you for this, I was going nuts trying to figure out which version. Hero of the day!
Bro, for example, do you want to add a second panoramic photo? Thank you
VERY Nice demo
But when I try it, I get a connection refused on localhost:8080.
Did not find a solution yet.
thank you for a beautiful tutorials, one simple question: I have embed code of my walkthrough, how do I upload this 360VR walkthrough in my website with all features to work?
It's really cool man. Thanky you for the video.
You are very welcome! 😁👍
I've tried the same code following your video, but it is not working at my end.
Same
Same
I tried your code as well and it does not work. Did you put your js files in the head or body?
I tried both and it did not work. Should I not point to the js files locally? Was I supposed to installed some sort of libraries with this or build? Any help or guidance is highly appreciated.
DW
I got this error when I try to create an instance of ImagePanorama class
Uncaught TypeError: Class constructor Wn cannot be invoked without 'new'
Does someone knows why does this happen?
Same
Yeah this is crazy thanks for sharing. I have a question about this..
Is possible to disable moving up and down?
Thanks in advance
Can you please help me, it's not working...
thanks, it really helped me
nice tutorial! thanks, Jay.
You're welcome Brett!
Thank you for sharing your work. I am trying to do it in wordpress but no succes till now... someone knows how it must be done in wordpress? Thank you in advance.
how can download these files?
PANOLENS is not defined error why this error showing
Is it free to use on my website?
Thanks!! Excelent tutorial.
You're welcome!
Hey ! Amazing video man!!! I tried but my image quality is becoming really poor, could you say why this is happenneing?
Awesome Tutorial, thanks man!
In fact, i followed the same steps, i got an error on my navigator console that says " three.min.js:361 Uncaught TypeError: Cannot read property 'elements' of undefined" ; am i the only one? i used the files on your description.
I'm also stuck the same problem. ieatwebsite bro help
Can you send me your code? Maybe put it on a github or something.
@@NAYMURWEB i also get error evenly i tried from others tutorials also but it dont work
not showing on me :(
From where I can get the panoramic image?
very well made tutorial - not working though. Is it possible, that I have missed the point, where I need to implement three.min.js and panolens.min.js?
existem duas páginas que você precisa adicionar ao seu projeto são exatamente essas 2, você pode encontrar na documentação
hey! great video. I'm a beginner however so I'd like to know how to download three.js and panolens.js. What I did was click the link and then I saved the page into my js folder. Am I doing this right? Sorry if this is a little dumb lol
I am wondering as well...
Hey, man! What would you recommend me going with Wordpress for a 360 photo and video website?
You can implement this code to your Wordpress theme. If you don’t want to do that, maybe there’s a plug-in that those that.
@@ieatwebsites That’s awesome. How much do you charge to do website with a 360 background?
Thanks for video ;)
You welcome!
I was using Live Server to run the code, but it is not working. Is there any requirement about that? My code:
360 images
panorama
kaka
kaka
kaka
const panorama = new PANOLENS.ImagePanorama('Garage.jpg');
//const panoimage = document.querySelector('.pano');
//const viewer = new PANOLENS.Viewer({ container: panoimage });
const viewer = new PANOLENS.Viewer({output:'console'});
viewer.add(panorama);
kd
kd
kd
Hi nice Tutorial, Can you help me with the link to a site that offers free 360 images
Thanks in advance
Thank you!
You're welcome!
How to get panoramic images
You can search on Google. There are multiple websites.
this error appears to me:
Please Help-me!
panolens.js:8 Uncaught TypeError: Class constructor Wn cannot be invoked without 'new'
at y.n [as constructor] (panolens.js:8)
at new y (panolens.js:10)
at script.js:6
@@souravmalo5681 how do it?
@@elvisonvictor1690 npm install three@0.105.2
Thank you
You're very welcome
it's not working man!!! Anyone suggest me what i can do man
Post your code.