How to view 360 image in my ionic app?

Ionic Framework ionic-v3
1

i want to view 360 images in my app , any method?

2

I have been looking for the same thing. You can use something like this but sadly it will not be support by all the browsers it seems. http://www.marzipano.net/

1 Like
3

Kindly try - https://www.npmjs.com/package/ricoh-theta-viewer. I had the same issue and I created the package for ionic platform.

4

Hey
Can u tell me how to use marzipano in ionic? like how did u include it and render a 3-d image>

5

how to setCameraDir when the device is tilted left, right, up or down in Ionic?

6

Hey all,

Please check the following component (it is a working component that I made to be able to view a 360 image in ionic (for mobile and web use):

HTML:

<div

  class="rotatable-image"

  (mousedown)="handleMouseDown($event)"

  (ondragstart)="preventDragHandler($event)"

>

  <img

    draggable="false"

    class="rotatable-image"

    alt=""

    [src]="_dir + '/' + imageIndex + '.jpg'"

  />

  <div style="font-size: 50px">

    {{ imageIndex }}

  </div>

</div>

SCSS:

.rotatable-image {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 300px;
  background-color: lightgrey;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
}

TS:

import {
  AfterViewInit,
  Component,
  Input,
  OnChanges,
  OnDestroy,
  OnInit,
} from '@angular/core';

// You can play with this to adjust the sensitivity
// higher values make mouse less sensitive
const pixelsPerDegree = 3;

@Component({
  selector: 'app-panoramic',
  templateUrl: './panoramic.component.html',
  styleUrls: ['./panoramic.component.scss'],
})
export class PanoramicComponent implements AfterViewInit, OnDestroy {
  // tslint:disable-next-line: variable-name
  _dir = '../../../assets/dummies/panoramic';
  // tslint:disable-next-line: variable-name
  _totalImages = 46;

  @Input()
  set dir(val: string) {
    this._dir = val !== undefined && val !== null ? val : '';
  }

  @Input()
  set totalImages(val: number) {
    this._totalImages = val !== undefined && val !== null ? val : 0;
  }

  dragging = false;
  dragStartIndex = 1;
  dragStart?: any;
  imageIndex = 1;

  ngAfterViewInit() {
    document.addEventListener(
      'mousemove',
      (evt: any) => {
        this.handleMouseMove(evt);
      },
      false
    );
    document.addEventListener(
      'mouseup',
      () => {
        this.handleMouseUp();
      },
      false
    );
  }

  ngOnDestroy() {
    document.removeEventListener(
      'mousemove',
      (evt: any) => {
        this.handleMouseMove(evt);
      },
      false
    );
    document.removeEventListener(
      'mouseup',
      () => {
        this.handleMouseUp();
      },
      false
    );
  }

  handleMouseDown(e: any) {
    this.dragging = true;
    console.log(e.screenX);
    this.dragStart = e.screenX;
    this.dragStartIndex = this.imageIndex;
  }

  handleMouseUp() {
    this.dragging = false;
  }

  updateImageIndex(currentPosition: any) {
    const numImages = this._totalImages;
    const pixelsPerImage = pixelsPerDegree * (360 / numImages);
    // pixels moved
    const dx = (currentPosition - this.dragStart) / pixelsPerImage;
    let index = Math.floor(dx) % numImages;

    if (index < 0) {
      index = numImages + index - 1;
    }
    index = (index + this.dragStartIndex) % numImages;
    if (index !== this.imageIndex) {
      if (index === 0) {
        index = 1;
      }
      this.imageIndex = index;
    }
  }

  handleMouseMove(e: any) {
    if (this.dragging) {
      this.updateImageIndex(e.screenX);
    }
  }

  preventDragHandler(e: any) {
    e.preventDefault();
  }
}