Explorable HDRI Website? Simple, with pannellum
A Simple guide about the usage of pannellum library to make simple HDRI website
This guide show how to use Pannellum to create a website with HDRI 360 images like you can finde on Poly Haven.
You can find here the code of the example and you can try it at this page.
Create html page
I chouse to make a simple public/index.html page using cdn version of pannellum, so first step add pannellum cdn into head of html
...
<head>
...
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/pannellum@2.5.6/build/pannellum.css" />
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/pannellum@2.5.6/build/pannellum.js"></script>
...
</head>
...Into the body add a div with specific id (i chouse “panorama”):
...
<body>
...
<div id="panorama"></div>
...
</body>
...And then add the script (I put it into html file):
...
<script>
pannellum.viewer(
'panorama',
{
"default": {
"firstScene": "first",
},
"scenes": {
"first": {
"title": "My first example",
"type": "equirectangular",
"panorama": "https://pannellum.org/images/alma.jpg",
"autoLoad": true,
"author": "Me",
"hotSpots": [
{
"pitch": 15,
"yaw": 0,
"type": "info",
"text": "This is an info."
},
{
"pitch": 0,
"yaw": -10,
"type": "scene",
"text": "Second scene",
"sceneId": "second"
}
],
},
"second": {
"title": "My second example",
"type": "equirectangular",
"panorama": "https://pannellum.org/images/alma.jpg",
"autoLoad": true,
"author": "always Me",
"hotSpots": [
{
"pitch": 15,
"yaw": 0,
"type": "info",
"text": "This is an info."
},
{
"pitch": 0,
"yaw": -10,
"type": "scene",
"text": "First scene",
"sceneId": "first"
}
],
}
}
}
);
</script>
...You can setup a default scene from a list of scene. The list of scene contain the configuration for each schene that include the hotSpot that can be simple textual information if type is info and it can change scene if type is scene.
Full example public/index.html:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>A simple example</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/pannellum@2.5.6/build/pannellum.css" />
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/pannellum@2.5.6/build/pannellum.js"></script>
<style>
#panorama {
width: 600px;
height: 400px;
}
</style>
</head>
<body>
<div id="panorama"></div>
<script>
pannellum.viewer(
'panorama',
{
"default": {
"firstScene": "first",
},
"scenes": {
"first": {
"title": "My first example",
"type": "equirectangular",
"panorama": "https://pannellum.org/images/alma.jpg",
"autoLoad": true,
"author": "Me",
"hotSpots": [
{
"pitch": 15,
"yaw": 0,
"type": "info",
"text": "This is an info."
},
{
"pitch": 0,
"yaw": -10,
"type": "scene",
"text": "Second scene",
"sceneId": "second"
}
],
},
"second": {
"title": "My second example",
"type": "equirectangular",
"panorama": "https://pannellum.org/images/alma.jpg",
"autoLoad": true,
"author": "always Me",
"hotSpots": [
{
"pitch": 15,
"yaw": 0,
"type": "info",
"text": "This is an info."
},
{
"pitch": 0,
"yaw": -10,
"type": "scene",
"text": "First scene",
"sceneId": "first"
}
],
}
}
}
);
</script>
</body>
</html>Deploy on gitlab pages
If you are not interested to undestrand how to deploy it on gitlab pages you can skip this chapter.
You need to push your index.html inside a folder called public into the gitlab.com repo and add also a .gitlab-ci.yml file:
pages:
stage: deploy
environment: prod
image:
name: node:latest
script:
- ls
artifacts:
paths:
- public
only:
- mainafter the push into the branch main that pipeline will automatically run and when it end a the link https://<your-name>.gitlab.io/<your-repo> you can find the deployed site.
Conclusions
This library seams very simple to use but it have no much freedom, if you need a use case like that it can be the best solution.
Thank you for the creators of Pannellum and enjoy open source!
