Add new Lottie animation for Call Center 3 with multiple layers and transformations
This commit is contained in:
tuyenio
@@ -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,
|
||||
};
|
||||
Reference in New Issue
Block a user