360°-Panoramas für Webseiten nutzen
1.) 360°-Panoramen mit MozillaReality
Mozilla bietet eine Minimalvariante, bei der nur eine JavaScript-Datei extern eingebunden wird und dann das Bild als Panorama dargestellt wird.
Beispiel:
http://mpz-lkl.lernsax.de/tiburski/VR/Mathe/index_mozilla.html
Minimaler Aufwand, da nur eine Zeile im Quelltext bearbeitet werden muss:
Quelltext:
<html>
<head>
<script src="https://rawcdn.githack.com/MozillaReality/immersive-custom-elements/v0.1.0/build/immersive-custom-elements.js"></script>
</head>
<body>
<img-360 src="360-landscape.jpg" width="640" height="360"></img-360>
<video-360 src="myvideo.mp4" width="640" height="360"></video-360>
</body>
</html>
2.) 360°-Panoramen mit Babylonjs - Photodome
Ein wesentlich komplizierterer Quelltext erlaubt aber die Wiedergabe mit VR-Brillen und weitere Gimmicks, wie z.B. die Änderung der Start-Ausrichtung und das Hinzufügen von Objekten mittels Babylon.JS. Im einfachsten Fall brauch aber auch hier einfach nur das Bild im Quelltext ausgetauscht werden und die HTML-Datei ist fertig:
Beispiel:
http://mpz-lkl.lernsax.de/tiburski/VR/360_Grad_Panorama.html
Den untenstehenden Quelltext als HTMl-Datei abspeichern und das jpg durch ein eigenes Panorama-Bild ersetzen. Das Bild sollte das Format 360:180 haben.
Quelltext
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Babylon.js sample code</title>
<!-- Babylon.js -->
<script src="https://code.jquery.com/pep/0.4.2/pep.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.6.2/dat.gui.min.js"></script>
<script src="https://preview.babylonjs.com/ammo.js"></script>
<script src="https://preview.babylonjs.com/cannon.js"></script>
<script src="https://preview.babylonjs.com/Oimo.js"></script>
<script src="https://preview.babylonjs.com/earcut.min.js"></script>
<script src="https://preview.babylonjs.com/babylon.js"></script>
<script src="https://preview.babylonjs.com/materialsLibrary/babylonjs.materials.min.js"></script>
<script src="https://preview.babylonjs.com/proceduralTexturesLibrary/babylonjs.proceduralTextures.min.js"></script>
<script src="https://preview.babylonjs.com/postProcessesLibrary/babylonjs.postProcess.min.js"></script>
<script src="https://preview.babylonjs.com/loaders/babylonjs.loaders.js"></script>
<script src="https://preview.babylonjs.com/serializers/babylonjs.serializers.min.js"></script>
<script src="https://preview.babylonjs.com/gui/babylon.gui.min.js"></script>
<script src="https://preview.babylonjs.com/inspector/babylon.inspector.bundle.js"></script>
<style>
html, body {
overflow: hidden;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#renderCanvas {
width: 100%;
height: 100%;
touch-action: none;
}
</style>
</head>
<body>
<canvas id="renderCanvas"></canvas>
<script>
var canvas = document.getElementById("renderCanvas");
var engine = null;
var scene = null;
var sceneToRender = null;
var createDefaultEngine = function() { return new BABYLON.Engine(canvas, true, { preserveDrawingBuffer: true, stencil: true, disableWebGL2Support: false}); };
var createScene = function () {
var scene = new BABYLON.Scene(engine);
var camera = new BABYLON.ArcRotateCamera("Camera", -Math.PI / 2, Math.PI / 2, 5, BABYLON.Vector3.Zero(), scene);
camera.attachControl(canvas, true);
camera.inputs.attached.mousewheel.detachControl(canvas);
var dome = new BABYLON.PhotoDome(
"testdome",
"https://padlet-uploads.storage.googleapis.com/431603139/4139d12b9489b0067170c4d5c7650b59/PANO_20201202_MPZ_Haubitz.jpg ",
{
resolution: 32,
size: 1000
},
scene
);
return scene;
};
var engine;
var scene;
initFunction = async function() {
var asyncEngineCreation = async function() {
try {
return createDefaultEngine();
} catch(e) {
console.log("the available createEngine function failed. Creating the default engine instead");
return createDefaultEngine();
}
}
engine = await asyncEngineCreation();
if (!engine) throw 'engine should not be null.';
scene = createScene();};
initFunction().then(() => {sceneToRender = scene
engine.runRenderLoop(function () {
if (sceneToRender && sceneToRender.activeCamera) {
sceneToRender.render();
}
});
});
// Resize
window.addEventListener("resize", function () {
engine.resize();
});
</script>
</body>
</html>
3.) 360°-Panoramen mit A-Frame
Beispiel
http://mpz-lkl.lernsax.de/tiburski/VR/Panorama_A-Frame.html
Der Quelltext ist wieder einfacher, aber hier muss das Panoramabild auf einem sicheren Server liegen (https). LernSax, Dropbox, bplaced, GoogleDrive und auch die Cloud vom Schullogin sind dafür nicht geeignet. Ich habe das Bild auf ein Padlet hochgeladen und den Link kopiert.
Hier kann man wieder mit A-Frames weitere Objekte hinzufügen.
Quelltext
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>360° Image</title>
<script src="https://aframe.io/releases/1.1.0/aframe.min.js"></script>
</head>
<body>
<a-scene>
<a-sky src="https://padlet-uploads.storage.googleapis.com/431603139/4139d12b9489b0067170c4d5c7650b59/PANO_20201202_MPZ_Haubitz.jpg" rotation="0 -130 0"></a-sky>
</a-scene>
</body>
</html>