Modern Python-First Fullstack & Native 3D Spatial Canvas

<template>
  <div class="relative w-full h-[650px] rounded-3xl overflow-hidden glass-panel border border-amber-500/20">
    <!-- Native 3D Spatial Canvas with Hallwyl Museum 360 Room -->
    <ZAU.Canvas3D 
      src="/model/3d/the_great_drawing_room/scene_web.gltf"
      exposure={1.3}
      toneMapping="ACESFilmic"
      autoRotate={isRotating}
      fov={55}
    >
      <ZAU.PointLight position={[0, 3.5, 0]} color="#ffb74d" intensity={3.2} />
      <ZAU.DirectionalLight position={[8, 6, 4]} color="#fff9e6" intensity={2.0} />
      <ZAU.Hotspot id="piano" position={[-1.8, -0.6, -2.2]} label="Bechstein Grand" @select="inspectPiano" />
    </ZAU.Canvas3D>

    <!-- Glassmorphic UI HUD Overlaid Directly on 3D Stream -->
    <div class="absolute top-6 left-6 p-4 rounded-2xl glass-panel-glow max-w-sm">
      <div class="flex items-center space-x-2 text-xs font-mono text-amber-400">
        <i class="bi bi-compass-fill"></i>
        <span>360° SPATIAL HUD</span>
      </div>
      <h3 class="text-base font-bold text-white mt-1">{{ roomTitle }}</h3>
      <button @click="toggleRotation" class="mt-3 px-4 py-1.5 rounded-xl bg-amber-500 text-zinc-950 font-bold text-xs">
        <i class="bi bi-arrow-repeat mr-1"></i> Toggle Spin
      </button>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'zau-framework';

export default defineComponent({
  setup() {
    const isRotating = ref(true);
    const roomTitle = ref("The Great Drawing Room");

    const toggleRotation = () => {
      isRotating.value = !isRotating.value;
    };

    const inspectPiano = async (node: any) => {
      console.log("Inspecting 3D Audio Node:", node);
    };

    return { isRotating, roomTitle, toggleRotation, inspectPiano };
  }
});
</script>

<style scoped>
.glass-panel-glow {
  backdrop-filter: blur(20px);
  border: 1px solid rgba(245, 158, 11, 0.3);
}
</style>