I successfully transformed the flat image into a spherical image using the provided source code (three js).
<!DOCTYPE html>
<html lang="en">
<head>
<title>Spherical image conversion</title>
<style>
body { margin: 0; overflow: hidden; background-color: #000; }
</style>
</head>
<body>
<div id="container">
<div id="openseadragon1" style="width: 100%; height: 100%;"></div>
<div id="sphere"></div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r71/three.min.js"></script>
<script src="js/OrbitControls.js"></script>
<script src="js/Detector.js"></script>
<script src="./openseadragon_2.0/openseadragon.min.js"></script>
<script type="text/javascript">
var viewer = OpenSeadragon({
id: "openseadragon1",
wrapHorizontal: "true",
wrapVertical: "true",
constrainDuringPan:"true",
defaultZoomLevel: 1,
visibilityRatio: 1,
minZoomLevel: 1,
prefixUrl: "openseadragon_2.0/images/",
tileSources: "spherical.dzi"
});
</script>
<script>
var sphereContainer = document.getElementById('sphere');
var width = window.innerWidth,
height = window.innerHeight;
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, width / height, 1, 1000);
camera.position.x = 0.1;
var renderer = Detector.webgl ? new THREE.WebGLRenderer() : new THREE.CanvasRenderer();
renderer.setSize(width, height);
var sphere = new THREE.Mesh(
new THREE.SphereGeometry(100, 20, 20),
new THREE.MeshBasicMaterial({
map: THREE.ImageUtils.loadTexture('spherical-image.jpg')
})
);
sphere.scale.x = -1;
scene.add(sphere);
var controls = new THREE.OrbitControls(camera);
controls.noPan = true;
controls.noZoom = true;
sphereContainer.appendChild(renderer.domElement);
render();
function render() {
controls.update();
requestAnimationFrame(render);
renderer.render(scene, camera);
}
function onMouseWheel(event) {
event.preventDefault();
if (event.wheelDeltaY) { // WebKit
camera.fov -= event.wheelDeltaY * 0.05;
} else if (event.wheelDelta) { // Opera / IE9
camera.fov -= event.wheelDelta * 0.05;
} else if (event.detail) { // Firefox
camera.fov += event.detail * 1.0;
}
camera.fov = Math.max(40, Math.min(100, camera.fov));
camera.updateProjectionMatrix();
}
document.addEventListener('mousewheel', onMouseWheel, false);
document.addEventListener('DOMMouseScroll', onMouseWheel, false);
</script>
</body>
</html>
I have also converted a high-resolution image to a deep zoom image format. Currently, I have a folder containing processed (split) images and a dzi format file (image folder and image.dzi files).
Next, I am looking to integrate the openseadragon library for better performance when zooming in on the image. This will allow the rendering of tile images from the folder at specific coordinates.
If you have any suggestions on how to achieve this integration, please share them with me.
Thank you in advance.