topic Re: 360 Image Hosting in ArcGIS Online Questions

360 Image Hosting

James_GIS — Wed, 17 Jan 2024 11:12:57 GMT

Right now I use Momento360 to upload and host 360 images, however it's a bit cumbersome to upload large numbers of files and no away to automate the process.

I can upload the images to a s3 Bucket on AWS, however they they are not displayed as 360 just a flat image.

Does anyone have experience uploading 360 images to AWS?

Re: 360 Image Hosting

PeterKnoop — Wed, 17 Jan 2024 15:53:46 GMT

@James_GIS when you use Memento360, the URL they provide for your content includes a viewer that is pointed at your image file hosted on their service. When you host your image file on AWS, it is just a file in your S3 bucket, and there is no viewer in front of it.

If you want to host your 360 image files in AWS, then you also need to supply your own viewer. For example, you could host three.js (open-source) in your S3 bucket too, which is an easy to use, lightweight, cross-browser, general purpose 3D library. Such an approach does involve some basic JavaScript coding, which Memento360 nicely takes care of for you. For 360-degree images, I usually adapt three.js's webgl_panorama_equirectangular.html viewer example to meet my needs.

Re: 360 Image Hosting

ClarkSelby — Thu, 18 Jan 2024 15:13:55 GMT

Here are a few ArcGIS tools for the seamless integration of 360° photos and videos into both ArcGIS Online and Enterprise. These solutions facilitate the swift deployment of large-scale 360° imagery projects within hours of collection, with the added advantage of storing imagery in AWS for seamless access via ArcGIS.

Re: 360 Image Hosting

James_GIS — Fri, 19 Jan 2024 12:18:40 GMT

Thanks for that, so would you create a seperate html for each file with this?

Re: 360 Image Hosting

PeterKnoop — Fri, 19 Jan 2024 13:41:06 GMT

If you have only a few 360 image files, then duplicating your implementation of webgl_panorama_equirectangular.html, and changing just the filename to display is a quick solution.

You probably have a lot of 360 image files though, so a more general solution is to add support in the JavaScript code to handle a URL parameter. You would use the parameter to pass the filename or pathname of the image you want the viewer to display. Then you would only need one copy of the viewer.

Re: 360 Image Hosting

James_GIS — Tue, 23 Jan 2024 13:09:55 GMT

@PeterKnoop - Amazing. That works

For anyone else looking to do this in the future, here is how I did it.

I created the files below

Then opening the HTML file in a web browser and append the image parameter to the URL, specifying the path to the 360 image in the AWS S3 bucket.

Example URL: http://yourwebsite.com/360.html?image=https://your-s3-bucket.s3.amazonaws.com/360image.jpg

----- 360.html -----

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>360 Image Viewer</title> <script src="https://threejs.org/build/three.js"></script> </head> <body> <script type="module" src="main.js"></script> </body> </html>

---- main.js ----

// your_script.js //import Orbit Controls - Orbit controls allow the camera to orbit around a target. import { OrbitControls } from 'https://unpkg.com/three@0.112/examples/jsm/controls/OrbitControls.js'; // Function to get URL parameters function getUrlParameter(name) { name = name.replace(/[[]/, '\\[').replace(/[\]]/, '\\]'); var regex = new RegExp('[\\?&]' + name + '=([^&#]*)'); var results = regex.exec(location.search); return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' ')); } // Initialize Three.js scene var scene = new THREE.Scene(); var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); var renderer = new THREE.WebGLRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); // Get the image URL from the URL parameter, this allows you to reuse the same HTML file e.g http://yourwebsite.com/your_viewer.html?image=https://your-s3-bucket.s3.amazonaws.com/360image.jpg var imageUrl = getUrlParameter('image'); // Load 360 image texture var texture = new THREE.TextureLoader().load(imageUrl); // Create a sphere geometry to map the 360 image onto var geometry = new THREE.SphereGeometry(500, 60, 40); var material = new THREE.MeshBasicMaterial({ map: texture, side: THREE.DoubleSide }); var sphere = new THREE.Mesh(geometry, material); scene.add(sphere); // Set camera position camera.position.set(0, 0, 0.1); // Add OrbitControls from the module var controls = new OrbitControls(camera, renderer.domElement); controls.enableZoom = false; // Disable zooming, you can enable it if needed // Render loop function animate() { requestAnimationFrame(animate); controls.update(); // Update controls renderer.render(scene, camera); } animate();

Of course uploading to the s3 bucket, make use you have correct security set for what you want to do

Set the metadata for the images to view in browser

Type

Key

Value

System defined

Content-Type

image/jpeg