@qispace/vue3-player 0.0.5

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

@@ -0,0 +1,92 @@
+/* eslint-disable */
+
+import { CameraConfig } from './CameraConfig'
+
+class ApartmentConfig {
+  constructor(json, scene) {
+    this._cameras = {}
+    this._apartmentID = json.id
+    this._version = json.version
+    for (let i = 0; i < json.cameras.length; i++) {
+      const camera = json.cameras[i]
+      this._cameras[camera.id.toUpperCase()] = new CameraConfig(
+        camera.id,
+        camera,
+        scene
+      )
+    }
+  }
+
+  get apartmentID() {
+    return this._apartmentID
+  }
+
+  get cameras() {
+    return this._cameras
+  }
+
+  findClosestVisibleCamera(point, ignoreCamera) {
+    let closestCamera = null
+    let minDistance = 10000
+    for (const key in this._cameras) {
+      const c = this._cameras[key]
+      if (c.isVisible && c != ignoreCamera) {
+        const dx = c.position.x - point.x
+        const dz = c.position.z - point.z
+        const distance = Math.sqrt(dx * dx + dz * dz)
+        if (distance < minDistance) {
+          minDistance = distance
+          closestCamera = c
+        }
+      }
+    }
+    return closestCamera
+  }
+
+  findClosestVisibleCameraInDirection(dx, dz, v, currentPanorama) {
+    for (let dist = 0; dist < 10; dist += 0.1) {
+      v.x = currentPanorama.cameraConfig.position.x + dx * dist
+      v.y = currentPanorama.cameraConfig.position.y
+      v.z = currentPanorama.cameraConfig.position.z + dz * dist
+      const c = this.findClosestVisibleCamera(v, null)
+      if (c != currentPanorama.cameraConfig) return c
+    }
+    return null
+  }
+
+  updateVisible(panorama) {
+    for (const key in this._cameras) {
+      // Check if something is in front of the given camera (at camera level), in that case it is invisible
+      const c = this._cameras[key]
+      var dx = c.position.x - panorama.cameraConfig.position.x
+      var dy = c.position.y - panorama.cameraConfig.position.y
+      var dz = c.position.z - panorama.cameraConfig.position.z
+      var distance = Math.sqrt(dx * dx + dy * dy + dz * dz)
+      c.isVisible = panorama.getDepth(dx, dy, dz) > distance
+      c.mesh.visible = c.isVisible
+
+      // Check if the visible camera positions are obstructed at slightly above ground level
+      if (c.isVisible) {
+        var dx = c.position.x - panorama.cameraConfig.position.x
+        const floorOffset = c._floor_vertical_position + 0.2
+        var dy = floorOffset - panorama.cameraConfig.position.y
+        var dz = c.position.z - panorama.cameraConfig.position.z
+        var distance = Math.sqrt(dx * dx + dy * dy + dz * dz)
+        c.isObstructed = panorama.getDepth(dx, dy, dz) <= distance
+      }
+    }
+  }
+
+  animateMarkers(panorama, elapsedTime) {
+    if (!panorama) return false
+    for (const key in this._cameras) {
+      const c = this._cameras[key]
+      const dist = c.position.distanceTo(panorama.cameraConfig.position)
+      const baseOpacityModifier = c.isObstructed ? 0.1 : 0.2
+      c.mesh.material.opacity =
+        (Math.sin(-elapsedTime * 3 + dist * 0.5) + 1) *
+        baseOpacityModifier
+    }
+  }
+}
+export { ApartmentConfig }

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

@@ -0,0 +1,97 @@
+/* eslint-disable */
+import * as THREE from 'three'
+import markerTexture from '../textures/marker.png'
+import { stringToVector3ConvertPositionFromUnity, stringToVector3ConvertRotationFromUnity } from '../CoordConversions'
+
+function stringToVector3(str) {
+  const split = str.split(',', 3)
+  const v = new THREE.Vector3(
+    parseFloat(split[0]),
+    parseFloat(split[1]),
+    parseFloat(split[2])
+  )
+  return v
+}
+
+function stringToVector3ConvertPositionFromBlender(str) {
+  const split = str.split(',', 3)
+  const v = new THREE.Vector3(
+    -parseFloat(split[0]),
+    parseFloat(split[2]),
+    parseFloat(split[1])
+  )
+  return v
+}
+
+class CameraConfig {
+  constructor(
+    cameraID,
+    camera,
+    scene
+  ) {
+    this._cameraID = cameraID //.toUpperCase()
+    this._floor_vertical_position = parseFloat(camera.floor_vertical_position)
+    if (camera.uposition && camera.urotation) {
+      this._position = stringToVector3ConvertPositionFromUnity(
+        camera.uposition
+      )
+      this._rotation = stringToVector3ConvertRotationFromUnity(
+        camera.urotation
+      )
+    } else {
+      this._position = stringToVector3ConvertPositionFromBlender(
+        camera.position
+      )
+      this._rotation = stringToVector3(camera.rotation) // "90.00,180.00,41.59"
+    }
+
+    this._isVisible = true
+
+    const geometry = new THREE.PlaneGeometry(0.35, 0.35, 1, 1)
+    const material = new THREE.MeshBasicMaterial({
+      map: new THREE.TextureLoader().load(markerTexture),
+      transparent: true,
+      opacity: 0.0,
+      color: 0xffffff,
+    })
+
+    this._mesh = new THREE.Mesh(geometry, material)
+    this._mesh.rotation.x = -Math.PI / 2
+    scene.add(this._mesh)
+
+    this._mesh.position.set(
+      this._position.x,
+      this._floor_vertical_position,
+      this._position.z
+    )
+  }
+
+  get cameraID() {
+    return this._cameraID
+  }
+
+  get floor_vertical_position() {
+    return this._floor_vertical_position
+  }
+
+  get position() {
+    return this._position
+  }
+
+  get mesh() {
+    return this._mesh
+  }
+
+  get rotation() {
+    return this._rotation
+  }
+
+  get isVisible() {
+    return this._isVisible
+  }
+
+  set isVisible(v) {
+    this._isVisible = v
+  }
+}
+export { CameraConfig }

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

@@ -0,0 +1,393 @@
+/* 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

@@ -0,0 +1,78 @@
+/* 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 }