Add new Lottie animation for Call Center 3 with multiple layers and transformations

2026-06-23 13:36:49 +07:00
parent e16ce9069e
commit dd8b4b20d1
30 changed files with 3405 additions and 0 deletions
@@ -0,0 +1,12 @@
+import type { Metadata } from "next";
+import VirtualTour from "@/app/components/VirtualTour";
+
+export const metadata: Metadata = {
+  title: "VR360 Chùa Thái Lạc (Pháp Vân tự)",
+  description:
+    "Trải nghiệm tham quan thực tế ảo 360° Chùa Thái Lạc (Pháp Vân tự) — di tích quốc gia tại Xã Như Quỳnh, tỉnh Hưng Yên.",
+};
+
+export default function ChuaThaiLacTourPage() {
+  return <VirtualTour tourId="chua-thai-lac" />;
+}
@@ -0,0 +1,177 @@
+// Cấu hình tour VR360 Chùa Thái Lạc (Pháp Vân tự) — Xã Như Quỳnh, Hưng Yên.
+// File chỉ chứa DỮ LIỆU (type-only import từ engine để tránh circular import runtime).
+// Engine `VirtualTour.tsx` import `chuaThaiLacTour` rồi bọc qua createTourConfig().
+import type { TourConfig, TourScene, InfoMarker } from "@/app/components/VirtualTour";
+
+const base = "/images/Đình Thái Lạc";
+const p = (file: string) => encodeURI(`${base}/${file}`);
+
+type SceneSeed = {
+  title: string;
+  location: string;
+  file: string;
+  initialYaw?: number;
+  infoMarkers?: InfoMarker[];
+};
+
+// Tuyến tham quan: cổng → đường/vòm → tiền đường & chính điện → khu thờ → ban tượng → cảnh quan.
+// yaw/pitch của hotspot để mặc định (tiến: 0, lùi: 180); tinh chỉnh trực quan ở bước chạy dev.
+const seeds: SceneSeed[] = [
+  {
+    title: "Chính diện cổng chùa",
+    location: "Khu cổng",
+    file: "Chính Diện Cổng Chùa.jpg",
+    infoMarkers: [
+      {
+        id: "gioi-thieu",
+        title: "Giới thiệu",
+        eyebrow: "Chùa Thái Lạc · Pháp Vân tự",
+        yaw: 0,
+        pitch: -2,
+        iconType: "info",
+        content: [
+          "Chùa Thái Lạc, tên chữ là Pháp Vân tự, là ngôi chùa cổ thờ Pháp Vân — vị thần Mây trong tín ngưỡng Tứ Pháp của cư dân nông nghiệp đồng bằng Bắc Bộ.",
+          "Di tích được xếp hạng cấp quốc gia, nổi tiếng với hệ thống ván chạm khắc gỗ thời Trần (thế kỷ 14) thuộc hàng quý hiếm bậc nhất Việt Nam.",
+        ],
+      },
+    ],
+  },
+  { title: "Cổng bên phải", location: "Khu cổng", file: "Cổng Hữu.jpg" },
+  { title: "Cổng bên trái", location: "Khu cổng", file: "Cổng Bên Trái.jpg" },
+  { title: "Lối vào bên trái", location: "Khu cổng", file: "Lối Vào Been Trái.jpg" },
+  { title: "Đường bên phải", location: "Đường vào", file: "Đường Hữu.jpg" },
+  { title: "Đường bên trái qua vòm", location: "Đường vào", file: "Đường Tả Qua Vòm.jpg" },
+  { title: "Đường tả qua vòm", location: "Đường vào", file: "Duong Tả Vòm.jpg" },
+  { title: "Chính sảnh", location: "Tiền đường & Chính điện", file: "Chính Sảnh.jpg" },
+  { title: "Gian giữa", location: "Tiền đường & Chính điện", file: "Chính.jpg" },
+  { title: "Trung tâm chính điện", location: "Tiền đường & Chính điện", file: "Giuawx.jpg" },
+  {
+    title: "Chính điện",
+    location: "Tiền đường & Chính điện",
+    file: "Chính Điện 3.jpg",
+    infoMarkers: [
+      {
+        id: "cham-khac-go",
+        title: "Chạm khắc gỗ thời Trần",
+        eyebrow: "Giá trị di sản",
+        yaw: 0,
+        pitch: -4,
+        iconType: "landmark",
+        content: [
+          "Hệ thống ván chạm khắc gỗ có niên đại thời Trần (thế kỷ 14) khắc họa các nhạc công, vũ nữ và hình tượng Phật giáo với kỹ thuật điêu luyện.",
+          "Đây là nguồn tư liệu quý cho nghiên cứu mỹ thuật cổ Việt Nam, làm nên giá trị đặc biệt của Chùa Thái Lạc.",
+        ],
+      },
+    ],
+  },
+  { title: "Gian trong chính điện", location: "Tiền đường & Chính điện", file: "4.jpg" },
+  { title: "Ban thờ bên trái", location: "Khu thờ trong chùa", file: "Chùa 1 Tả.jpg" },
+  { title: "Ban thờ chính giữa", location: "Khu thờ trong chùa", file: "Chùa 1 Giữa.jpg" },
+  { title: "Ban thờ bên phải", location: "Khu thờ trong chùa", file: "Chùa 1 Hữu.jpg" },
+  { title: "Gian trong - giữa", location: "Khu thờ trong chùa", file: "Chùa 1 Trong - Giữa.jpg" },
+  { title: "Gian trong bên trái", location: "Khu thờ trong chùa", file: "Chùa 1 Trong Tả.jpg" },
+  { title: "Hành lang bên phải", location: "Khu thờ trong chùa", file: "Hữu 2.jpg" },
+  { title: "Hành lang bên phải (tiếp)", location: "Khu thờ trong chùa", file: "Hữu 3.jpg" },
+  {
+    title: "Tượng Quan Âm",
+    location: "Ban thờ tượng",
+    file: "Tượng Quan Âm.jpg",
+    infoMarkers: [
+      {
+        id: "dai-quan-am",
+        title: "Đài Quan Âm",
+        eyebrow: "Không gian thờ tự",
+        yaw: 0,
+        pitch: -2,
+        iconType: "envelope",
+        content: [
+          "Khu vực tôn trí tượng Quan Âm Bồ Tát cùng các pho tượng La Hán, Phật — không gian chiêm bái trang nghiêm trong khuôn viên chùa.",
+        ],
+      },
+    ],
+  },
+  { title: "Tượng La Hán bên trái", location: "Ban thờ tượng", file: "La Hán Tả.jpg" },
+  { title: "Nhà thờ Phật bên phải", location: "Ban thờ tượng", file: "Nhà Phật Hữu.jpg" },
+  { title: "Ao cá Koi", location: "Cảnh quan", file: "Ao Cá Koi.jpg" },
+  { title: "Gốc ngõa bên trái", location: "Cảnh quan", file: "Gốc Ngoã Tả.jpg" },
+  { title: "Gốc ngõa bên phải", location: "Cảnh quan", file: "Gốc Ngoã Hữu.jpg" },
+  { title: "Phía sau chùa", location: "Cảnh quan", file: "Sau Chùa.jpg" },
+];
+
+const sceneId = (index: number) => `scene-${index + 1}`;
+
+const scenes: TourScene[] = seeds.map((seed, index) => {
+  const hotspots = [];
+  if (index < seeds.length - 1) {
+    hotspots.push({
+      targetId: sceneId(index + 1),
+      label: seeds[index + 1].title,
+      yaw: 0,
+      pitch: -8,
+    });
+  }
+  if (index > 0) {
+    hotspots.push({
+      targetId: sceneId(index - 1),
+      label: seeds[index - 1].title,
+      yaw: 180,
+      pitch: -8,
+    });
+  }
+
+  // Sơ đồ tuyến dạng ngoằn ngoèo: cổng ở dưới (y lớn) tiến dần lên trên (y nhỏ).
+  const progress = index / (seeds.length - 1);
+  const mapPosition = {
+    x: index % 2 === 0 ? 32 : 68,
+    y: Math.round(92 - progress * 84),
+  };
+
+  return {
+    id: sceneId(index),
+    order: String(index + 1).padStart(2, "0"),
+    title: seed.title,
+    location: seed.location,
+    image: p(seed.file),
+    initialYaw: seed.initialYaw ?? 0,
+    mapPosition,
+    hotspots,
+    infoMarkers: seed.infoMarkers,
+  };
+});
+
+const mapRoutes = scenes
+  .slice(0, -1)
+  .map((scene, index) => ({ from: scene.id, to: scenes[index + 1].id }));
+
+export const chuaThaiLacTour: Omit<TourConfig, "sceneById" | "locationGroups"> = {
+  id: "chua-thai-lac",
+  title: "Chùa Thái Lạc (Pháp Vân tự)",
+  subtitle: "Di tích quốc gia — chạm khắc gỗ thời Trần",
+  welcomeTitle: "Chùa Thái Lạc",
+  welcomeAccent: "Pháp Vân tự",
+  welcomeSubtitle:
+    "Tham quan 360° ngôi chùa cổ thờ Pháp Vân, nổi tiếng với mảng chạm khắc gỗ thời Trần.",
+  welcomeBackgroundImage: p("Chính Sảnh.jpg"),
+  welcomeCards: [
+    { image: p("Chính Diện Cổng Chùa.jpg"), label: "Cổng chùa", rotate: "-rotate-6", sceneId: "scene-1" },
+    { image: p("Tượng Quan Âm.jpg"), label: "Đài Quan Âm", rotate: "rotate-5", sceneId: "scene-20" },
+  ],
+  backgroundAudio: "", // chưa có nhạc nền; engine bỏ qua chuỗi rỗng (không render thẻ audio)
+  practicalInfo: {
+    intro: "Thông tin phục vụ tham quan và lễ chùa tại Chùa Thái Lạc (Pháp Vân tự).",
+    items: [
+      { label: "Địa chỉ", value: "Xã Như Quỳnh, tỉnh Hưng Yên." },
+      { label: "Người phụ trách", value: "Đang cập nhật." },
+      { label: "Số điện thoại", value: "Đang cập nhật." },
+      { label: "Giờ mở cửa", value: "Đón khách theo giờ hành chính và lịch sinh hoạt của nhà chùa." },
+    ],
+    notes: [
+      "Giữ trang phục lịch sự, đi nhẹ nói khẽ, không tự ý di chuyển đồ thờ.",
+      "Thông tin người phụ trách và liên hệ sẽ được cập nhật khi có dữ liệu xác thực.",
+    ],
+  },
+  scenes,
+  sceneNarration: new Map<string, string[]>(),
+  continuousNarrationGroups: [],
+  mapRoutes,
+};