3

ユーザーフローが次のような8番目の壁プロジェクトがあります

画面の開始 - カメラとモーションの許可 - タップして開始 - ページを選択して AR ポータル - カメラがアクティブでポータルが表示されます

ただし、商用プランをオンにしてから、デフォルトのスプラッシュ画面をオフにするためのアクセス権を取得すると、

その後、フローはポータルの選択ページでスタックします。デバッグモードでは、選択されていることを示していますが、画面は表示されず、次のステップに進みます。

私はまだデフォルトのスプラッシュ画面を望んでいませんが、私のプロジェクトはうまく機能しています。

コードでスプラッシュ画面を手動でオフにするにはどうすればよいですか? また、オプション ページでエラーが発生しないようにするにはどうすればよいですか?

以下は、読み込みページ xreextras のコードです。

// 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