echoar.js is outdated and does not run in any 8th wall project

[bchung2017]

The syntax, formatting, and language used in echoar.js throws numerous errors and does not work in an 8th wall project with the 8frame framework as of Feb 2024

[bchung2017]

Updated code that works with no change in functionality
Also had to replace jquery with the fetch function

// import {$} from './jquery-371min.js'
/* eslint-env jquery */

export class EchoAR {
  constructor(apiKey) {
    this.models = new Map()
    this.serverURL = `https://api.echo3d.com/query?key=${apiKey}`
    this.loader = new THREE.GLTFLoader()
  }

  transformations(id, data) {
    // initializes model's transformations based on metadata in console
    const keys = Object.keys(data.db)
    let i = 0
    for (i = 0; i < keys.length; i++) {
      if (id.includes(data.db[keys[i]].id)) {
        break
      }
    }
    if (data.db[keys[i]].additionalData.direction === 'right') {
      this.models.get(id).direction = 'right'
    } else if (da// import {$} from './jquery-371min.js'
/* eslint-env jquery */

export class EchoAR {
  constructor(apiKey) {
    this.models = new Map()
    this.serverURL = `https://api.echo3d.com/query?key=${apiKey}`
    this.loader = new THREE.GLTFLoader()
  }

  transformations(id, data) {
    // initializes model's transformations based on metadata in console
    const keys = Object.keys(data.db)
    let i = 0
    for (i = 0; i < keys.length; i++) {
      if (id.includes(data.db[keys[i]].id)) {
        break
      }
    }
    if (data.db[keys[i]].additionalData.direction === 'right') {
      this.models.get(id).direction = 'right'
    } else if (data.db[keys[i]].additionalData.direction === 'left') {
      this.models.get(id).direction = 'left'
    }

    if (data.db[keys[i]].additionalData.x != null) {
      this.models.get(id).hologram.position.x += Number(data.db[keys[i]].additionalData.x)
    }
    if (data.db[keys[i]].additionalData.y != null) {
      this.models.get(id).hologram.position.y += Number(data.db[keys[i]].additionalData.y)
    }
    if (data.db[keys[i]].additionalData.z != null) {
      this.models.get(id).hologram.position.z += Number(data.db[keys[i]].additionalData.z)
    }

    if (data.db[keys[i]].additionalData.xAngle != null) {
      this.models.get(id).hologram.rotation.x = Number(data.db[keys[i]].additionalData.xAngle)
    }
    if (data.db[keys[i]].additionalData.yAngle != null) {
      this.models.get(id).hologram.rotation.y = Number(data.db[keys[i]].additionalData.yAngle)
    }
    if (data.db[keys[i]].additionalData.zAngle != null) {
      this.models.get(id).hologram.rotation.z = Number(data.db[keys[i]].additionalData.zAngle)
    }

    if (data.db[keys[i]].additionalData.scale != null) {
      this.models.get(id).hologram.scale.x = Number(data.db[keys[i]].additionalData.scale)
      this.models.get(id).hologram.scale.y = Number(data.db[keys[i]].additionalData.scale)
      this.models.get(id).hologram.scale.z = Number(data.db[keys[i]].additionalData.scale)
    }

    // deal with image targets
    if (data.db[keys[i]].target.type === 'IMAGE_TARGET') {
      this.models.get(id).imageTarget = data.db[keys[i]].target.filename
    }
  }

  // Load the glb model at the requested point on the surface.
  findObject(isAFrame, callback) {
    const self = this
    // let data
    // $.getJSON(self.serverURL, (data) => {
    fetch(self.serverURL)
      .then((response) => {
          if (!response.ok) {
              throw new Error(`Network response was not ok: ${response.status}`);
          }
          return response.json()
      })
      .then((data) => {
        console.log('JSON data returned')
        const keys = Object.keys(data.db)
        let i = 0
        let modelsLoaded = 0
        for (i = 0; i < keys.length; i++) {
          console.log(`${'key: '}${keys[i]}`)
          // self.serverURL + '&file=' + data.db[keys[i]].additionalData.glbHologramStorageID
          const uRL = `${self.serverURL}&file=${data.db[keys[i]].hologram.storageID}`
          console.log(`${'file URL: '}${uRL}`)
          if (isAFrame) {
            const newElement = document.createElement('a-entity')
            newElement.setAttribute('gltf-model', uRL)
            console.log(`${'Loading gltf model: '}${uRL}`)  // eslint-disable-line no-console
            self.models.set(
              data.db[keys[i]].id,
              {hologram: newElement, direction: null, url: uRL, imageTarget: null}
            )
            // self.transformationsAFrame(data.db[keys[i]].id, data)
            console.log('model loaded')
            modelsLoaded++
            if (modelsLoaded === keys.length) {
              callback(data)
            }
          } else {
            let tempModelsLoaded = modelsLoaded
            self.loadModels(uRL, data.db[keys[i]].id, data, (result) => {
              // modelsLoaded++
              tempModelsLoaded++
              if (tempModelsLoaded === keys.length) {
                callback(result)
              }
            })
            modelsLoaded = tempModelsLoaded
          }
        }
      })
  }

  loadModels(fileURL, id, data, callback) {
    console.log('Loading file non-aframe')  // eslint-disable-line no-console
    this.loader.load(
      fileURL,
      (gltf) => {
        this.models.set(
          id,
          {hologram: gltf.scene, direction: null, url: fileURL, imageTarget: null}
        )
        this.transformations(id, data); callback(data)
      },
      (xhr) => {
        console.log(  // eslint-disable-line no-console
          `${((xhr.loaded / xhr.total) * 100)}% loaded`
        )
      },
      (error) => {
        console.log(`An error happened: ${error}`)  // eslint-disable-line no-console
      }
    )
  }

  transformationsAFrame(id, data) {
    // initializes model's transformations based on metadata in console
    const keys = Object.keys(data.db)
    let i
    for (i = 0; i < keys.length; i++) {
      if (id.includes(data.db[keys[i]].id)) {
        break
      }
    }
    if (data.db[keys[i]].additionalData.direction === 'right') {
      this.models.get(id).direction = 'right'
    } else if (data.db[keys[i]].additionalData.direction === 'left') {
      this.models.get(id).direction = 'left'
    }
    if (data.db[keys[i]].additionalData.x != null) {
      this.models.get(id).hologram.object3D.position.x += Number(data.db[keys[i]].additionalData.x)
    }
    if (data.db[keys[i]].additionalData.y != null) {
      this.models.get(id).hologram.object3D.position.y += Number(data.db[keys[i]].additionalData.y)
    }
    if (data.db[keys[i]].additionalData.z != null) {
      this.models.get(id).hologram.object3D.position.z += Number(data.db[keys[i]].additionalData.z)
    }
    if (data.db[keys[i]].additionalData.xAngle != null) {
      this.models.get(id).hologram.object3D.rotation.x =
        Number(data.db[keys[i]].additionalData.xAngle)
    }
    if (data.db[keys[i]].additionalData.yAngle != null) {
      this.models.get(id).hologram.object3D.rotation.y =
        Number(data.db[keys[i]].additionalData.yAngle)
    }
    if (data.db[keys[i]].additionalData.zAngle != null) {
      this.models.get(id).hologram.object3D.rotation.z =
        Number(data.db[keys[i]].additionalData.zAngle)
    }
    if (data.db[keys[i]].additionalData.scale != null) {
      this.models.get(id).hologram.object3D.scale.x = Number(data.db[keys[i]].additionalData.scale)
      this.models.get(id).hologram.object3D.scale.y = Number(data.db[keys[i]].additionalData.scale)
      this.models.get(id).hologram.object3D.scale.z = Number(data.db[keys[i]].additionalData.scale)
    }
    if (data.db[keys[i]].target.type === 'IMAGE_TARGET') {
      this.models.get(id).imageTarget = data.db[keys[i]].target.filenameta.db[keys[i]].additionalData.direction === 'left') {
      this.models.get(id).direction = 'left'
    }

    if (data.db[keys[i]].additionalData.x != null) {
      this.models.get(id).hologram.position.x += Number(data.db[keys[i]].additionalData.x)
    }
    if (data.db[keys[i]].additionalData.y != null) {
      this.models.get(id).hologram.position.y += Number(data.db[keys[i]].additionalData.y)
    }
    if (data.db[keys[i]].additionalData.z != null) {
      this.models.get(id).hologram.position.z += Number(data.db[keys[i]].additionalData.z)
    }

    if (data.db[keys[i]].additionalData.xAngle != null) {
      this.models.get(id).hologram.rotation.x = Number(data.db[keys[i]].additionalData.xAngle)
    }
    if (data.db[keys[i]].additionalData.yAngle != null) {
      this.models.get(id).hologram.rotation.y = Number(data.db[keys[i]].additionalData.yAngle)
    }
    if (data.db[keys[i]].additionalData.zAngle != null) {
      this.models.get(id).hologram.rotation.z = Number(data.db[keys[i]].additionalData.zAngle)
    }

    if (data.db[keys[i]].additionalData.scale != null) {
      this.models.get(id).hologram.scale.x = Number(data.db[keys[i]].additionalData.scale)
      this.models.get(id).hologram.scale.y = Number(data.db[keys[i]].additionalData.scale)
      this.models.get(id).hologram.scale.z = Number(data.db[keys[i]].additionalData.scale)
    }

    // deal with image targets
    if (data.db[keys[i]].target.type === 'IMAGE_TARGET') {
      this.models.get(id).imageTarget = data.db[keys[i]].target.filename
    }
  }

  // Load the glb model at the requested point on the surface.
  findObject(isAFrame, callback) {
    const self = this
    // let data
    // $.getJSON(self.serverURL, (data) => {
    fetch(self.serverURL)
      .then((response) => {
          if (!response.ok) {
              throw new Error(`Network response was not ok: ${response.status}`);
          }
          return response.json()
      })
      .then((data) => {
        console.log('JSON data returned')
        const keys = Object.keys(data.db)
        let i = 0
        let modelsLoaded = 0
        for (i = 0; i < keys.length; i++) {
          console.log(`${'key: '}${keys[i]}`)
          // self.serverURL + '&file=' + data.db[keys[i]].additionalData.glbHologramStorageID
          const uRL = `${self.serverURL}&file=${data.db[keys[i]].hologram.storageID}`
          console.log(`${'file URL: '}${uRL}`)
          // let uRL = `${self.serverURL}&file=${data.db[keys[i]].additionalData.glbHologramStorageID}`
          // if (data.db[keys[i]].additionalData.glbHologramStorageID === null) {
          //   uRL = `${self.serverURL}&file=${data.db[keys[i]].hologram.storageID}`
          // }
          if (isAFrame) {
            const newElement = document.createElement('a-entity')
            newElement.setAttribute('gltf-model', uRL)
            console.log(`${'Loading gltf model: '}${uRL}`)  // eslint-disable-line no-console
            self.models.set(
              data.db[keys[i]].id,
              {hologram: newElement, direction: null, url: uRL, imageTarget: null}
            )
            // self.transformationsAFrame(data.db[keys[i]].id, data)
            console.log('model loaded')
            modelsLoaded++
            if (modelsLoaded === keys.length) {
              callback(data)
            }
          } else {
            let tempModelsLoaded = modelsLoaded
            self.loadModels(uRL, data.db[keys[i]].id, data, (result) => {
              // modelsLoaded++
              tempModelsLoaded++
              if (tempModelsLoaded === keys.length) {
                callback(result)
              }
            })
            modelsLoaded = tempModelsLoaded
          }
        }
      })
  }

  loadModels(fileURL, id, data, callback) {
    console.log('Loading file non-aframe')  // eslint-disable-line no-console
    this.loader.load(
      fileURL,
      (gltf) => {
        this.models.set(
          id,
          {hologram: gltf.scene, direction: null, url: fileURL, imageTarget: null}
        )
        this.transformations(id, data); callback(data)
      },
      (xhr) => {
        console.log(  // eslint-disable-line no-console
          `${((xhr.loaded / xhr.total) * 100)}% loaded`
        )
      },
      (error) => {
        console.log(`An error happened: ${error}`)  // eslint-disable-line no-console
      }
    )
  }

  transformationsAFrame(id, data) {
    // initializes model's transformations based on metadata in console
    const keys = Object.keys(data.db)
    let i
    for (i = 0; i < keys.length; i++) {
      if (id.includes(data.db[keys[i]].id)) {
        break
      }
    }
    if (data.db[keys[i]].additionalData.direction === 'right') {
      this.models.get(id).direction = 'right'
    } else if (data.db[keys[i]].additionalData.direction === 'left') {
      this.models.get(id).direction = 'left'
    }
    if (data.db[keys[i]].additionalData.x != null) {
      this.models.get(id).hologram.object3D.position.x += Number(data.db[keys[i]].additionalData.x)
    }
    if (data.db[keys[i]].additionalData.y != null) {
      this.models.get(id).hologram.object3D.position.y += Number(data.db[keys[i]].additionalData.y)
    }
    if (data.db[keys[i]].additionalData.z != null) {
      this.models.get(id).hologram.object3D.position.z += Number(data.db[keys[i]].additionalData.z)
    }
    if (data.db[keys[i]].additionalData.xAngle != null) {
      this.models.get(id).hologram.object3D.rotation.x =
        Number(data.db[keys[i]].additionalData.xAngle)
    }
    if (data.db[keys[i]].additionalData.yAngle != null) {
      this.models.get(id).hologram.object3D.rotation.y =
        Number(data.db[keys[i]].additionalData.yAngle)
    }
    if (data.db[keys[i]].additionalData.zAngle != null) {
      this.models.get(id).hologram.object3D.rotation.z =
        Number(data.db[keys[i]].additionalData.zAngle)
    }
    if (data.db[keys[i]].additionalData.scale != null) {
      this.models.get(id).hologram.object3D.scale.x = Number(data.db[keys[i]].additionalData.scale)
      this.models.get(id).hologram.object3D.scale.y = Number(data.db[keys[i]].additionalData.scale)
      this.models.get(id).hologram.object3D.scale.z = Number(data.db[keys[i]].additionalData.scale)
    }
    if (data.db[keys[i]].target.type === 'IMAGE_TARGET') {
      this.models.get(id).imageTarget = data.db[keys[i]].target.filename
    }
  }
}