@qispace/vue3-player 0.0.6 → 0.0.7

package/src/lib/virtualTour__/config/Interaction.js

@@ -1,393 +0,0 @@
-/* eslint-disable */
-import * as THREE from 'three'
-
-const DOM_KEY_LOCATION_STANDARD = 0
-const DOM_KEY_LOCATION_LEFT = 1
-const DOM_KEY_LOCATION_RIGHT = 2
-const DOM_KEY_LOCATION_NUMPAD = 3
-
-const NUMPAD_KEYS = [
-  'ArrowDown',
-  'ArrowUp',
-  'ArrowLeft',
-  'ArrowRight',
-  'Home',
-  'PageUp',
-]
-
-class Interaction {
-  constructor(eventTarget, player) {
-    this._player = player
-    this.scaling = false
-    this.prevDist = NaN
-
-    if (!eventTarget || !player) return false
-
-    if (!player.consts.isMobile) {
-      eventTarget.addEventListener(
-        'pointerleave',
-        () => {
-          player.isUserInteracting = false
-        },
-        { passive: false }
-      )
-    }
-
-    // Mouse events
-    eventTarget.addEventListener('mousedown', (e) => this.onMouseDown(e))
-    eventTarget.addEventListener('wheel', (e) => this.onDocumentMouseWheel(e))
-    eventTarget.addEventListener(
-      'mousemove',
-      (e) => {
-        this.onMouseMove(e)
-      },
-      { passive: false }
-    )
-    eventTarget.addEventListener(
-      'mouseup',
-      (e) => {
-        this.onMouseUp(e)
-      },
-      { passive: false }
-    )
-
-    // Touch events
-    eventTarget.addEventListener('touchstart', (e) => this.onTouchStart(e), {
-      passive: false,
-    })
-    eventTarget.addEventListener('touchmove', (e) => this.onTouchMove(e), {
-      passive: false,
-    })
-
-    // Use same handler for pointer{up,cancel,out,leave} events since
-    // the semantics for these events - in this app - are the same.
-    eventTarget.addEventListener('touchend', (e) => this.onTouchEnd(e), {
-      passive: false,
-    })
-    eventTarget.addEventListener('touchcancel', (e) => this.onTouchEnd(e), {
-      passive: false,
-    })
-
-    // Key events
-    window.addEventListener(
-      'keydown',
-      (e) => {
-        this.onKeyDown(e)
-      },
-      { passive: false }
-    )
-  }
-
-  onTouchStart(e) {
-    if (e.touches.length === 2) {
-      this.scaling = true
-    } else {
-      this.onMouseDown(e)
-    }
-  }
-
-  onTouchMove(e) {
-    if (this.scaling) {
-      const dist = Math.hypot(
-        e.touches[0].pageX - e.touches[1].pageX,
-        e.touches[0].pageY - e.touches[1].pageY
-      )
-      if (!Number.isNaN(this.prevDist)) {
-        const currDist = this.prevDist - dist
-        const camera = this._player.camera
-        const fov = camera.fov + currDist * 0.2
-        camera.fov = THREE.MathUtils.clamp(fov, 35, 90)
-        camera.updateProjectionMatrix()
-      }
-      this.prevDist = dist
-    } else {
-      if (e.scale !== 1) {
-        e.preventDefault()
-      }
-      this.onMouseMove(e)
-    }
-  }
-
-  onTouchEnd(e) {
-    if (this.scaling) {
-      this.scaling = false
-      this.prevDist = NaN
-    } else {
-      this.onMouseUp(e)
-    }
-  }
-
-  removeEvent(ev) {
-    // Remove this event from the target's cache
-    const index = this.evCache.findIndex(
-      (cachedEv) => cachedEv.pointerId === ev.pointerId
-    )
-    this.evCache.splice(index, 1)
-  }
-
-  onDocumentMouseWheel(event) {
-    const camera = this._player.camera
-    const fov = camera.fov + event.deltaY * 0.05
-    camera.fov = THREE.MathUtils.clamp(fov, 35, 90)
-    camera.updateProjectionMatrix()
-  }
-
-  onMouseDown(event) {
-    if (this._player.isTransition) return false
-    this._player.transitionRotateCamera = true
-    this._player.isMouseDown = true
-    this._player.isUserInteracting = true
-    this._player.isMouseMoved = false
-
-    this._player.nMouseMove = 0
-
-    const clientX = this._player.getX(event)
-    const clientY = this._player.getY(event)
-
-    this._player.onMouseDownMouseX = clientX
-    this._player.onMouseDownMouseY = clientY
-    this._player.onMouseDownLon = this._player.lon
-    this._player.onMouseDownLat = this._player.lat
-    this._player.oldLon = this._player.lon
-    this._player.oldLat = this._player.lat
-    this._player.speedLon = 0
-    this._player.speedLat = 0
-  }
-
-  onMouseMove(event) {
-    if (!this._player.currentPanorama) return false
-    if (this._player.isUserInteracting === true) {
-      this._player.nMouseMove = this._player.nMouseMove + 1
-      this._player.isMouseMoved = this._player.nMouseMove > 4
-      const clientX = this._player.getX(event)
-      const clientY = this._player.getY(event)
-
-      this._player.lon =
-        (this._player.onMouseDownMouseX - clientX) *
-          this._player.mouseSensitivity +
-        this._player.onMouseDownLon
-      this._player.lat =
-        (clientY - this._player.onMouseDownMouseY) *
-          this._player.mouseSensitivity +
-        this._player.onMouseDownLat
-    }
-    const gamecontainer = document.getElementById('gameinstance')
-
-    if (!gamecontainer) return false
-
-    const rect = gamecontainer.getBoundingClientRect()
-
-    // Map to -1 to 1
-    this._player.mouse.x =
-      ((event.clientX - rect.left) / this._player.width) * 2 - 1
-    this._player.mouse.y =
-      -((event.clientY - rect.top) / this._player.height) * 2 + 1
-
-    this._player.raycaster.setFromCamera(
-      this._player.mouse,
-      this._player.camera
-    )
-    const t =
-      (this._player.currentPanorama.cameraConfig.floor_vertical_position -
-        this._player.raycaster.ray.origin.y) /
-      this._player.raycaster.ray.direction.y
-    this._player.mouseFloorHitpoint.set(
-      this._player.raycaster.ray.origin.x +
-        this._player.raycaster.ray.direction.x * t,
-      this._player.raycaster.ray.origin.y +
-        this._player.raycaster.ray.direction.y * t,
-      this._player.raycaster.ray.origin.z +
-        this._player.raycaster.ray.direction.z * t
-    )
-
-    // Handle arrow
-    if (this._player.arrowMesh) {
-      this._player.arrowMesh.position.set(
-        this._player.mouseFloorHitpoint.x,
-        this._player.mouseFloorHitpoint.y + 0.04,
-        this._player.mouseFloorHitpoint.z
-      )
-
-      const deltaZ =
-        this._player.arrowMesh.position.z -
-        this._player.currentPanorama.cameraConfig.position.z
-      const deltaX =
-        this._player.arrowMesh.position.x -
-        this._player.currentPanorama.cameraConfig.position.x
-      this._player.arrowMesh.rotation.z =
-        -Math.atan2(deltaZ, deltaX) - Math.PI / 2
-
-      this._player.arrowMesh.visible =
-        !this._player.isUserInteracting &&
-        !this._player.isLoadingPanorama &&
-        !this._player.isTransition
-    }
-  }
-
-  onMouseUp() {
-    this._player.isMouseDown = false
-    if (!this._player.isMouseMoved && !this._player.isTransition)
-      this.onMouseClick()
-    this._player.isUserInteracting = false
-  }
-
-  onMouseClick() {
-    const camera = this._player.apartmentConfig.findClosestVisibleCamera(
-      this._player.mouseFloorHitpoint,
-      null
-    )
-    if (camera && camera != this._player.currentPanorama.cameraConfig) {
-      this._player.loadPanorama(
-        camera.cameraID,
-        this._player.onPanoramaLoaded,
-        false
-      )
-    }
-  }
-
-  debugDepth(pointsTotal = 1000) {
-    for (let n = 0; n < pointsTotal; n++) {
-      const ray = new THREE.Vector3(
-        Math.random() * 2 - 1,
-        Math.random() * 2 - 1,
-        Math.random() * 2 - 1
-      )
-
-      ray.normalize()
-
-      const d = this._player.currentPanorama.getDepth(ray.x, ray.y, ray.z)
-
-      let gray = d * 0.1
-
-      if (gray > 1) gray = 1
-
-      if (gray < 0) gray = 0
-
-      gray = 1 - gray
-
-      const col = new THREE.Color(gray, gray, gray)
-
-      const geometry = new THREE.BoxGeometry(0.005, 0.005, 0.005)
-      const material = new THREE.MeshBasicMaterial({
-        color: col,
-        opacity: 0.2,
-        transparent: true,
-      })
-
-      const cube = new THREE.Mesh(geometry, material)
-
-      const x = this._player.currentPanorama.cameraConfig.position.x + ray.x * d
-      const y = this._player.currentPanorama.cameraConfig.position.y + ray.y * d
-      const z = this._player.currentPanorama.cameraConfig.position.z + ray.z * d
-
-      cube.position.set(x, y, z)
-      this._player.scene.add(cube)
-    }
-  }
-
-  isNumpadMoveKey(event) {
-    if (event.location === DOM_KEY_LOCATION_NUMPAD) {
-      if (NUMPAD_KEYS.includes(event.key || event.code)) {
-        return true
-      }
-    }
-    return false
-  }
-
-  debugCameraMovement(key, camera, amount = 0.1) {
-    switch (key) {
-      case 'ArrowUp':
-        camera.translateZ(-amount)
-        break
-      case 'ArrowDown':
-        camera.translateZ(amount)
-        break
-      case 'ArrowLeft':
-        camera.translateX(-amount)
-        break
-      case 'ArrowRight':
-        camera.translateX(amount)
-        break
-      case 'PageUp':
-        camera.translateY(amount)
-        break
-      case 'Home':
-        camera.translateY(-amount)
-        break
-    }
-  }
-
-  onKeyDown(event) {
-    if (this._player.isLoadingPanorama || this._player.isTransition) return
-    let dx = 0
-    let dz = 0
-
-    const key = event.key || event.code
-
-    if (window._debug && this.isNumpadMoveKey(event)) {
-      this.debugCameraMovement(key, this._player.camera)
-      return
-    }
-
-    switch (key) {
-      case 'a':
-      case 'A':
-      case 'KeyA':
-      case 'ArrowLeft':
-        dx = -1
-        break
-      case 'd':
-      case 'D':
-      case 'KeyD':
-      case 'ArrowRight':
-        dx = 1
-        break
-      case 'w':
-      case 'W':
-      case 'KeyW':
-      case 'ArrowUp':
-        dz = 1
-        break
-      case 's':
-      case 'S':
-      case 'KeyS':
-      case 'ArrowDown':
-        dz = -1
-        break
-      case 'q':
-        window._debug && this.debugDepth()
-        break
-    }
-
-    const v = new THREE.Vector3()
-    if (dz != 0 || dx != 0) {
-      v.y = 0
-      v.normalize()
-
-      this._player.camera.getWorldDirection(v)
-
-      if (dx != 0) {
-        dz = dx
-        const swap = v.x
-        v.x = -v.z
-        v.z = swap
-      }
-      const c =
-        this._player.apartmentConfig.findClosestVisibleCameraInDirection(
-          v.x * dz,
-          v.z * dz,
-          v,
-          this._player.currentPanorama
-        )
-
-      if (c) {
-        this._player.loadPanorama(
-          c.cameraID,
-          this._player.onPanoramaLoaded,
-          false
-        )
-      }
-    }
-  }
-}
-export { Interaction }

package/src/lib/virtualTour__/config/Panorama.js

@@ -1,78 +0,0 @@
-/* eslint-disable */
-// We load three.min.js in index.html instead because importing it here gives error in IE11,
-// using global commen instead
-
-import * as THREE from 'three'
-class Panorama {
-  constructor(texture, rawDepth, cameraConfig, version) {
-    texture.wrapS = THREE.RepeatWrapping
-    texture.wrapT = THREE.RepeatWrapping
-    this._texture = texture
-    this._version = version
-
-    console.log('QiSpace data version: ' + this._version)
-    if (this._version > 1.0) {
-      texture.repeat.set(-1, 1)
-      texture.offset.set(0.25, 0)
-    }
-
-    this._cameraConfig = cameraConfig
-    this._depth = new Float32Array(512 * 256)
-    let o = 4 // Skip 4 bytes header
-    for (let i = 0; i < this._depth.byteLength; i++)
-      this._depth[i] = (rawDepth[o++] | (rawDepth[o++] << 8)) / 512 // 512 samples per meter, max 128 meter
-  }
-
-  get texture() {
-    return this._texture
-  }
-
-  get depth() {
-    return this._depth
-  }
-
-  get cameraConfig() {
-    return this._cameraConfig
-  }
-
-  // Assumes the ray is cast from the middle of the panorama sphere
-  getDepth(rayX, rayY, rayZ) {
-    // Normalize
-    const length = Math.sqrt(rayX * rayX + rayY * rayY + rayZ * rayZ)
-    if (length > 0) {
-      rayX /= length
-      rayY /= length
-      rayZ /= length
-    }
-
-    // Invert
-    rayX *= -1
-    rayY *= -1
-    rayZ *= -1
-
-    const u = (Math.atan2(rayX, rayZ) / (2 * Math.PI) + 0.75) % 1
-    const v = 0.5 - Math.asin(rayY) / Math.PI
-
-    return this.getDepthTexture(u, v)
-  }
-
-  getDepthTexture(u, v) {
-    if (this._version > 1.0) {
-      //2.0+ format
-      u = -u + 0.25
-      const i = parseInt(u * 511) & 0x1ff
-      const j = parseInt(v * 255) & 0xff
-      return this._depth[i + j * 512]
-    } else {
-      //Legacy format
-      const i = parseInt(u * 511) & 0x1ff
-      const j = parseInt(v * 255) & 0xff
-      return this._depth[i + j * 512]
-    }
-  }
-
-  dispose() {
-    this._texture.dispose()
-  }
-}
-export { Panorama }