Skip to main content

Quick Start (Svelte)

Most basic rendering code​

<script>
import View360, { EquirectProjection } from "@egjs/svelte-view360";
import "@egjs/svelte-view360/css/view360.min.css";

const projection = new EquirectProjection({
  src: "/egjs-view360/pano/equirect/veste.jpg"
});
</script>

<View360 class="is-16by9" projection={projection} />

Styles​

You can directly import CSS file from @egjs/svelte-view360.

import "@egjs/svelte-view360/css/view360.min.css";

Properties & Methods​

See Properties & Methods

Events​

You can use all events from Events like normal svelte events.
But as they're delivered as CustomEvent, all event props are provided inside detail.
For example, you can listen to viewChange event like this.

<script lang="ts">
import View360, { ViewChangeEvent } from "../src";

function viewChange(evt: CustomEvent<ViewChangeEvent>) {
  console.log(evt.detail); // = ViewChangeEvent
}
</script>

<View360 on:viewChange={viewChange} />

Additional props​

canvasClass: string = ""​

Using prop class will add classes to the .view360-container element.
Instead, you can use canvasClass to add classes to .view360-canvas element.

For example, this:

<View360 class="CLASS_A" canvasClass="CLASS_B" />

will generate this:

<div class="view360-container CLASS_A">
  <canvas class="view360-canvas CLASS_B" />
</div>