Pannellum for LiaScript: 360° Panoramas and Virtual Tours in Your Course

Spatial learning contexts — visiting a museum, exploring a geological site, taking a field trip — are hard to replicate in a document. The Pannellum template integrates Pannellum — the lightweight, standalone panorama viewer — into LiaScript.

Embed an equirectangular photo as a 360° interactive viewer, add informational hotspots, or include 360° video, all with short macros.

Quick Start

<!--
import: https://raw.githubusercontent.com/liaTemplates/pannellum/master/README.md
-->

Macro 1: @Pannellum.panorama(url) — Simple 360° Image

Embed a single equirectangular panorama image. The viewer supports mouse drag to look around, scroll to zoom:

@Pannellum.panorama(https://pannellum.org/images/from-tree.jpg)

Try it live — drag to look around the panorama, scroll to zoom:

Macro 2: @Pannellum.panoramaWithHotspots(url) — Annotated Panorama

Add a JSON code block with hotspot definitions on the line after the macro call. Each hotspot defines a position (pitch, yaw) and optional label or link:

@Pannellum.panoramaWithHotspots(https://pannellum.org/images/from-tree.jpg)
```json
{ "pitch": 14.1, "yaw": 1.5, "type": "info", "text": "Look here!" }
{ "pitch": -3.1, "yaw": 122.9, "type": "info", "text": "Interesting spot", "URL": "https://example.com" }
```

Try it live — look around and click the hotspot markers:

Each line is a separate hotspot JSON object (no array brackets around them).

Hotspot types:

• "info" — info bubble with text
• "scene" — navigation to another scene (multi-scene tours)
• "custom" — custom-styled marker

Macro 3: @Pannellum.hotspots(url) — Find Hotspot Coordinates

Use this for authoring: it’s identical to panoramaWithHotspots but also logs the pitch/yaw of every click to the browser console. Use it to find the coordinates you need, then switch to panoramaWithHotspots.

@Pannellum.hotspots(https://pannellum.org/images/from-tree.jpg)

Macro 4: @Pannellum.video(id, videoUrl) — 360° Video

Embed a 360° video (equirectangular projection):

@Pannellum.video(equirectangular-video, https://example.com/360video.mp4)

Hotspot JSON Format

{
  "pitch": 14.1,
  "yaw": 1.5,
  "type": "info",
  "text": "Label text",
  "URL": "https://optional-link.com"
}

Example: Virtual Field Trip with Hotspots

## Rock Formation Tour

Look around the outcrop. Click the markers to learn more.

@Pannellum.panoramaWithHotspots(https://example.com/rock-outcrop-360.jpg)
```json
{ "pitch": 5, "yaw": 45, "type": "info", "text": "Folded limestone layer — Jurassic period" }
{ "pitch": -10, "yaw": 200, "type": "info", "text": "Fault line visible here", "URL": "https://example.com/fault-explainer" }
{ "pitch": 20, "yaw": 300, "type": "info", "text": "Igneous intrusion — note the contact zone" }
```

Full Template Demo

Use Cases

Virtual field trips — Take students to geological sites, historical buildings, or ecosystems they cannot physically visit. Annotate key features with hotspot markers.

Architecture and design — Embed 360° photos of buildings, interiors, or spaces for design critique and analysis.

Biology and ecology — Show habitat panoramas with annotated flora and fauna markers.

Chemistry and safety — Tour a virtual lab or production facility before the real visit.

Open educational resources — Add freely licensed 360° photos from Wikimedia Commons as interactive panoramas.

Technical Facts

Try It

Related Templates

• aframe — full 3D/VR scene authoring with A-Frame WebGL
• BeforeAndAfter — compare two images with a slider
• lia-board-mode — full-screen presentation mode for classroom use