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