Stories from every corner

The sphere sits inside a normal scrolling page on a light background. On phones a vertical swipe scrolls the page and a horizontal swipe spins the sphere (pageScroll: true).

Minimal usage

import { createPhotoSphere } from "three-photo-sphere";

const sphere = createPhotoSphere(document.getElementById("sphere"), {
  background: { atlas: { url: "demo/atlas.jpg", columns: 16, rows: 16 } },
  slots: [
    { id: "SPHERE_SLOT_01", lat: 0, lon: 0, width: 0.62, height: 0.48 },
    { id: "SPHERE_SLOT_02", lat: 38, lon: 0, width: 0.34, height: 0.26 },
  ],
  hazeColor: "#f4f1ea",
  pageScroll: true,
});

sphere.setImages([
  ["SPHERE_SLOT_01", "image1.jpg"],
  ["SPHERE_SLOT_02", "image2.jpg"],
]);

Scroll test area.