Skip to main content
100%

equirectangular panorama to perspective

✓ Published0🌍 Public
Aaman-tiwari
Last edited Oct 30, 2017
Created on Oct 30, 2017

This interactive WebGL visualization converts equirectangular panorama images into perspective views using Three.js. Users can upload their own panoramic image, then pan and zoom by dragging and scrolling to explore the scene as a 3D sphere. The perspective projection is adjustable through URL query parameters for field of view and output dimensions, and a button allows saving the current view as a JPEG snapshot. Built on a series of forked blocks, it demonstrates real-time spherical mapping with mouse interaction and file upload support.

AI-generated description

Save perspective snapshots of equirectangular panos, by Aman tiwari THREE.js.

forked from <a href='http://bl.ocks.org/erwaller/'>erwaller</a>'s block: <a href='http://bl.ocks.org/erwaller/6325706'>The SeatGeek Office</a>

forked from <a href='http://bl.ocks.org/anonymous/'>anonymous</a>'s block: <a href='http://bl.ocks.org/anonymous/21ca5940c8fb68b621a57392efbe0483'>Pano 2 persp</a>

forked from <a href='http://bl.ocks.org/anonymous/'>anonymous</a>'s block: <a href='http://bl.ocks.org/anonymous/bded5e6bb781857f01853268abe3ea30'>Pano 2 persp</a>

forked from <a href='http://bl.ocks.org/anonymous/'>anonymous</a>'s block: <a href='http://bl.ocks.org/anonymous/19a377c62ece936a03fabd49c6398026'>Pano 2 persp</a>

forked from <a href='http://bl.ocks.org/anonymous/'>anonymous</a>'s block: <a href='http://bl.ocks.org/anonymous/95b50c6c38601647f0b24836a0b1b1df'>Pano 2 persp</a>

forked from <a href='http://bl.ocks.org/anonymous/'>anonymous</a>'s block: <a href='http://bl.ocks.org/anonymous/b385435790d6da44a6b261c3b7f55eaf'>Pano 2 persp</a>

forked from <a href='http://bl.ocks.org/anonymous/'>anonymous</a>'s block: <a href='http://bl.ocks.org/anonymous/e36582191742ab375f3f68b0a54eb8a3'>Pano 2 persp</a>

forked from <a href='http://bl.ocks.org/anonymous/'>anonymous</a>'s block: <a href='http://bl.ocks.org/anonymous/255431a374593528d26a29f8f8ced24b'>Pano 2 persp</a>

forked from <a href='http://bl.ocks.org/anonymous/'>anonymous</a>'s block: <a href='http://bl.ocks.org/anonymous/18d991da8eb4421a01783b24aaea40cb'>Pano 2 persp</a>

mit Licensed

Similar vizzes

Loading thumbnail…

Raster Reprojection of panorama images (360°) with WebGL

This interactive WebGL visualization reprojects a 360-degree equirectangular panorama image into the stereographic projection, enabling smooth zoom and pan interactions. It displays the source panorama as a textured plane, with the fragment shader performing inverse stereographic projection and rotation calculations in real time. The implementation uses d3.v3 for DOM and event handling, while raw WebGL shaders manage the rendering pipeline, including a custom vertex-fragment shader pair and texture mipmapping. The code compiles shaders, sets up a position buffer for a fullscreen quad, and updates uniform variables for translation, scale, and rotation based on user input.

PPhilippe Rivière
77% match
Loading thumbnail…

Raster Reprojection of panorama images (360°)

This example shows a 360° panorama image reprojected onto a world map using a raster reprojection technique. The panorama is mapped to equirectangular coordinates, then projected to the screen using d3.geo.equirectangular. The visualization is interactive: users can click and drag to rotate the view, with d3.geo.zoom handling quaternion-based rotations for smooth, continuous navigation. The image is drawn to an offscreen canvas, and each pixel is remapped based on the inverse projection. Panning and zooming are handled by the d3.geo.zoom plugin, which modifies the projection’s scale and rotation in response to user input. The final result is rendered on a canvas element, allowing fluid exploration of the full 360° panoramic scene.

PPhilippe Rivière
73% match
Loading thumbnail…

Raster Reprojection of panorama images — inverse colors version

This interactive canvas visualization uses Jason Davies’ d3.geo.zoom and D3 v3 to reproject a 360° panorama image onto an equirectangular projection. The code loads the panorama, draws it to an offscreen canvas, and then inversely maps each pixel of the target canvas back through the projection, inverting the RGB channels to create a negative-color version. Users can pan and zoom the reprojected image using the d3.geo.zoom behavior and projection scale extent.

PPhilippe Rivière
70% match
Loading thumbnail…

ImageSphere

This example displays a three-dimensional globe with pan and zoom, showing a detailed world map texture on a sphere. It uses the Three.js library with `SphereGeometry` and `MeshBasicMaterial` to render the Earth, applying a texture loaded from an external image source. The camera is set with a `PerspectiveCamera` at a distance of one unit, and an animation loop continuously rotates the sphere on the X and Y axes to create a slow, spinning effect. The scene is rendered via `WebGLRenderer` with antialiasing, and the visualization automatically adapts to the browser window size. The underlying data is a static map texture rather than the city-point dataset referenced in the README.

Oocasfre@gmail.com
68% match
Loading thumbnail…

Zoom and Rotating (Reprojecting)

This example demonstrates a dynamic equirectangular world map that is rendered onto a canvas and then applied as a texture to both a plane and a sphere in a 3D A-Frame scene, allowing for zoom and rotation. The map, sourced from a GeoJSON file, uses `d3.geoEquirectangular` projection and a `d3.geoPath` generator to draw graticules and country boundaries. A `d3.timer` drives continuous redraws to the canvas, while the A-Frame `draw-canvas` component integrates it into the virtual environment, with the sphere and camera controls enabling interactive reprojection.

AAlexanderDavidson
67% match
Loading thumbnail…

proj_2

A 3D grid of spheres forms a cube, with each sphere’s color derived from its position along the x, y, and z axes using an HSL mapping. The entire cube rotates slowly over time. Built with Three.js, the visualization uses PerspectiveCamera, OrbitControls for user interaction, SphereGeometry, MeshPhongMaterial, and DirectionalLight. The animation loop updates rotation increments and re-renders the scene, while damping controls allow smooth camera zoom and orbit.

PPremkumar
67% match
Loading thumbnail…

Transversing Equirectangular

Animated equirectangular projection of the world sphere, with a red equator and graticule lines, rotates the globe to show how the projection distorts paths. The animation cycles through three phases: a pure rotation, a zoom-out with a simultaneous SVG rotation, and a return. Built with D3 v3, it uses `d3.geo.equirectangular`, `d3.geo.path`, and `d3.geo.graticule`, and animates via D3’s `.transition()` and `.tween()` methods to recompute geographic paths in real time.

Mmbostock
67% match
Loading thumbnail…

Globe with Panning & Zooming

This example presents an interactive orthographic globe that users can pan by dragging and zoom with the scroll wheel. The visualization renders landmasses and internal country borders, projecting the 3D sphere onto a 2D plane using d3.geoOrthographic and d3.geoPath. The globe's rotation and scale are controlled via d3.drag and d3.zoom, with panning sensitivity inversely tied to the current zoom level. World geometry comes from the visionscarto-world-atlas package, processed with topojson-client to extract features and meshes.

SShad Frigui
66% match