@qispace/vue3-player 0.0.5

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

@@ -0,0 +1,812 @@
+/* eslint-disable */
+
+/**
+ * Putting global variables (shared between qi.js, transition.js, etc)
+ */
+import * as THREE from 'three'
+import { isBrowser } from 'browser-or-node'
+import { Panorama } from './Panorama'
+import { ApartmentConfig } from './ApartmentConfig'
+import { inflate } from './rawinflate.export'
+import { vertexShader, fragmentShader } from './shaders'
+import arrowTexture from '../textures/arrow.png'
+import { clampAngle } from '../CoordConversions'
+
+function deg2rad(degAngle) {
+  return (degAngle * Math.PI) / 180.0
+}
+
+export class RenderLoop {
+  constructor(renderFn) {
+    this._clock = new THREE.Clock(false)
+    this._listeners = [renderFn]
+  }
+
+  addListener(l) {
+    this._listeners.push(l)
+  }
+
+  removeListener(l) {
+    this._listeners = this._listeners.filter((each) => each !== l)
+  }
+
+  start() {
+    this._clock.start()
+    this._animate()
+  }
+
+  stop() {
+    this._clock.stop()
+    this._listeners = []
+  }
+
+  _animate() {
+    if (this._clock.running) {
+      window.requestAnimationFrame(() => this._animate())
+      this._notifyListeners(this._clock.elapsedTime, this._clock.getDelta())
+    }
+  }
+
+  _notifyListeners(elapsedTime, timeDelta) {
+    this._listeners.forEach((l) => l(elapsedTime, timeDelta))
+  }
+}
+
+class Consts {
+  constructor() {
+    this._isMobile =
+      /Android|webOS|iPhone|iPad|BlackBerry|Windows Phone|Opera Mini|IEMobile|Mobile/i.test(
+        navigator.userAgent
+      )
+    this._build = '123' // TODO fix
+  }
+
+  get isMobile() {
+    return this._isMobile
+  }
+
+  get build() {
+    return this._build
+  }
+}
+
+// TODO 1: Move all constants to Consts class
+// TODO 2: Move all url stuff to URL class
+// TODO 3: Move all
+export default class Player {
+  constructor(settings) {
+    // Constants class
+    this._consts = new Consts()
+
+    // Settings
+    this._target = settings.target
+    this._fileResolver = settings.fileResolver
+    this._onPlayerCameraChanged = settings.onPlayerCameraChanged
+    this._addBuildVersionToUrls =
+      settings.addBuildVersionToUrls !== undefined
+        ? settings.addBuildVersionToUrls
+        : true
+    this._panoramaOrientation = settings.panoramaOrientation
+
+    // Dimensions
+    this._height = this._target.clientHeight
+    this._width = this._target.clientWidth
+
+    // Player components
+    this._panoramaSphere = null
+    this._adornments = new THREE.Group()
+    this._scene = new THREE.Scene()
+    this._scene.add(this._adornments)
+    this._renderer = new THREE.WebGLRenderer({ preserveDrawingBuffer: true })
+    this._camera = new THREE.PerspectiveCamera(
+      70,
+      this._width / this._height,
+      0.01,
+      1100
+    )
+    this._camera.target = new THREE.Vector3(0, 0, 0)
+
+    this._arrowMesh = null
+
+    this._raycaster = new THREE.Raycaster()
+
+    // Player settings
+    // fov, width, height, near, far
+
+    // Apartment
+    this._apartmentConfig = null
+    // Other stuff
+    this._currentPanorama = null
+    this._isUserInteracting = false
+
+    // Panorama
+    this._isLoadingPanorama = false
+    this._panoramaCameraID = null
+
+    // Mouse interaction
+
+    this.mouseSensitivityFactor = settings.mouseSensitivityFactor
+    this._mouse = new THREE.Vector2()
+    this._mouseFloorHitpoint = new THREE.Vector3()
+    this._mouseSensitivity = this.mouseSensitivityFactor * (120.0 / Math.min(screen.width, screen.height))
+
+    // Positions
+    this._isMouseMoved = false
+    this._nMouseMove = 0
+    this._onMouseDownMouseX = 0
+    this._onMouseDownMouseY = 0
+    this._onMouseDownLon = 0
+    this._onMouseDownLat = 0
+      ; (this._lon = 0), (this._lat = 0)
+    this._isMouseDown = false
+      ; (this._speedLon = 0), (this._speedLat = 0)
+      ; (this._oldLon = 0), (this._oldLat = 0)
+
+    // Transitions
+    this._isTransition = false
+    this._transitionScene1 = null
+    this._transitionScene2 = null
+    this._panoramaSphere1 = null
+    this._panoramaSphere2 = null
+    this._compositeCamera = null
+    this._panoramaSphereTemplate = null
+    this._transitionRotateCamera = false
+    this._lat1, this._lon1
+    this._lat2, this._lon2
+    this._panorama1
+    this._panorama2
+    this._panoramaSphere1
+    this._panoramaSphere2
+    this._transition
+    this._bufferTexture1
+    this._bufferTexture2
+    this._compositeCamera
+    this._targetMesh
+    this._shaderMaterial
+    this._transitionScene1
+    this._transitionScene2
+    this._compositeScene
+
+    // Fixing this in callback functions
+    this.onPanoramaLoaded = this.onPanoramaLoaded.bind(this)
+  }
+
+  start(apartmentData, cameraId, startedCb) {
+    this._apartmentConfig = new ApartmentConfig(apartmentData, this._adornments)
+    const onLoaded = (panorama) => {
+      this.onFirstPanoramaLoaded(panorama)
+      if (startedCb) startedCb(this)
+    }
+    this.initializeTransitions()
+    this.loadPanorama(cameraId, onLoaded, false)
+  }
+
+  newPanorama(apartmentConfig, panoramaData) {
+    const panorama = new Panorama(
+      panoramaData.texture,
+      panoramaData.depth,
+      apartmentConfig.cameras[this._panoramaCameraID.toUpperCase()],
+      apartmentConfig._version
+    )
+    return panorama
+  }
+
+  takeCameraSnapshot() {
+    this._adornments.visible = false
+    try {
+      this.renderScene()
+      return this._renderer.domElement.toDataURL()
+    } finally {
+      this._adornments.visible = true
+    }
+  }
+
+  createDepthSphere(panorama, sphere) {
+    const positionAttributeTemplate =
+      this._panoramaSphereTemplate.geometry.attributes.position
+    const positionAttribute = sphere.geometry.attributes.position
+    for (let i = 0; i < positionAttribute.count; i++) {
+      // Read the position from the original sphere shape, to avoid any inaccuracies over time
+      let x = positionAttributeTemplate.getX(i)
+      let y = positionAttributeTemplate.getY(i)
+      let z = positionAttributeTemplate.getZ(i)
+      // Normalize
+      const length = Math.sqrt(x * x + y * y + z * z)
+      if (length > 0) {
+        x /= length
+        y /= length
+        z /= length
+      }
+      const d = panorama.getDepth(x, y, z)
+      positionAttribute.setXYZ(i, x * d, y * d, z * d)
+    }
+    sphere.geometry.attributes.position.needsUpdate = true
+  }
+
+  createPanoramaSphere(radius, resolution) {
+    const sphereGeometry = new THREE.SphereBufferGeometry(
+      radius,
+      resolution,
+      resolution
+    )
+
+    const material = new THREE.MeshBasicMaterial({
+      side: THREE.DoubleSide,
+    })
+
+    const panoramaSphere = new THREE.Mesh(sphereGeometry, material)
+
+    // Remap UV coordinates
+    const uvAttribute = panoramaSphere.geometry.attributes.uv
+
+    for (var i = 0; i < uvAttribute.count; i++) {
+      const u = uvAttribute.getX(i)
+      const v = uvAttribute.getY(i)
+      uvAttribute.setXY(i, u, v)
+    }
+    return panoramaSphere
+  }
+
+  init() {
+    // Sphere
+    this._panoramaSphere = this.createPanoramaSphere(1000, 120)
+    this._panoramaSphere.material.map = this._currentPanorama.texture
+
+    // Scene
+    this._scene.add(this._panoramaSphere)
+
+    // Renderer
+    if (isBrowser) {
+      this._renderer.setPixelRatio(window.devicePixelRatio)
+    }
+    this._renderer.setSize(this._width, this._height)
+
+    // Add to DOM
+    this._target.innerHTML = ''
+    this._target.appendChild(this._renderer.domElement)
+
+    // Set camera position
+    const pos = this._currentPanorama.cameraConfig.position
+    this._panoramaSphere.position.set(pos.x, pos.y, pos.z)
+    this._camera.position.set(pos.x, pos.y, pos.z)
+
+    // Create arrow
+    if (!this._isMobile) this._arrowMesh = this.createPointer(arrowTexture)
+  }
+
+  resize(element) {
+    this._width = element.clientWidth
+    this._height = element.clientHeight
+
+    this.camera.aspect = this._width / this._height
+    this.camera.updateProjectionMatrix()
+    this.renderer.setSize(this._width, this._height)
+  }
+
+  setCamera(cameraID) {
+    if (cameraID !== this._panoramaCameraID) {
+      if (!this.isLoadingPanorama && !this.isTransition)
+        this.loadPanorama(cameraID, this.onPanoramaLoaded, true)
+    }
+  }
+
+  onPanoramaLoaded(panorama) {
+    this.startTransition(this, panorama)
+  }
+
+  onFirstPanoramaLoaded(panorama) {
+    this._currentPanorama = panorama
+    this.init()
+    this.lat = this.clampAngle(panorama.cameraConfig.rotation.x)
+    this.lon = this.clampAngle(panorama.cameraConfig.rotation.y)
+  }
+
+  incomingPanoramaData(callback, loadedData) {
+    if (loadedData.texture && loadedData.depth) {
+      const newPanorama = this.newPanorama(this._apartmentConfig, loadedData)
+      if (callback) callback(newPanorama)
+      this._apartmentConfig.updateVisible(newPanorama)
+      this._isLoadingPanorama = false
+    }
+  }
+
+  loadPanorama(cameraID, callback, rotateCamera) {
+    this._isLoadingPanorama = true
+    this._panoramaCameraID = cameraID
+    this._transitionRotateCamera = rotateCamera
+
+    const loadedData = { texture: null, depth: null }
+
+    if (this._arrowMesh) this._arrowMesh.visible = false
+
+    // Load 360 image
+    const loader = new THREE.TextureLoader()
+    const self = this
+    loader.load(
+      this.getTextureName(cameraID),
+      function (texture) {
+        loadedData.texture = texture
+        self.incomingPanoramaData(callback, loadedData)
+      },
+      undefined,
+      function (err) {
+        try {
+          console.error(this.getTextureName(cameraID) + ' : ' + err)
+        } catch (e) {
+          console.error(e)
+        }
+      }
+    )
+
+    // Load depth data
+    const oReq = new XMLHttpRequest()
+    oReq.open('GET', this.getDepthName(cameraID), true)
+    oReq.responseType = 'arraybuffer'
+
+    oReq.onload = () => {
+      const arrayBuffer = oReq.response // Note: not oReq.responseText
+      if (!arrayBuffer) return false
+      const byteArray = new Uint8Array(arrayBuffer)
+      loadedData.depth = inflate(byteArray)
+      this.incomingPanoramaData(callback, loadedData)
+    }
+    oReq.send(null)
+  }
+
+  startTransition(player, _panorama2) {
+    this._panorama1 = player.currentPanorama
+    this._panorama2 = _panorama2
+
+    this._panoramaSphere1.position.set(
+      this._panorama1.cameraConfig.position.x,
+      this._panorama1.cameraConfig.position.y,
+      this._panorama1.cameraConfig.position.z
+    )
+    this._panoramaSphere2.position.set(
+      this._panorama2.cameraConfig.position.x,
+      this._panorama2.cameraConfig.position.y,
+      this._panorama2.cameraConfig.position.z
+    )
+    this._panoramaSphere1.material.map = this._panorama1.texture
+    this._panoramaSphere2.material.map = this._panorama2.texture
+
+    this.createDepthSphere(this._panorama1, this._panoramaSphere1)
+    this.createDepthSphere(this._panorama2, this._panoramaSphere2)
+
+    if (player.transitionRotateCamera) {
+      this._lat1 = player.clampAngle(player._lat)
+      this._lon1 = player.clampAngle(player._lon)
+      this._lat2 = player.clampAngle(this._panorama2.cameraConfig.rotation.x)
+      this._lon2 = player.clampAngle(this._panorama2.cameraConfig.rotation.y)
+    }
+
+    this._transition = 0
+    player._isTransition = true
+  }
+
+  handleTransition(deltaTime) {
+    this._transition += Math.min(0.1, deltaTime * 1.5)
+
+    if (this._transition > 1) this._transition = 1
+
+    const s = (Math.sin(this._transition * Math.PI - Math.PI / 2) + 1) / 2
+
+    this.setCameraPosition(this._panorama1, this._panorama2, s)
+    this.rotateCamera(this._lat1, this._lat2, this._lon1, this._lon2, s)
+    this._renderer.setRenderTarget(this._bufferTexture1)
+    this._renderer.render(this._transitionScene1, this._camera)
+    this._renderer.setRenderTarget(this._bufferTexture2)
+    this._renderer.render(this._transitionScene2, this._camera)
+    this._renderer.setRenderTarget(null)
+
+    if (this._transition == 1) {
+      this._currentPanorama.dispose()
+      this._currentPanorama = this._panorama2
+      this._panoramaSphere.material.map = this._currentPanorama.texture
+      this._isTransition = false
+      this._transitionRotateCamera = false
+
+      // Tell host about new cameraID
+      this._onPlayerCameraChanged(this._currentPanorama.cameraConfig.cameraID)
+    }
+
+    // Render composited rendertextures to screen
+    this._shaderMaterial.uniforms.blend.value = s
+    this._renderer.render(this._compositeScene, this._compositeCamera)
+  }
+
+  initializeTransitions() {
+    this._transitionScene1 = new THREE.Scene()
+    this._transitionScene2 = new THREE.Scene()
+    this._compositeScene = new THREE.Scene()
+    const resolution = 400
+
+    this._panoramaSphere1 = this.createPanoramaSphere(1, resolution)
+    this._panoramaSphere2 = this.createPanoramaSphere(1, resolution)
+    this._panoramaSphereTemplate = this.createPanoramaSphere(1, resolution)
+    this._transitionScene1.add(this._panoramaSphere1)
+    this._transitionScene2.add(this._panoramaSphere2)
+
+    this._compositeCamera = new THREE.OrthographicCamera(-1, 1, 1, -1, 1, 1000)
+
+    const width = this._width / 2
+    const height = this._height / 2
+
+    this._bufferTexture1 = new THREE.WebGLRenderTarget(width, height, {
+      minFilter: THREE.LinearFilter,
+      magFilter: THREE.NearestFilter,
+    })
+
+    this._bufferTexture2 = new THREE.WebGLRenderTarget(width, height, {
+      minFilter: THREE.LinearFilter,
+      magFilter: THREE.NearestFilter,
+    })
+
+    const uniforms = {
+      tex1: { value: this._bufferTexture1.texture },
+      tex2: { value: this._bufferTexture2.texture },
+      blend: { value: 0 },
+    }
+    const geometry = new THREE.PlaneGeometry(2, 2, 1, 1)
+    this._shaderMaterial = new THREE.ShaderMaterial({
+      uniforms,
+      vertexShader,
+      fragmentShader,
+    })
+    this._targetMesh = new THREE.Mesh(geometry, this._shaderMaterial)
+    this._targetMesh.position.set(0, 0, -1)
+    this._compositeScene.add(this._targetMesh)
+  }
+
+  getDepthName(cameraID) {
+    const url =
+      this._fileResolver('/data/' + cameraID + '_depth.raw.z') +
+      (this._addBuildVersionToUrls ? '?v=' + window.BUILD : '')
+    return url
+  }
+
+  getTextureName(cameraID) {
+    const url =
+      this._fileResolver('/360/4096x2048/' + cameraID + '_high.jpg') +
+      (this._addBuildVersionToUrls ? '?v=' + window.BUILD : '')
+    return url
+  }
+
+  // Initializing /creating stuff
+
+  update(elapsedTime, timeDelta) {
+    timeDelta = Math.min(timeDelta, 0.1)
+    this.handleAnimationEasing(timeDelta)
+
+    this.lat = Math.max(-85, Math.min(85, this.lat))
+    const phi = deg2rad(90 - this.lat)
+    const theta = deg2rad(this.lon)
+
+    this._camera.target.x =
+      500 * Math.sin(phi) * Math.cos(theta) + this._camera.position.x
+    this._camera.target.y = 500 * Math.cos(phi) + this._camera.position.y
+    this._camera.target.z =
+      500 * Math.sin(phi) * Math.sin(theta) + this._camera.position.z
+    this._camera.lookAt(this._camera.target)
+
+    if (this._isTransition) {
+      this.handleTransition(timeDelta)
+    } else {
+      this.renderScene()
+    }
+
+    if (this.apartmentConfig)
+      this.apartmentConfig.animateMarkers(this._currentPanorama, elapsedTime)
+  }
+
+  renderScene() {
+    this._renderer.render(this._scene, this._camera)
+  }
+
+  createPointer(loaderUrl) {
+    const arrowTexture = new THREE.TextureLoader().load(loaderUrl)
+
+    const geometry = new THREE.PlaneGeometry(0.5, 0.5, 1, 1)
+    const material = new THREE.MeshBasicMaterial({
+      map: arrowTexture,
+      transparent: true,
+      opacity: 0.4,
+      color: 0xffffff,
+      polygonOffset: true,
+      polygonOffsetFactor: -1.0,
+      polygonOffsetUnits: 4.0,
+    })
+
+    const mesh = new THREE.Mesh(geometry, material)
+
+    mesh.rotation.x = deg2rad(-90)
+    mesh.renderOrder = 1
+
+    this._adornments.add(mesh)
+    return mesh
+  }
+
+  // Animations
+  handleAnimationEasing(deltaTime) {
+    if (this._isMouseDown) {
+      this._speedLon = this.lon - this._oldLon
+      this._speedLat = this.lat - this._oldLat
+      this._oldLon = this.lon
+      this._oldLat = this.lat
+    } else {
+      this.lon += this._speedLon
+      this.lat += this._speedLat
+
+      // Stop gradually. TODO: Tweak
+      this._speedLon *= 0.97 * (1 - deltaTime)
+      this._speedLat *= 0.92 * (1 - deltaTime)
+    }
+  }
+
+  getX(event) {
+    if (event.touches) return event.touches[0].clientX
+    return event.clientX
+  }
+
+  getY(event) {
+    if (event.touches) return event.touches[0].clientY
+    return event.clientY
+  }
+
+  lerp(value1, value2, amount) {
+    amount = amount < 0 ? 0 : amount
+    amount = amount > 1 ? 1 : amount
+    return value1 + (value2 - value1) * amount
+  }
+
+  clampAngle(angle) {
+    return clampAngle(angle)
+  }
+
+  clamp(value, min, max) {
+    if (value < min) value = min
+    else if (value > max) value = max
+    return value
+  }
+
+  rotateCamera(lat1, lat2, lon1, lon2, s) {
+    if (!this._transitionRotateCamera) return false
+    const lat = this.lerp(lat1, lat2, s)
+    const lon = this.lerp(lon1, lon2, s)
+    this.lat = lat
+    this.lon = lon
+  }
+
+  setCameraPosition(panorama1, panorama2, s) {
+    const posPano1 = panorama1.cameraConfig.position
+    const posPano2 = panorama2.cameraConfig.position
+    this._camera.position.set(
+      this.lerp(posPano1.x, posPano2.x, s),
+      this.lerp(posPano1.y, posPano2.y, s),
+      this.lerp(posPano1.z, posPano2.z, s)
+    )
+  }
+
+  get consts() {
+    return this._consts
+  }
+
+  get height() {
+    return this._height
+  }
+
+  get width() {
+    return this._width
+  }
+
+  // Player components
+  get panoramaSphere() {
+    return this._panoramaSphere
+  }
+
+  set panoramaSphere(panoramaSphere) {
+    this._panoramaSphere = panoramaSphere
+  }
+
+  get scene() {
+    return this._scene
+  }
+
+  get renderer() {
+    return this._renderer
+  }
+
+  get camera() {
+    return this._camera
+  }
+
+  get arrowMesh() {
+    return this._arrowMesh
+  }
+
+  get raycaster() {
+    return this._raycaster
+  }
+
+  get isTransition() {
+    return this._isTransition
+  }
+
+  get apartmentConfig() {
+    return this._apartmentConfig
+  }
+
+  // Panoramas and Spheres
+  get isLoadingPanorama() {
+    return this._isLoadingPanorama
+  }
+
+  get currentPanorama() {
+    return this._currentPanorama
+  }
+
+  get panoramaSphere1() {
+    return this._panoramaSphere1
+  }
+
+  get panoramaSphere2() {
+    return this._panoramaSphere2
+  }
+
+  set currentPanorama(panorama) {
+    this._currentPanorama = panorama
+  }
+
+  set isTransition(isTransition) {
+    this._isTransition = isTransition
+  }
+
+  set isMouseDown(val) {
+    this._isMouseDown = val
+  }
+
+  // Lat longs
+  get lon() {
+    return this._lon
+  }
+
+  get lat() {
+    return this._lat
+  }
+
+  get isMouseDown() {
+    return this._isMouseDown
+  }
+
+  get speedLon() {
+    return this._speedLon
+  }
+
+  get speedLat() {
+    return this._speedLat
+  }
+
+  get oldLon() {
+    return this._oldLon
+  }
+
+  get oldLat() {
+    return this._oldLat
+  }
+
+  set oldLat(val) {
+    this._oldLat = val
+  }
+
+  set oldLon(val) {
+    this._oldLon = val
+  }
+
+  set lon(lon) {
+    this._lon = lon
+    this._panoramaOrientation.lon = lon
+  }
+
+  set lat(lat) {
+    this._lat = lat
+    this._panoramaOrientation.lat = lat
+  }
+
+  set speedLon(speedLon) {
+    this._speedLon = speedLon
+  }
+
+  set speedLat(speedLat) {
+    this._speedLat = speedLat
+  }
+
+  set isUserInteracting(isInteracting) {
+    this._isUserInteracting = isInteracting
+  }
+
+  // Movement
+  get isMouseMoved() {
+    return this._isMouseMoved
+  }
+
+  get nMouseMove() {
+    return this._nMouseMove
+  }
+
+  get onMouseDownMouseX() {
+    return this._onMouseDownMouseX
+  }
+
+  get onMouseDownMouseY() {
+    return this._onMouseDownMouseY
+  }
+
+  get onMouseDownLon() {
+    return this._onMouseDownLon
+  }
+
+  get onMouseDownLat() {
+    return this._onMouseDownLat
+  }
+
+  get mouseFloorHitpoint() {
+    return this._mouseFloorHitpoint
+  }
+
+  get mouse() {
+    return this._mouse
+  }
+
+  get isUserInteracting() {
+    return this._isUserInteracting
+  }
+
+  get mouseSensitivity() {
+    return this._mouseSensitivity
+  }
+
+  set isMouseMoved(val) {
+    this._isMouseMoved = val
+  }
+
+  set nMouseMove(val) {
+    this._nMouseMove = val
+  }
+
+  set onMouseDownMouseX(val) {
+    this._onMouseDownMouseX = val
+  }
+
+  set onMouseDownMouseY(val) {
+    this._onMouseDownMouseY = val
+  }
+
+  set onMouseDownLon(val) {
+    this._onMouseDownLon = val
+  }
+
+  set onMouseDownLat(val) {
+    this._onMouseDownLat = val
+  }
+
+  // Camera position and rotation
+  get transitionScene1() {
+    return (this._transitionScene1 = null)
+  }
+
+  get transitionScene2() {
+    return (this._transitionScene2 = null)
+  }
+
+  get transitionRotateCamera() {
+    return this._transitionRotateCamera
+  }
+
+  get compositeCamera() {
+    return this._compositeCamera
+  }
+
+  set transitionRotateCamera(rotateCamera) {
+    this._transitionRotateCamera = rotateCamera
+  }
+}