Library
Cổng trung tâm lưu trữ toàn bộ các thư viện CSS/JS hiệu ứng skin Pano2VR 8, bộ theo dõi thời gian tương tác (360 Tracker) và công cụ tối ưu trải nghiệm thực tế ảo thuộc hệ sinh thái 360vr.com.vn.
Hiệu ứng Skin
Dependencies (Vanilla)
Siêu nhẹ & Tối ưu
GPU Accelerated
Core Packages
Được module hóa độc lập, tối ưu hiệu năng tối đa và có thể tích hợp tức thì vào bất kỳ tour Pano2VR nào.
Bộ hiệu ứng hoạt ảnh thuần CSS và JavaScript dành riêng cho các phần tử Skin Pano2VR 8: Button, Image Hotspot, SVG Pin, Text và Rectangle. Tuyệt đối không làm lệch tọa độ ma trận 3D của Pano2VR.
Script phân tích số liệu và đo lường tương tác chuyên dụng cho Virtual Tour. Tự động thu thập thời gian xem chủ động (active visible time), số phiên, loại thiết bị mà không ảnh hưởng tới FPS.
Bộ điều khiển lập trình JavaScript Action trong Pano2VR. Cho phép trigger chuyển động, phát lại animation (replay), toggle hoặc gỡ bỏ class linh hoạt theo kịch bản tương tác người dùng.
Cài đặt & Tích hợp
Sao chép mã HTML nhúng trực tiếp hoặc sử dụng link trần CDN để đưa vào mục External Files trong Pano2VR 8.
<link rel="stylesheet" href="https://lib.360vr.com.vn/effects.css?v=1.1.5">
<script src="https://lib.360vr.com.vn/effects.js?v=1.1.5"></script><script src="https://lib.360vr.com.vn/tracker.js" data-site="auto" defer></script>https://lib.360vr.com.vn/effects.css
https://lib.360vr.com.vn/effects.js
https://lib.360vr.com.vn/tracker.js
Dán đoạn mã HTML vào file index.html của tour hoặc thêm trực tiếp Link trần vào mục External Files trong Skin Editor.
Trong Pano2VR Skin Editor, chọn phần tử Text, Image, SVG hoặc Button và nhập tên class (ví dụ fx-pulse) vào trường CSS Classes.
Điều chỉnh tốc độ, bán kính sóng hoặc màu sắc hiệu ứng thông qua các biến --fx-speed, --fx-color trực tiếp trên skin.
Kiến trúc kỹ thuật Virtual Tour
360VR Library (lib.360vr.com.vn) là nền tảng tài nguyên và mã nguồn mở nội bộ được phát triển nhằm chuẩn hóa, tối ưu hóa và làm phong phú trải nghiệm thị giác cho các dự án số hóa không gian 3D / 360 Virtual Tour do 360vr.com.vn triển khai trên toàn quốc.
🎯 Điểm khác biệt then chốt: Các thư viện animation thông thường sẽ phá vỡ thuộc tính transform của phần tử skin trong Pano2VR. 360VR Effects sử dụng thuật toán ghi nhớ ma trận tọa độ, đảm bảo 100% hotspot luôn nằm đúng vị trí thực tế trong ảnh panorama 360.
Trong Pano2VR 8, các thành phần giao diện (Skin elements) như Text, Button, Image và SVG được định vị thông qua ma trận biến đổi CSS transform: translate(...) rotate(...) scale(...) được tính toán liên tục theo thời gian thực (nhất là khi responsive trên mobile hay khi di chuyển radar, hotspot 3D).
Nếu sử dụng các thư viện CSS Animation thông thường (như Animate.css), việc ghi đè thuộc tính transform sẽ làm mất toàn bộ tọa độ định vị gốc của phần tử, dẫn tới tình trạng hotspot bay lệch khỏi vị trí thực tế trong ảnh panorama. 360VR Effects giải quyết triệt để bài toán này bằng việc kết hợp logic trong effects.js để tự động ghi nhớ ma trận transform ban đầu và lồng ghép keyframe một cách mượt mà.
fx-pulse, fx-bounce, fx-glow, fx-ripple-dot giúp làm nổi bật điểm neo điều hướng giữa các không gian.fx-ripple-x (gợn sóng elip mặt sàn) và fx-ripple-top (sóng tròn nhìn từ trên xuống) giúp pin neo chính xác tại mặt đất.fx-fade-in, fx-fade-up, fx-zoom-in, fx-blur-in tối ưu cho bảng thông tin, pop-up giới thiệu sản phẩm.fx-grow, fx-lift, fx-press, fx-wobble tăng cường tính phản hồi khi người dùng hover hoặc click vào nút điều khiển.
Khác với các công cụ web analytics thông thường, tracker.js được thiết kế riêng cho đặc thù của Virtual Tour:
Navigator.sendBeacon, không tiêu tốn tài nguyên luồng chính của WebGL.