360 view image library

2025-07-31

🎥 Gợi ý thư viện View360 có thể thêm Text, Hình, YouTube

Nếu bạn đang tìm một thư viện 360 viewer có thể:

• ✅ Hiển thị ảnh panorama (360°)
• 📝 Thêm chữ (text)
• 🖼️ Thêm hình ảnh
• 📺 Thêm video YouTube vào trong không gian 360°

Thì các thư viện sau là những lựa chọn tốt và phổ biến:

🥇 Marzipano – Tốt, nhẹ, mã nguồn mở

✅ Ưu điểm:

• Hỗ trợ ảnh 360° dạng equirectangular và cubemap.
• Có thể thêm hotspot để hiển thị text, ảnh, YouTube, v.v.
• Rất nhẹ và dễ dùng, không cần WebGL phức tạp như Three.js.

💡 Demo hotspot YouTube:

viewer.createHotspot(hotspotElement, { yaw: 1.5, pitch: 0.1 });

Với hotspotElement là 1 <div> chứa text, ảnh hoặc iframe YouTube.

🥈 PhotoSphere Viewer – Cực đẹp, có plugin hỗ trợ

✅ Ưu điểm:

• UI đẹp.
• Plugin hỗ trợ rất nhiều: markers, gallery, transitions.
• Dễ tích hợp text, ảnh, video, YouTube bằng marker.

📦 Cài đặt:

npm install photo-sphere-viewer

💡 Thêm marker YouTube:

viewer.addMarker({
  id: 'video1',
  tooltip: 'Xem video',
  content: '<iframe width="300" height="200" src="https://www.youtube.com/embed/abc123" frameborder="0" allowfullscreen></iframe>',
  latitude: 0.2,
  longitude: 0.5,
});

🥉 three.js + panolens.js – Cực mạnh, chuyên nghiệp

Nếu bạn muốn xây dựng 1 trải nghiệm 360° tương tác phức tạp và tùy biến cao → dùng Panolens.js kết hợp three.js.

✅ Ưu điểm:

• Rất linh hoạt: thêm hotspot, camera, hoạt cảnh, văn bản, video, hình ảnh, v.v.
• Hỗ trợ WebVR / WebXR.

💡 Thêm YouTube vào hotspot:

const infospot = new PANOLENS.Infospot(300, PANOLENS.DataImage.Info);
infospot.position.set(5000, 0, 0);
infospot.setHTML('<iframe width="300" height="200" src="https://www.youtube.com/embed/abc123" frameborder="0"></iframe>');
panorama.add(infospot);

🔍 Tổng kết:

👉 Bạn muốn mình gợi ý thêm demo cụ thể cho thư viện nào không?