Create a 360º Picture Viewer for Panorama Images in JavaScript libraries using Three.js and OrbitControl.js

How to Create a 360º Image Viewer for Panorama Images using JavaScript in Minutes | Tushar Kanjariya — Created with Coolors a Great Gradient and Color Generator

Hello Developers 👋,
In recent years, panoramic images have become increasingly popular on the web. Panoramic images provide a 360-degree view of a particular location or environment, allowing users to experience the space as if they were physically there.

Source Code Link: GitHub

Live Demo Link: Click Here

A 360-degree panorama image viewer is a great way to showcase immersive images on your website. With the help of Three.js and OrbitControls.js, you can create a fully functional panorama viewer with mouse drag controls in just a few lines of code.

👉 One of the most common ways to create a panoramic image is to stitch together several photographs taken at different angles using specialized software.

But, Today we created using JavaScript libraries three.js and OrbitControl.js.

👉 Setting up the HTML file

To get started, create a new HTML file and add the necessary markup.

We’ll need to include the Three.js and OrbitControls.js libraries, as well as our own JavaScript file that will contain the code for our panorama viewer.

<!DOCTYPE html><html>  <head>    <title>Panorama Viewer</title>    <style>      body {        margin: 0;        overflow: hidden;      }      #panorama-container {        width: 100%;        height: 100%;      }    </style>  </head>  <body>    <div id="panorama-container"></div>    <script src="https://cdn.jsdelivr.net/npm/three@0.132.2/build/three.min.js"></script>    <script src="https://cdn.jsdelivr.net/npm/three@0.132.2/examples/js/controls/OrbitControls.js"></script>    <script src="script.js"></script>  </body></html>

👉 Loading the panorama image

Next, we’ll create a new JavaScript file, script.js, and add some code to load our panorama image.

💡 You can Free Download Panoramic Images from Unsplash for Testing purpose.

We'll use the TextureLoader class from Three.js to load our image.

// Define variableslet camera, scene, renderer, controls;// Initialize the sceneinit();function init() {  // Create a new camera object  camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 1000);  // Set the camera position  camera.position.set(0, 0, 0.1);  // Create a new scene object  scene = new THREE.Scene();  // Load the panorama image  const loader = new THREE.TextureLoader();  const texture = loader.load('panorama.jpg');  // Set the texture wrapping and flipping options  texture.wrapS = THREE.RepeatWrapping;  texture.repeat.x = -1;  // Create a new sphere geometry to hold the panorama image  const geometry = new THREE.SphereGeometry(500, 60, 40);  // Flip the geometry inside out so that the image is displayed on the inside of the sphere  geometry.scale(-1, 1, 1);  // Create a new material with the loaded texture  const material = new THREE.MeshBasicMaterial({    map: texture  });  // Create a new mesh with the geometry and material  const mesh = new THREE.Mesh(geometry, material);  // Add the mesh to the scene  scene.add(mesh);}

In this code, we create a TextureLoader object and use it to load our panorama image, panorama.jpg. We set the texture wrapping and flipping options to ensure that the image is displayed correctly.

We then create a sphere geometry to hold the panorama image and a mesh with the geometry and material. Finally, we add the mesh to the scene.

👉 Enabling mouse drag controls

To enable mouse drag controls, we’ll use the OrbitControls class from OrbitControls.js.

We'll create a new OrbitControls object and pass in the camera and renderer elements.

// Create a new WebGL renderer objectrenderer = new THREE.WebGLRenderer();// Set the renderer size to the window sizerenderer.setSize(window.innerWidth, window.innerHeight);// Append the renderer to the document bodydocument.getElementById("panorama-container").appendChild(renderer.domElement);// Create a new OrbitControls object to enable mouse drag controlscontrols = new THREE.OrbitControls(camera, renderer.domElement);// Disable vertical movement of the cameracontrols.enableZoom = false;controls.enablePan = false;// Set the controls to rotate around the panorama imagecontrols.rotateSpeed = -0.25;

In this code, we create a new WebGLRenderer object and set its size. We add the renderer to the page and create a new OrbitControls object, passing in the camera and renderer elements.

We disable zooming and panning, and set the controls to rotate around the panorama image.

👉 Rendering the scene

Finally, we need to render the scene using the setAnimationLoop method.

// Set the render looprenderer.setAnimationLoop(() => {    // Update the OrbitControls    controls.update();    // Render the scene with the camera and renderer    renderer.render(scene, camera);});

And that’s it! With just a few lines of code, we’ve created a fully functional 360-degree panorama image viewer with mouse drag controls.

👉 Conclusion

In this article, we’ve learned how to create a 360-degree panorama image viewer with mouse drag controls using Three.js and OrbitControls.js. With this knowledge, you can create immersive image viewing experiences for your website visitors.

Source Code Link: GitHub

Live Demo Link: Click Here

Thanks For Reading 🙏😇

Level Up Coding

Thanks for being a part of our community! Before you go:

👏 Clap for the story and follow the author 👉
📰 View more content in the Level Up Coding publication
💰 Free coding interview course ⇒ View Course
🔔 Follow us: Twitter | LinkedIn | Newsletter

🚀👉 Join the Level Up talent collective and find an amazing job

#javascript, js

Frontender`s Spectre