Hi Ladies & Gents, I'm seeking some advise on the best way to display some images on a website with a 360 spin function similar to https://mosurban.com/products/eyre-bench/ (scroll about halfway down). Now, I have very very limited skills with web design and I'm looking at sourcing a website through Square Space or alike. I've been informed that these hosting sites don't offer this type of function and that custom coding/scripts would be required to achieve this. Does anyone have any recommendations or could point me in the right direction? Thanks in advanced people.
You probably want something like this: https://jsfiddle.net/bghj5mhc/ <html> <head> <meta charset="utf-8"> <title>360° Image</title> <meta name="description" content="360° Image - A-Frame"> <script src="https://aframe.io/releases/0.7.1/aframe.min.js"></script> </head> <body> <a-scene> <a-sky src="https://raw.githubusercontent.com/aframevr/aframe/v0.7.0/examples/boilerplate/panorama/puydesancy.jpg" rotation="0 -130 0"></a-sky> <a-text font="kelsonsans" value="Puy de Sancy, France" width="6" position="-2.5 0.25 -1.5" rotation="0 15 0"></a-text> </a-scene> </body> </html> Code (markup):
Thanks for your response qwikad.com. Rather than having a 360(panoramic) image rotating as you have kindly suggested, I'm more in the hunt for something that will allow me to display a series of images to give a product a 3D rotation (just side to side). I've attached a website that has a similar function.
Demo: https://codyhouse.co/demo/360-degrees-product-viewer/index.html You can download it here: https://codyhouse.co/gem/360-degrees-product-viewer/ Since you said you have limited skills, it will be too much work no matter what framework you choose. I wouldn't mess with any of that if I were you.
Hi Mitchella, In this case, I would recommand using a simple webapp like Panoraven to do that. It's easy, free and it does not require you to create an accountto upload a 360 image. Quickly, here is how you could do it : Step 1 : Upload your 360 photo here Step 2 : After the upload, if all is working fine you should access to the viewer. Just copy the embed code like the picture below. Step 3 : Here is how to insert the code in a squarespace website : From the page or post editor, click an Insert Point or the + -> Select Embed from the menu and paste the code like in the picture below. That's it, you should be able to use navigate your image in all directions direclty on your website! Please let me know if it helps you !