nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

360 Image Hosting

James_GIS

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?

Encuentra más publicaciones etiquetadas con

Content Management

Data and services

Mapping

Accepted answers

James_GIS

@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

All comments

James_GIS

@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

PeterKnoop

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.

James_GIS

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

ClarkSelby

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.

PeterKnoop

@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.

Únete a la Conversación

Los miembros registrados pueden publicar, seguir actualizaciones y más. ¿Nuevo aquí? Regístrate gratis.

Enlaces Rápidos

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.