PStack Debugger - 3D Avatar Demo

Interactive 3D avatar with PlayCanvas - demonstrates event-driven animation control

Integration Code Example

<!-- HTML: Embed the 3D avatar in your page -->
<iframe
  id="avatar3DEmbed"
  src="https://pc-debug.pstack.ai/embed-3d"
  width="100%"
  height="600"
  style="border: none;"
></iframe>

<script>
// Wait for the 3D avatar to be ready
window.addEventListener('message', (event) => {
  if (event.data?.type === 'AVATAR_READY') {
    console.log('3D Avatar is ready!');
    console.log('Available animations:', event.data.animations);
  }
});

// Send events to trigger avatar reactions
function sendAvatarEvent(eventType, payload) {
  const iframe = document.getElementById('avatar3DEmbed');
  iframe.contentWindow.postMessage({
    type: 'AVATAR_EVENT',
    eventType: eventType,
    payload: payload
  }, '*');
}

// Play a specific animation directly
function playAnimation(animationName) {
  const iframe = document.getElementById('avatar3DEmbed');
  iframe.contentWindow.postMessage({
    type: 'PLAY_ANIMATION',
    animation: animationName
  }, '*');
}

// Example: Trigger avatar emote when player wins
sendAvatarEvent('AVATAR_EMOTE', {
  playerId: 'player1',
  emote: 'victory'
});

// Or play animation directly
playAnimation('happy');
</script>