@zenvor/view360 4.0.0-beta.7-fork.1

package/src/geometry/SphereGeometry.ts

@@ -0,0 +1,55 @@
+/*
+ * Copyright (c) 2023-present NAVER Corp.
+ * egjs projects are licensed under the MIT license
+ */
+import Geometry from "./Geometry";
+
+/**
+ * @hidden
+ */
+class SphereGeometry extends Geometry {
+  /** */
+  public constructor() {
+    // const radius = 1;
+    const widthSegments = 60;
+    const heightSegments = 60;
+    const ANGLE_CORRECTION_FOR_CENTER_ALIGN = -0.5 * Math.PI;
+
+    const uvs: number[] = [];
+    const vertices: number[] = [];
+    const indicies: number[] = [];
+    let latIdx: number;
+    let lngIdx: number;
+
+    for (latIdx = 0; latIdx <= widthSegments; latIdx++) {
+      const theta = (latIdx / widthSegments - 0.5) * Math.PI;
+      const sinTheta = Math.sin(theta);
+      const cosTheta = Math.cos(theta);
+
+      for (lngIdx = 0; lngIdx <= heightSegments; lngIdx++) {
+        const phi = (lngIdx / heightSegments - 0.5) * 2 * Math.PI + ANGLE_CORRECTION_FOR_CENTER_ALIGN;
+        const sinPhi = Math.sin(phi);
+        const cosPhi = Math.cos(phi);
+        const x = cosPhi * cosTheta;
+        const y = sinTheta;
+        const z = sinPhi * cosTheta;
+        const u = lngIdx / heightSegments;
+        const v = latIdx / widthSegments;
+
+        uvs.push(u, v);
+        vertices.push(x, y, z);
+
+        if (lngIdx !== heightSegments && latIdx !== widthSegments) {
+          const a = latIdx * (heightSegments + 1) + lngIdx;
+          const b = a + heightSegments + 1;
+
+          indicies.push(a, a + 1, b, b, a + 1, b + 1);
+        }
+      }
+    }
+
+    super(vertices, indicies, uvs);
+  }
+}
+
+export default SphereGeometry;

package/src/hotspot/Hotspot.ts

@@ -0,0 +1,32 @@
+/*
+ * Copyright (c) 2023-present NAVER Corp.
+ * egjs projects are licensed under the MIT license
+ */
+import { vec3 } from "gl-matrix";
+
+/**
+ * Hotspot data
+ * @ko 핫스팟 데이터
+ * @since 4.0.0
+ */
+class Hotspot {
+  /**
+   * HTMLElement of the hotspot
+   * @ko 핫스팟의 HTMLElement
+   * @since 4.0.0
+   */
+  public readonly element: HTMLElement;
+  /**
+   * Position to render hotspot
+   * @ko 핫스팟을 렌더링할 위치
+   * @since 4.0.0
+   */
+  public readonly position: vec3;
+
+  public constructor(element: HTMLElement, position: vec3) {
+    this.element = element;
+    this.position = position;
+  }
+}
+
+export default Hotspot;

package/src/hotspot/HotspotRenderer.ts

@@ -0,0 +1,155 @@
+/*
+ * Copyright (c) 2023-present NAVER Corp.
+ * egjs projects are licensed under the MIT license
+ */
+import { vec2, vec3 } from "gl-matrix";
+import Hotspot from "./Hotspot";
+import Camera from "../core/Camera";
+import WebGLRenderer from "../core/WebGLRenderer";
+import View360Error from "../core/View360Error";
+import { getNullableElement } from "../utils";
+import ERROR from "../const/error";
+import { DEFAULT_CLASS } from "../const/external";
+import { DEG_TO_RAD } from "../const/internal";
+
+/**
+ * Options for {@link HotspotRenderer}
+ * @ko {@link HotspotRenderer}용 옵션들
+ * @since 4.0.0
+ */
+export interface HotspotOptions {
+  /**
+   * Apply scale for hotspots, makes their size sync with background panorama image.
+   * @ko 핫스팟에 스케일을 적용해서 배경 파노라마 이미지의 크기 변화와 동일하게 크기를 조절합니다.
+   * @since 4.0.0
+   */
+  zoom: boolean;
+}
+
+/**
+ * Hotspot renderer
+ * @ko Hotspot 렌더러
+ * @since 4.0.0
+ */
+class HotspotRenderer {
+  // Options
+  private _zoom: HotspotOptions["zoom"];
+
+  // Internal properties
+  private _containerEl: HTMLElement | null;
+  private _renderer: WebGLRenderer;
+  private _hotspots: Hotspot[];
+
+  /**
+   * Create new instance
+   * @ko 새 인스턴스를 생성합니다.
+   * @param rootEl - Container element for hotspots {@ko 핫스팟들의 컨테이너 엘리먼트}
+   * @param renderer - instance of WebGLRenderer {@ko WebGLRenderer의 인스턴스}
+   * @param options - Hotspot options {@ko Hotspot 옵션들 }
+   */
+  public constructor(rootEl: HTMLElement, renderer: WebGLRenderer, {
+    zoom = false
+  }: Partial<HotspotOptions>) {
+    this._containerEl = getNullableElement(`.${DEFAULT_CLASS.HOTSPOT_CONTAINER}`, rootEl);
+    this._renderer = renderer;
+    this._hotspots = [];
+
+    this._zoom = zoom;
+  }
+
+  /**
+   * Refresh hotspots by collecting hotspot elements from current hotspot root element
+   * @ko 현재 핫스팟 루트 엘리먼트 내에서 핫스팟 엘리먼트들을 수집하여 갱신합니다.
+   * @throws {ERROR_CODES.INSUFFICIENT_ARGS} if data-position doesn't include all x, y, z values {@ko data-position이 x, y, z좌표를 전부 포함하고 있지 않을 때}
+   */
+  public refresh() {
+    const container = this._containerEl;
+    if (!container) return;
+
+    const hotspotEls = [].slice.apply(container.querySelectorAll(`.${DEFAULT_CLASS.HOTSPOT}`)) as HTMLElement[];
+    this._hotspots = hotspotEls.map(el => this._parseHotspot(el));
+  }
+
+  /**
+   * Render hotspots
+   * @ko 핫스팟들을 렌더링합니다.
+   * @param camera - Instance of Camera {@ko Camera의 인스턴스}
+   */
+  public render(camera: Camera) {
+    const hotspots = this._hotspots;
+    const halfWidth = this._renderer.width * 0.5;
+    const halfHeight = this._renderer.height * 0.5;
+    const zoom = camera.zoom;
+    const centerTransform = "translate(-50%, -50%)";
+    const zoomTransform = this._zoom ? `scale(${zoom})` : "";
+
+    hotspots.forEach(hotspot => {
+      const position = hotspot.position;
+      const relPos = vec3.create();
+
+      vec3.copy(relPos, position);
+      vec3.transformMat4(relPos, relPos, camera.viewMatrix);
+      vec3.transformMat4(relPos, relPos, camera.projectionMatrix);
+
+      if (relPos[2] > 1 || relPos[2] < 0) {
+        hotspot.element.classList.remove(DEFAULT_CLASS.HOTSPOT_VISIBLE);
+        return;
+      }
+
+      const screenPos = vec2.fromValues(
+        relPos[0] * halfWidth + halfWidth,
+        -relPos[1] * halfHeight + halfHeight
+      );
+
+      hotspot.element.classList.add(DEFAULT_CLASS.HOTSPOT_VISIBLE);
+      hotspot.element.style.transform = [
+        centerTransform,
+        `translate(${screenPos[0]}px, ${screenPos[1]}px)`,
+        zoomTransform
+      ].join(" ");
+    });
+  }
+
+  private _parseHotspot(element: HTMLElement): Hotspot {
+    const yawStr = element.dataset.yaw;
+    const pitchStr = element.dataset.pitch;
+    const positionStr = element.dataset.position;
+
+    if (yawStr || pitchStr) {
+      const yaw = yawStr ? parseFloat(yawStr) : 0;
+      const pitch = pitchStr ? parseFloat(pitchStr) : 0;
+
+      const position = this._yawPitchToVec3(yaw, pitch);
+
+      return new Hotspot(element, position);
+    } else if (positionStr) {
+      const pos: number[] = positionStr.split(" ").map(val => parseFloat(val));
+      if (pos.length < 3) {
+        throw new View360Error(ERROR.MESSAGES.INSUFFICIENT_ARGS(positionStr, "hotspot attribute \"data-position\""), ERROR.CODES.INSUFFICIENT_ARGS);
+      }
+
+      return new Hotspot(element, vec3.fromValues(pos[0], pos[1], pos[2]));
+    } else {
+      // Place hotspot at yaw: 0, pitch: 0
+      const defaultPos = vec3.fromValues(0, 0, -1);
+
+      return new Hotspot(element, defaultPos);
+    }
+  }
+
+  private _yawPitchToVec3(yaw: number, pitch: number) {
+    const yawRad = yaw * DEG_TO_RAD;
+    const pitchRad = pitch * DEG_TO_RAD;
+    const position = vec3.create();
+
+    position[1] = Math.sin(pitchRad);
+    position[2] = Math.cos(pitchRad);
+
+    position[0] = position[2] * Math.sin(-yawRad);
+    position[2] = -position[2] * Math.cos(-yawRad);
+
+    return position;
+  }
+}
+
+export default HotspotRenderer;

package/src/hotspot/index.ts

@@ -0,0 +1,11 @@
+import Hotspot from "./Hotspot";
+import HotspotRenderer, { HotspotOptions } from "./HotspotRenderer";
+
+export {
+  Hotspot,
+  HotspotRenderer
+};
+
+export type {
+  HotspotOptions
+};

package/src/index.cjs.ts

@@ -0,0 +1,13 @@
+/*
+ * Copyright (c) 2023-present NAVER Corp.
+ * egjs projects are licensed under the MIT license
+ */
+import View360, * as modules from "./index";
+import { merge } from "./utils";
+
+merge(View360, modules);
+
+declare const module: any;
+module.exports = View360;
+export default View360;
+export * from "./index";

package/src/index.ts

@@ -0,0 +1,21 @@
+/*
+ * Copyright (c) 2023-present NAVER Corp.
+ * egjs projects are licensed under the MIT license
+ */
+import View360, { View360Options, View360Events } from "./View360";
+
+export * from "./core";
+export * from "./control";
+export * from "./plugin";
+export * from "./projection";
+export * from "./hotspot";
+export * from "./const/external";
+export * from "./type/external";
+export * from "./cfc";
+
+export type {
+  View360Options,
+  View360Events
+};
+
+export default View360;

package/src/index.umd.ts

@@ -0,0 +1,10 @@
+/*
+ * Copyright (c) 2023-present NAVER Corp.
+ * egjs projects are licensed under the MIT license
+ */
+import View360, * as modules from "./index";
+import { merge } from "./utils";
+
+merge(View360, modules);
+
+export default View360;

package/src/plugin/ControlBar/AutoHide.ts

@@ -0,0 +1,246 @@
+/*
+ * Copyright (c) 2023-present NAVER Corp.
+ * egjs projects are licensed under the MIT license
+ */
+import ControlBar from "./ControlBar";
+import View360 from "../../View360";
+import * as BROWSER from "../../const/browser";
+import { FULLSCREEN_CHANGE } from "../../const/browser";
+import TextureVideo from "../../texture/TextureVideo";
+import { isFullscreen } from "../../utils";
+
+/**
+ * Options for ControlBar's {@link ControlBarOptions#autoHide}
+ * @ko ControlBar의 {@link ControlBarOptions#autoHide}용 옵션
+ * @category Plugin
+ * @since 4.0.0
+ */
+export interface AutoHideOptions {
+  /**
+   * Initial delay before the control bar hides (ms)
+   * @ko 컨트롤바가 처음으로 표시되고 사라지기까지 걸리는 시간 (ms)
+   * @default 3000
+   * @since 4.0.0
+   */
+  initialDelay: number;
+  /**
+   * Delay time before hiding the control bar after mouse leave (ms)
+   * @ko 마우스가 컨트롤바 영역을 떠난 뒤 컨트롤바가 사라지기까지 걸리는 시간 (ms)
+   * @default 0
+   * @since 4.0.0
+   */
+  delay: number;
+  /**
+   * Delay time before hiding the control bar becomes active, like touch on mobile device or mouse move in fullscreen mode (ms)
+   * @ko 모바일이나 풀스크린 환경 등에서 사용자 입력이 없을 때 컨트롤바가 사라지기까지 걸리는 시간 (ms)
+   * @default 3000
+   * @since 4.0.0
+   */
+  idleDelay: number;
+}
+
+class AutoHide {
+  private _initialDelay: AutoHideOptions["initialDelay"];
+  private _delay: AutoHideOptions["delay"];
+  private _idleDelay: AutoHideOptions["idleDelay"];
+
+  private _controlBar: ControlBar;
+  private _timer: number;
+  private _isGrabbing: boolean;
+  private _isCursorInside: boolean;
+  private _isFullscreen: boolean;
+  private _targetEl: HTMLElement | null;
+  private _video: TextureVideo | null;
+
+  public get enabled() { return !!this._targetEl; }
+  public get hidden() { return this._controlBar.containerEl.classList.contains(this._hiddenClass); }
+
+  private get _hiddenClass() { return this._controlBar.className.HIDDEN; }
+  private get _fixedClass() { return this._controlBar.className.FIXED; }
+
+  public constructor(controlBar: ControlBar, {
+    initialDelay = 3000,
+    delay = 0,
+    idleDelay: activationDelay = 3000
+  }: Partial<AutoHideOptions>) {
+    this._controlBar = controlBar;
+    this._initialDelay = initialDelay;
+    this._delay = delay;
+    this._idleDelay = activationDelay;
+    this._timer = -1;
+    this._isCursorInside = false;
+    this._isGrabbing = false;
+    this._isFullscreen = false;
+    this._video = null;
+    this._targetEl = null;
+  }
+
+  public enable(viewer: View360) {
+    if (this._targetEl) {
+      this.disable(viewer);
+    }
+
+    const initialDelay = this._initialDelay;
+    const root = viewer.rootEl;
+
+    this._targetEl = viewer.rootEl;
+    this._timer = window.setTimeout(() => {
+      this.hide();
+    }, initialDelay);
+
+    root.addEventListener(BROWSER.EVENTS.MOUSE_DOWN, this._onHold);
+    root.addEventListener(BROWSER.EVENTS.MOUSE_ENTER, this._onMouseEnter);
+    root.addEventListener(BROWSER.EVENTS.MOUSE_MOVE, this._onMouseMove);
+    root.addEventListener(BROWSER.EVENTS.MOUSE_LEAVE, this._onMouseLeave);
+    this._addFullscreenHandlers();
+
+    const video = viewer.mesh?.getTexture();
+    if (!video || !video.isVideo()) {
+      return;
+    }
+
+    if (video.isPaused()) {
+      this._controlBar.containerEl.classList.add(this._fixedClass);
+    }
+
+    video.source.addEventListener(BROWSER.EVENTS.VIDEO_PLAY, this._onVideoPlay);
+    video.source.addEventListener(BROWSER.EVENTS.VIDEO_PAUSE, this._onVideoPause);
+
+    this._video = video;
+  }
+
+  public disable(viewer: View360) {
+    if (!this._targetEl) return;
+
+    const controlBar = this._controlBar;
+    const root = viewer.rootEl;
+    const video = this._video;
+
+    root.removeEventListener(BROWSER.EVENTS.MOUSE_DOWN, this._onHold);
+    window.removeEventListener(BROWSER.EVENTS.MOUSE_UP, this._onRelease);
+    root.removeEventListener(BROWSER.EVENTS.MOUSE_ENTER, this._onMouseEnter);
+    root.removeEventListener(BROWSER.EVENTS.MOUSE_MOVE, this._onMouseMove);
+    root.removeEventListener(BROWSER.EVENTS.MOUSE_LEAVE, this._onMouseLeave);
+    this._removeFullscreenHandlers();
+
+    window.clearTimeout(this._timer);
+    controlBar.containerEl.classList.remove(this._fixedClass);
+
+    if (video) {
+      video.source.removeEventListener(BROWSER.EVENTS.VIDEO_PLAY, this._onVideoPlay);
+      video.source.removeEventListener(BROWSER.EVENTS.VIDEO_PAUSE, this._onVideoPause);
+    }
+
+    this._isCursorInside = false;
+    this._isGrabbing = false;
+    this._video = null;
+    this._targetEl = null;
+  }
+
+  public show() {
+    this._clearHideTimer();
+    this._controlBar.containerEl.classList.remove(this._hiddenClass);
+  }
+
+  public showTemporaliy() {
+    this.show();
+    this._hideAfterDelay(this._idleDelay);
+  }
+
+  public hide() {
+    this._clearHideTimer();
+    this._controlBar.containerEl.classList.add(this._hiddenClass);
+  }
+
+  private _clearHideTimer() {
+    if (this._timer) {
+      window.clearTimeout(this._timer);
+      this._timer = -1;
+    }
+  }
+
+  private _hideAfterDelay(delay = this._delay) {
+    if (this._isGrabbing || (!this._isFullscreen && this._isCursorInside)) return;
+
+    this._clearHideTimer();
+    if (delay <= 0) {
+      this.hide();
+    } else {
+      this._timer = window.setTimeout(() => {
+        this.hide();
+      }, delay);
+    }
+  }
+
+  private _onMouseEnter = () => {
+    this._isCursorInside = true;
+    this.show();
+  };
+
+  private _onMouseLeave = () => {
+    this._isCursorInside = false;
+    this._hideAfterDelay();
+  };
+
+  private _onMouseMove = () => {
+    if (!this._isFullscreen) return;
+
+    this.showTemporaliy();
+  }
+
+  private _onHold = (evt: PointerEvent) => {
+    this._isGrabbing = true;
+
+    if (evt.pointerType === "mouse") {
+      this._isCursorInside = true;
+    }
+
+    window.addEventListener(BROWSER.EVENTS.MOUSE_UP, this._onRelease);
+
+    this.show();
+  };
+
+  private _onRelease = () => {
+    this._isGrabbing = false;
+
+    window.removeEventListener(BROWSER.EVENTS.MOUSE_UP, this._onRelease);
+
+    this._hideAfterDelay();
+  };
+
+  private _onVideoPlay = () => {
+    const root = this._targetEl;
+    if (!root) return;
+
+    this._controlBar.containerEl.classList.remove(this._fixedClass);
+  };
+
+  private _onVideoPause = () => {
+    const root = this._targetEl;
+    if (!root) return;
+
+    this._controlBar.containerEl.classList.add(this._fixedClass);
+  };
+
+  private _addFullscreenHandlers() {
+    FULLSCREEN_CHANGE.forEach(evtName => {
+      document.addEventListener(evtName, this._onFullscreenChange);
+    });
+  }
+
+  private _removeFullscreenHandlers() {
+    FULLSCREEN_CHANGE.forEach(evtName => {
+      document.removeEventListener(evtName, this._onFullscreenChange);
+    });
+  }
+
+  private _onFullscreenChange = () => {
+    this._isFullscreen = isFullscreen();
+
+    if (this._isFullscreen) {
+      this._hideAfterDelay();
+    }
+  };
+}
+
+export default AutoHide;