Landing page with spz and video not working as expected

I’m trying to use the 8th wall landing page module following Landing Pages | 8th Wall and https://www.youtube.com/watch?v=tx3_Sz7TAso&t=1457s but am not getting expected behavior.

Desired/expected behavior on the landing page:

  1. Be able to rotate/move around the statue in the spz file.
  2. Watch an information video about the statue.

Behavior on page:
This statue @Svsri - Scaniverse - 1 scan showed up in a most ugly and weird projection.
This is in my body.html

<!-- Copyright (c) 2024, Eusebia Creations. -->

<!-- body.html is optional; elements will be added to your html body after app.js is loaded. -->

<!a-scene landing-page xrextras-loading xrextras-runtime-error xrweb="disableWorldTracking: true">
  <!a-assets>
    <!video
      id="video"
      autoplay
      muted
      crossorigin="anonymous"
      loop="true"
      src="./assets/QV-Ottawa.mp4"></video>
  <!/a-assets>

  <!a-camera position="0 4 10" raycaster="objects: .cantap" cursor="fuse: false; rayOrigin: mouse;">
  <!/a-camera>

  <!a-light type="ambient" intensity="1"></a-light>

  <!-- Note: "name:" must be set to the name of the image target uploaded to the 8th Wall Console -->
<a-scene
  xrextras-gesture-detector
  landing-page="mediaSrc: #myModel"
  xrextras-loading
  xrextras-runtime-error
  renderer="colorManagement: true"
  xrweb>

  <!-- We can define assets here to be loaded when A-Frame initializes -->
  <a-assets>
    <a-asset-item id="myModel" src="assets/QV-Ottawa.mp4"></a-asset-item>
  </a-assets>
  <!xrextras-named-image-target name="#splashimage">
    <!xrextras-target-video-fade video="#qv-ottawa-video"></xrextras-target-video-fade>
  <!/xrextras-named-image-target>
<!/a-scene>

Can you show the results you’re seeing on the landing page?

Hi @GeorgeButler Assuming this is the landing page: https://eusebiacreations.8thwall.app/queenv/, here is what I’m seeing:

It seems you’re using the landing page module as a substitute for the actual experience. However, the landing module is designed to provide a basic onboarding experience for users accessing your content from unsupported devices. For example, if someone opens the URL of a VPS experience on a desktop computer, the landing page would display a QR code to guide them to view the experience on their phone.

In your case, you should modify your body.html to use the downloaded version of your scan and include an orbit camera component, like the one available for A-Frame here:

Thank you. Just to be clear, I’m using Niantic Studio, not VPS on cloud editor. I was just informed that it doesn’t support A-frame and I need to switch to typescript.

That makes a bit more sense. You should be able to drag your .spz splat into your assets, add it to your viewport, and add an orbit controls component to your camera. To get the orbit controls to work you’ll also need to enable the input map but clicking input manager and enabling the Orbit Controls preset.

1 Like