Zobacz także odnośnik do bardziej szczegółowej dokumentacji.

Rozpoczęcie pracy

Marzipano

Najprostszym sposobem na rozpoczęcie korzystania z Marzipano jest użycie Marzipano.

Przetwarza Twoje panoramy i generuje aplikację internetową, którą można wdrożyć bez zmian lub wykorzystać jako szablon dla bardziej złożonej aplikacji. Narzędzie Marzipano jest obecnie bezpłatne i nie wymaga zakładania konta.

Konfiguracja od podstaw

Jako samodzielny skrypt

  1. Pobierz najnowszą wersję.

  2. Dołącz plik marzipano.js do sekcji treści swojego kodu HTML

    <html>
 <body>
   <script src="marzipano.js"></script>
 </body>
</html>

Jako pakiet Node.js

npm install marzipano
var Marzipano = require('./marzipano');

Stosowanie

Klasy Marzipano.Viewer i Marzipano.Scene zapewniają interfejs API wysokiego poziomu dla najczęstszych przypadków użycia.

Inicjowanie

Viewer jest inicjowane na elemencie DOM

var panoElement = document.getElementById('pano');
var viewerOpts = {
  controls: {
    mouseViewMode: 'drag'    // drag|qtvr
  }
};

var viewer = new Marzipano.Viewer(panoElement, viewerOpts)

Utwórz scenę

Poniższy przykład inicjuje scenę kostki o wielu rozdzielczościach, która używa obrazów w katalogu tiles/ .

var levels = [
  { tileSize: 512, size: 512 },
  { tileSize: 512, size: 1024 }
];

var geometry = new Marzipano.CubeGeometry(levels);
var source = Marzipano.ImageUrlSource.fromString("tiles/{z}/{f}/{y}/{x}.jpg");
var view = new Marzipano.RectilinearView();

var scene = viewer.createScene({
  source: source,
  geometry: geometry,
  view: view
});

Bardziej złożony przykład poniżej również:

  • dodaje poziom podglądu (cubeMap), który jest buforowany podczas tworzenia sceny
  • inicjuje widok
  • ogranicza widok do maksymalnego pola widzenia 120°
  • ogranicza widok do minimalnego pola widzenia dla maksymalnej rozdzielczości twarzy 1024x1024

Zwróć uwagę, że wartości odchylenia, nachylenia i fov są podane w radianach.

var levels = [
  { tileSize: 256, size: 256, fallbackOnly: true },
  { tileSize: 512, size: 512 },
  { tileSize: 512, size: 1024 }
];

var geometry = new Marzipano.CubeGeometry(levels);

var source = Marzipano.ImageUrlSource.fromString("tiles/{z}/{f}/{y}/{x}.jpg", {
  cubeMapPreviewUrl: "tiles/preview.jpg"
});

var initialView = {
  yaw: 90 * Math.PI/180,
  pitch: -30 * Math.PI/180,
  fov: 90 * Math.PI/180
};

var limiter = Marzipano.RectilinearView.limit.traditional(1024, 120*Math.PI/180);

var view = new Marzipano.RectilinearView(initialView, limiter);

var scene = viewer.createScene({
  source: source,
  geometry: geometry,
  view: view,
  pinFirstLevel: true
});

Zmień scenę

Metoda Scene.switchTo() wyświetla scenę w przeglądarce, wykonując przejście w zanikaniu.

scene.switchTo({
  transitionDuration: 1000
});

Zmień widok

Metoda Scene.lookTo() zmienia widok, wykonując animację animacji. Zauważ, że wartości są podane w radianach.

var destinationViewParameters = {
  yaw: 10 * Math.PI/180,
  pitch: 15 * Math.PI/180,
  fov: 60 * Math.PI/180
};

var options = {
  transitionDuration: 2000
}

scene.lookTo(destinationViewParameters, options);

Aby uzyskać większą kontrolę, każdy Scene ma View do którego może uzyskać dostęp view().

var scene = viewer.scene(); // get the current scene
var view = scene.view();    // get the scene's view


// Get the view values

var yaw = view.yaw();
var pitch = view.pitch();
var fov = view.fov();      // fov is horizontal
var vfov = view.vfov();
var hfov = view.hfov();    // same as view.fov()


// Change the values

view.setYaw(45 * Math.PI/180);
view.setPitch(30 * Math.PI/180);
view.setFov(60 * Math.PI/180);

view.setParameters({
  yaw: 45 * Math.PI/180,
  pitch: 30 * Math.PI/180,
  fov: 60 * Math.PI/180
});


// Offset the values by some amount

view.offsetYaw(10 * Math.PI/180);
view.offsetPitch(10 * Math.PI/180);
view.offsetFov(10 * Math.PI/180);

Automatyczny ruch i autorotacja

Viewer.setIdleMovement() definiuje ruch, który ma być uruchamiany automatycznie, gdy widok nie uległ zmianie przez pewien czas.

Metody Viewer.startMovement() i Viewer.stopMovement() umożliwiają ręczne uruchamianie i zatrzymywanie ruchu.

Metoda autorotate() tworzy automatyczny ruch obrotowy, który można wykorzystać z powyższymi metodami.

var autorotate = Marzipano.autorotate({
  yawSpeed: 0.1,         // Yaw rotation speed
  targetPitch: 0,        // Pitch value to converge to
  targetFov: Math.PI/2   // Fov value to converge to
});

// Autorotate will start after 3s of idle time
viewer.setIdleMovement(3000, autorotate);  
// Disable idle movement
viewer.setIdleMovement(Infinity);

// Start autorotation immediately
viewer.startMovement(autorotate); 
// Stop any ongoing automatic movement
viewer.stopMovement();

Hotspoty

Hotspoty to elementy DOM, które są umieszczone w stałym punkcie panoramy, dzięki czemu ich pozycja na ekranie zmienia się wraz ze zmianą widoku sceny.

Punkty aktywne są powiązane ze sceną i są automatycznie wyświetlane razem z tą sceną.

var element = document.getElementById('spot');
var position = { yaw: Math.PI/4, pitch, Math.PI/8 };
scene.hotspotContainer().createHotspot(element, position)

Poniższy przykład tworzy obraz i używa go jako hotspota

  var imgHotspot = document.createElement('img');
  imgHotspot.src = 'img/hotspot.png';
  imgHotspot.classList.add('hotspot');
  imgHotspot.addEventListener('click', function() {
    switchScene(findSceneById(hotspot.target));
  });

  var position = { yaw: Math.PI/4, pitch: Math.PI/8 };

  marzipanoScene.hotspotContainer().createHotspot(imgHotspot, position);

Zależności

Marzipano ma kilka zależności. Są one zawarte w programie marzipano.jsmarzipano.js, więc nie trzeba ich osobno konfigurować.

Interfejsy API i odniesienia

Powyższe klasy Viewer and Scene są wysokopoziomowym interfejsem API zaprojektowanym, aby uczynić Marzipano prostym w użyciu. Jednak komponenty niższego poziomu, których używają, takie jak Layer and Stage, również są odsłonięte. Można ich używać, gdy potrzebna jest większa kontrola lub do implementacji funkcji, które nie są jeszcze obecne w interfejsie API wysokiego poziomu.

Zobacz odnośnik, aby uzyskać bardziej szczegółową dokumentację.