3

我有第 8 个墙项目，用户流程是这样的

屏幕开始 - 摄像头和运动权限 - 点击开始 - 选择 AR 门户的页面 - 摄像头活动和门户显示

但是，在打开商业计划之后，一旦我获得关闭默认启动画面的权限，

然后流程卡在选择门户页面。在调试模式下，它显示它已被选中，但屏幕不显示并进入下一步。

我仍然不希望有默认的启动画面，但我的项目运行良好。

如何在代码中手动关闭启动画面？以及如何防止选项页面中发生错误？

下面是加载页面 xrextras 的代码

// Display loading screen.
const onxrloaded = () => {
  XR8.addCameraPipelineModule(window.LoadingFactory.pipelineModule())
}
const loadingComponent = {
  schema: {
    loadBackgroundColor: {default: ''},
    cameraBackgroundColor: {default: ''},
    loadImage: {default: ''},
    loadAnimation: {default: ''},
  },
  init() {
  /*
    let aframeLoaded = false
    this.el.addEventListener('loaded', () => {
      aframeLoaded = true
    })
    const aframeDidLoad = () => aframeLoaded
    const load = () => {
      LoadingFactory.setAppLoadedProvider(aframeDidLoad)
      const waitForRealityTexture =
          !!(this.el.sceneEl.attributes.xrweb || this.el.sceneEl.attributes.xrface)
      LoadingFactory.showLoading({onxrloaded, waitForRealityTexture})
    }
    window.XRExtras ? load() : window.addEventListener('xrextrasloaded', load, {once: true})

    const loadImg = document.querySelector('#loadImage')

    if (loadImg) {
      if (this.data.loadImage !== '') {
        loadImg.src = document.querySelector(this.data.loadImage).src
      }

      if (this.data.loadAnimation !== '') {
        loadImg.classList.remove('spin')
        if (this.data.loadAnimation !== 'none') {
          loadImg.classList.add(this.data.loadAnimation)
        }
      }
    }

    const loadBackground = document.querySelector('#loadBackground')

    if (loadBackground) {
      loadBackground.style.backgroundColor = this.data.loadBackgroundColor
    }

    const requestingCameraPermissions = document.querySelector('#requestingCameraPermissions')

    if (requestingCameraPermissions) {
      requestingCameraPermissions.style.backgroundColor = this.data.cameraBackgroundColor
    }
  },
  remove() {
    XR8.removeCameraPipelineModule('loading')
  },*/
   const splash = document.querySelector('#splashimage')
    const addXRWeb = () => {
      if (this.data.requestGyro === true && this.data.disableWorldTracking === true) {
        // If world tracking is disabled, and you still want gyro enabled (i.e. 3DoF mode)
        // Request motion and orientation sensor via XR8's permission API
        XR8.addCameraPipelineModule({
          name: 'request-gyro',
          requiredPermissions: () => ([XR8.XrPermissions.permissions().DEVICE_ORIENTATION]),
        })
      }
      this.el.sceneEl.setAttribute('xrweb', `disableWorldTracking: ${this.data.disableWorldTracking}`)
       const waitForRealityTexture =
          !!(this.el.sceneEl.attributes.xrweb || this.el.sceneEl.attributes.xrface)
      LoadingFactory.showLoading({onxrloaded, waitForRealityTexture})
      window.addEventListener('xrextrasloaded', {once: true})
      setTimeout(() => {
        splash.style.display = 'none'
        console.log('exec')
       

    const loadImg = document.querySelector('#loadImage')

    if (loadImg) {
      if (this.data.loadImage !== '') {
        loadImg.src = document.querySelector(this.data.loadImage).src
      }

      if (this.data.loadAnimation !== '') {
        loadImg.classList.remove('spin')
        if (this.data.loadAnimation !== 'none') {
          loadImg.classList.add(this.data.loadAnimation)
        }
      }
    }

    const loadBackground = document.querySelector('#loadBackground')

    if (loadBackground) {
      loadBackground.style.backgroundColor = this.data.loadBackgroundColor
    }

    const requestingCameraPermissions = document.querySelector('#requestingCameraPermissions')

    if (requestingCameraPermissions) {
      requestingCameraPermissions.style.backgroundColor = this.data.cameraBackgroundColor
    }
      // document.getElementById('scn-ui').style.display = 'block'
      }, 3000)
      // splashimage.classList.add('hidden')

      // Play background music (mp3) after user has clicked "Start AR" and the scene has loaded.
      this.el.sceneEl.addEventListener('realityready', () => {
       // const snd = document.querySelector('[sound]')
       // snd.components.sound.playSound()
      })
    }
    setTimeout(() => {
      addXRWeb()
    }, 100)
},
}

export {loadingComponent}

这就是选项选择页面的结构

//
  // switch portal
  //

  const portalButtons = document.querySelectorAll('.choose-portal')

  function switchPortal(portalType) {
    const scene_content = document.getElementById('scene_content')
    const before_portal = document.getElementById('screen-before-portal')
    scene_content.setAttribute('visible', true)
    setTimeout(() => {
      before_portal.addEventListener('click', window.firstPlaceEvent)
    }, 300)
    const portalA = document.getElementById('portalA')
    const portalB = document.getElementById('portalB')

    if (portalType === 'portalA') {
      console.log('portalA')
      portalA.setAttribute('visible', true)
      portalB.setAttribute('visible', false)

      window.portalType = 'portal-a';
      window.history.pushState('portal_a', 'Portal A', 'portal-a');
      

    } else if (portalType === 'portalB') {
      console.log('portalB')
      portalA.setAttribute('visible', false)
      portalB.setAttribute('visible', true)

      window.portalType = 'portal-b';
      window.history.pushState('portal_b', 'Portal B', 'portal-b');
    }
  }

  window.switchPortal = switchPortal;

  portalButtons.forEach((portalButton) => {
    const portalType = portalButton.getAttribute('data-name')
    portalButton.addEventListener('click', () => {
      console.log(portalType)
      switchPortal(portalType)
    })
  })




//
  // show/hide screens
  //
  function goToScreen(screen = '') {
    const nameScreenShow = screen
    const nameScreenHide = window.store.activeScreen

    const screenHide = document.getElementById(`screen-${nameScreenHide}`)
    const screenShow = document.getElementById(`screen-${nameScreenShow}`)

    if (nameScreenHide !== nameScreenShow) {
      // show/hide screens
      if (screenHide) {
        screenHide.classList.remove('show')
      }

      if (screenShow) {
        screenShow.classList.add('show')
        window.store.activeScreen = nameScreenShow
        const screenshow = document.querySelectorAll('.show')
        screenshow.forEach((item) => {
          console.log(item.id)
        })
      }
      // } else {
      //   console.error('No such screen exists: "', nameScreenShow, '" or "', nameScreenHide, '"')
      // }
    }
  }

  function hideScreen(screen = '') {
    const nameScreenShow = screen

    const screenShow = document.getElementById(`screen-${nameScreenShow}`)

    if (nameScreenShow) {
      if (screenShow) {
        screenShow.classList.remove('show')
        window.store.activeScreen = ''
      }
    }
  }

  window.goToScreen = goToScreen
  window.hideScreen = hideScreen



document.getElementById('screen-start').addEventListener('click', function(event) {
        if(window.portalType){
            if(window.portalType == 'portal-a'){
                window.goToScreen('before-portal');
                window.switchPortal('portalA')
            }

            if(window.portalType == 'portal-b'){
                window.goToScreen('before-portal');
                window.switchPortal('portalB')
            }
        }else{
            window.goToScreen('choose-portal');
        }

        ```


And this is the something I got from 8th wall support but I really don't know what to do after this.

####
When developing in the cloud editor, you should avoid using things like window.onload or similar, as they would fire during the splash screen before your app.js code gets executed, etc.
The other case where I saw disabling the splash screen cause an issue for a customer was in a non-aframe project they were missing the meta viewport tag in head.html
####

this project was built with a-frame

Any help or clue will be truley appreciated

Thank you in advance
4

0 回答 0