如何在8th Wall全息投影播放模式中添加自定义按钮

Hey there! Let's walk through how to add custom buttons to your 8th Wall hologram video project step by step. I’ve tackled this exact scenario before, so here’s what works smoothly:

Since 8th Wall projects are web-based, you can start by dropping a button directly into your HTML (or create it dynamically with JS—we’ll stick to the straightforward HTML approach first). The key is to make sure it sits on top of the AR view, so use fixed positioning and a high z-index:

<!-- Place this right before your closing </body> tag -->
<button id="hologramPlayPauseBtn" style="
  position: fixed;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  padding: 14px 28px;
  font-size: 18px;
  z-index: 9999;
  background: #2196F3;
  color: white;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  touch-action: manipulation;
">
  Pause Hologram
</button>

The touch-action: manipulation line fixes any weird touch behavior on mobile devices, which is crucial for AR projects.

Next, you need to connect the button to your hologram’s video element. If you’re using 8th Wall’s built-in xr-video component (super common for holograms), grab a reference to it and add a click handler:

// Wait for the DOM to fully load
document.addEventListener('DOMContentLoaded', () => {
  const hologramVideo = document.querySelector('xr-video');
  const controlBtn = document.getElementById('hologramPlayPauseBtn');

  if (!hologramVideo || !controlBtn) return;

  // Toggle play/pause on button click
  controlBtn.addEventListener('click', () => {
    if (hologramVideo.paused) {
      hologramVideo.play();
      controlBtn.textContent = 'Pause Hologram';
    } else {
      hologramVideo.pause();
      controlBtn.textContent = 'Play Hologram';
    }
  });
});

If you’re using a custom Three.js hologram setup (with a video texture), just swap xr-video with the ID/class of your underlying <video> element—this logic applies the same way.

Sometimes your video element won’t be ready until the AR session is fully up and running. To avoid bugs, wrap your button logic in an 8th Wall pipeline module that triggers on session start:

XR.addCameraPipelineModule({
  name: 'hologramButtonController',
  onStart: () => {
    const hologramVideo = document.querySelector('xr-video');
    const controlBtn = document.getElementById('hologramPlayPauseBtn');

    if (hologramVideo && controlBtn) {
      controlBtn.addEventListener('click', () => {
        if (hologramVideo.paused) {
          hologramVideo.play();
          controlBtn.textContent = 'Pause Hologram';
        } else {
          hologramVideo.pause();
          controlBtn.textContent = 'Play Hologram';
        }
      });
    }
  }
});

This ensures everything is initialized only when the AR environment is ready to go.

Want more functionality? Adding extra buttons is easy. For example, a mute/unmute button:

<button id="hologramMuteBtn" style="
  position: fixed;
  bottom: 30px;
  right: 20px;
  padding: 12px;
  font-size: 20px;
  z-index: 9999;
  background: #2196F3;
  color: white;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  touch-action: manipulation;
">
  🔊
</button>

And the corresponding JS (add this inside your onStart or DOMContentLoaded callback):

const muteBtn = document.getElementById('hologramMuteBtn');
muteBtn.addEventListener('click', () => {
  hologramVideo.muted = !hologramVideo.muted;
  muteBtn.textContent = hologramVideo.muted ? '🔇' : '🔊';
});

You can also style buttons to match your project’s vibe—adjust colors, add hover effects, or even use custom icons instead of text.

• Z-index matters: Make sure your buttons have a higher z-index than the AR canvas (usually 9999 works).
• Mobile touch testing: Always test on actual mobile devices—desktop browsers might not replicate touch behavior perfectly.
• Auto-play restrictions: Mobile browsers block video auto-play until a user interacts with the page, which is why using a button to trigger the first play is mandatory (this is already handled in our code!).

内容的提问来源于stack exchange，提问作者Laxminarayan