feat: add 3D preview component and integrate it into the designer page

app/pages/designer.vue

@@ -3,6 +3,7 @@ import DesignerCanvas from "~/components/designer/DesignerCanvas.vue";
 import DesignerPreview from "~/components/designer/DesignerPreview.vue";
 import DesignerToolbar from "~/components/designer/DesignerToolbar.vue";
 import TemplatePicker from "~/components/designer/TemplatePicker.vue";
+import ThreeDPreview from "~/components/designer/ThreeDPreview.vue";
 
 import { useSlipmatDesigner } from "~/composables/useSlipmatDesigner";
 import type { ExportedDesign } from "~/composables/useSlipmatDesigner";
@@ -40,14 +41,21 @@ const {
   zoomIn,
   zoomOut,
   resetZoom,
+  getCanvasElement,
 } = useSlipmatDesigner();
 
 // Active view selector for multi-canvas design
 const activeView = ref<"front" | "top" | "left" | "right">("front");
+const canvasElement = ref<HTMLCanvasElement | null>(null);
 
 const setActiveView = (view: "front" | "top" | "left" | "right") => {
   activeView.value = view;
   setActiveCanvas(view);
+  updateCanvasElement();
+};
+
+const updateCanvasElement = () => {
+  canvasElement.value = getCanvasElement();
 };
 
 const DESIGN_PRICE_USD = 39.99;
@@ -257,8 +265,17 @@ watch(
   { immediate: true }
 );
 
+// Update canvas element reference when canvas changes
+watch(
+  () => getCanvasElement(),
+  (newCanvas) => {
+    canvasElement.value = newCanvas;
+  }
+);
+
 onMounted(() => {
   initAuth();
+  updateCanvasElement();
 });
 
 const handleTemplateSelect = (templateId: string) => {
@@ -507,8 +524,23 @@ const handleCheckout = async () => {
               </p>
             </div>
           </div>
+
+          <!-- 3D Preview Section -->
+          <div class="rounded-3xl border border-slate-200 bg-white shadow-xl p-6">
+            <h3 class="mb-4 text-lg font-bold text-slate-900">3D Preview</h3>
+            <div class="aspect-square w-full rounded-lg overflow-hidden bg-gradient-to-br from-slate-700 to-slate-900">
+              <ThreeDPreview
+                model-path="/LAMESA.glb"
+                :canvas-texture="canvasElement"
+                @mounted="updateCanvasElement"
+              />
+            </div>
+            <p class="mt-4 text-sm text-slate-600">
+              Your design will appear on the 3D model in real-time. Rotate to view from different angles.
+            </p>
+          </div>
         </div>
-        
+
         <DesignerPreview
           :is-checkout-pending="isCheckoutPending"
           :checkout-price="DESIGN_PRICE_USD"

app/pages/index.vue

@@ -120,7 +120,7 @@ onMounted(() => {
                 class="flex h-full w-full items-center justify-center rounded-2xl border-2 border-slate-300 bg-linear-to-br from-slate-700 to-slate-900 shadow-xl overflow-hidden"
               >
                 <model-viewer
-                  src="/LAMESA.glb"
+                  src="/LAMESA-2.glb"
                   alt="Table with Jersey"
                   auto-rotate
                   rotation-per-second="15deg"