@qispace/vue3-player 0.0.6 → 0.0.8

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

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