This page use the Open Source Pannellum : https://pannellum.org/documentation/overview/tutorial/
Other tools are listed here:
How to on WordPress ?
- Install HTTP Headers plugin and Set Access-Control-Allow-Origin : *
- Create an article copy/paste the iframe code or HTML in Custom HTML Block.
Image 360
with iframe
<iframe width="600" height="400" allowfullscreen style="border-style:none;" src="https://cdn.pannellum.org/2.5/pannellum.htm#panorama=https%3A//dev.westindiespixels.fr/wp-content/uploads/2023/08/20230802_154755_439-scaled.jpg&autoLoad=true&autoRotate=3"></iframe>Tour 360
Assemblage d’image 360 pour former une visite virtuelle
- Cliquez sur les flèches pour visiter.
- Cliquez sur l’icône d’informations pour afficher les informations.
With iframe
<iframe width="600" height="400" allowfullscreen style="border-style:none;" src="https://cdn.pannellum.org/2.5/pannellum.htm#config=https://dev.westindiespixels.fr/wp-content/uploads/tour.json"></iframe>
With custom HTML
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tour</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": "1",
"author": "westindiesdev.com",
"sceneFadeDuration": 1000,
"autoLoad": true
},
"scenes": {
"1": {
"title": "Point de vue 1",
"hfov": 110,
"pitch": -11,
"yaw": -68,
"type": "equirectangular",
"autoRotate": 2,
"hotSpotDebug": true,
"panorama": "https://dev.westindiespixels.fr/wp-content/uploads/2023/08/20230802_154755_439-scaled.jpg",
"hotSpots": [
{
"pitch": -8,
"yaw": -116,
"type": "scene",
"text": "Point de vue suivant",
"sceneId": "2",
}
]
},
"2": {
"title": "Point de vue 2",
"hfov": 110,
"pitch": 4,
"yaw": -104,
"type": "equirectangular",
"hotSpotDebug": true,
"panorama": "https://dev.westindiespixels.fr/wp-content/uploads/2023/08/20230802_154810_457-scaled.jpg",
"hotSpots": [
{
"pitch": -5,
"yaw": -16,
"type": "scene",
"text": "Point de vue précédent",
"sceneId": "1",
},
{
"pitch": -12,
"yaw": -158,
"type": "scene",
"text": "Point de vue suivant",
"sceneId": "3",
}
]
},
"3": {
"title": "Point de vue 3",
"hfov": 110,
"pitch": 4,
"yaw": -104,
"type": "equirectangular",
"hotSpotDebug": true,
"panorama": "https://dev.westindiespixels.fr/wp-content/uploads/2023/08/20230802_154821_514-scaled.jpg",
"hotSpots": [
{
"pitch": -5,
"yaw": 47,
"type": "scene",
"text": "Point de vue précédent",
"sceneId": "2",
},
{
"pitch": -16,
"yaw": -131,
"type": "scene",
"text": "Point de vue suivant",
"sceneId": "4",
}
]
},
"4": {
"title": "Point de vue 4",
"hfov": 110,
"pitch": -2,
"yaw": 74,
"type": "equirectangular",
"hotSpotDebug": true,
"panorama": "https://dev.westindiespixels.fr/wp-content/uploads/2023/08/20230802_154833_243-scaled.jpg",
"hotSpots": [
{
"pitch": -14,
"yaw": 134,
"type": "scene",
"text": "Point de vue précédent",
"sceneId": "3",
},
{
"pitch": -3,
"yaw": 36,
"type": "scene",
"text": "Point de vue suivant",
"sceneId": "5",
}
]
},
"5": {
"title": "Point de vue 5",
"hfov": 110,
"pitch": -8,
"yaw": 57,
"type": "equirectangular",
"hotSpotDebug": true,
"panorama": "https://dev.westindiespixels.fr/wp-content/uploads/2023/08/20230802_154845_137-scaled.jpg",
"hotSpots": [
{
"pitch": -10,
"yaw": 85,
"type": "scene",
"text": "Point de vue précédent",
"sceneId": "4",
},
{
"pitch": -13,
"yaw": -36,
"type": "scene",
"text": "Point de vue suivant",
"sceneId": "6",
},
{
"pitch": -2,
"yaw": 16,
"type": "info",
"text": "Église Saint-Joseph Vieux-Habitants",
"URL": "https://fr.wikipedia.org/wiki/%C3%89glise_Saint-Joseph_de_Vieux-Habitants"
}
]
},
"6": {
"title": "Point de vue 6",
"hfov": 110,
"pitch": -4,
"yaw": 50,
"type": "equirectangular",
"panorama": "https://dev.westindiespixels.fr/wp-content/uploads/2023/08/20230802_154856_022-scaled.jpg",
"hotSpotDebug": true,
"hotSpots": [
{
"pitch": -14,
"yaw": 34,
"type": "scene",
"text": "Point de vue précédent",
"sceneId": "5",
},
{
"pitch": -2,
"yaw": 16,
"type": "info",
"text": "Église Saint-Joseph Vieux-Habitants",
"URL": "https://fr.wikipedia.org/wiki/%C3%89glise_Saint-Joseph_de_Vieux-Habitants"
}
]
}
}
});
</script>
</body>
</html>Vidéo 360
Voir sur la page :