{"id":5566,"date":"2025-09-29T10:24:07","date_gmt":"2025-09-29T03:24:07","guid":{"rendered":"https:\/\/posmesg.com\/?page_id=5566"},"modified":"2025-09-29T10:34:41","modified_gmt":"2025-09-29T03:34:41","slug":"blue-bull-360-views","status":"publish","type":"page","link":"https:\/\/posmesg.com\/vn\/blue-bull-360-views\/","title":{"rendered":"Blue Bull – 360 Views"},"content":{"rendered":"
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n BlueBull 360\u00b0 Virtual Showroom - posmesg.com<\/title>\r\n <link rel=\"stylesheet\" href=\"https:\/\/posmesg.com\/wp-content\/themes\/cargozen\/360_view\/style.css\">\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n <!-- Fix process error -->\r\n <script>window.process = { env: {} };<\/script>\r\n <!-- Three.js r105 and Panolens.js (compatible versions) -->\r\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/three.js\/105\/three.min.js\" integrity=\"sha512-uWKImujbh9CwNa8Eey5s8vlHDB4o1HhrVszkympkm5ciYTnUEQv3t4QHU02CUqPtdKTg62FsHo12x63q6u0wmg==\" crossorigin=\"anonymous\" referrerpolicy=\"no-referrer\"><\/script>\r\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/panolens@0.11.0\/build\/panolens.min.js\"><\/script>\r\n<\/head>\r\n<body>\r\n <!-- Main Container -->\r\n <div class=\"viewer-container\">\r\n <!-- 360\u00b0 Panolens Container -->\r\n <div id=\"panorama-container\"><\/div>\r\n \r\n <!-- Loading Screen -->\r\n <div class=\"loading-screen\" id=\"loadingScreen\">\r\n <div class=\"loading-spinner\"><\/div>\r\n <p>Loading Virtual Showroom...<\/p>\r\n <\/div>\r\n \r\n <!-- Top Navigation Bar -->\r\n <div class=\"top-nav\">\r\n <div class=\"nav-left\">\r\n <button class=\"nav-btn back-btn\" id=\"backBtn\">\r\n <svg width=\"20\" height=\"20\" viewbox=\"0 0 24 24\" fill=\"none\">\r\n <path d=\"M19 12H5M12 19l-7-7 7-7\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\r\n <\/svg>\r\n <\/button>\r\n <div class=\"location-info\">\r\n <h3>BlueBull Virtual Showroom 3D<\/h3>\r\n <p>360\u00b0 Panorama Experience<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"nav-right\">\r\n <button class=\"nav-btn fullscreen-btn\" id=\"fullscreenBtn\">360\u00b0 Panorama<\/button>\r\n <span class=\"nav-text\">Virtual Showroom<\/span>\r\n <\/div>\r\n <\/div>\r\n \r\n <!-- Side Control Panel -->\r\n <div class=\"side-panel\">\r\n <!-- Scene Thumbnails with Navigation -->\r\n <div class=\"thumbnails-container\">\r\n <button class=\"thumbnail-nav-btn\" id=\"thumbUpBtn\">\r\n <svg width=\"16\" height=\"16\" viewbox=\"0 0 24 24\" fill=\"none\">\r\n <polyline points=\"18 15 12 9 6 15\" stroke=\"currentColor\" stroke-width=\"2\"\/>\r\n <\/svg>\r\n <\/button>\r\n \r\n <div class=\"thumbnails-viewport\">\r\n <div class=\"scene-thumbnails\" id=\"sceneThumbnails\">\r\n <div class=\"thumbnail active\" data-scene=\"0\">\r\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1557971370-e7298ee473fb\" alt=\"Modern Office Interior\" title=\"\">\r\n <div class=\"thumbnail-overlay\">\r\n <span class=\"thumbnail-number\">1<\/span>\r\n <\/div>\r\n <\/div>\r\n <div class=\"thumbnail\" data-scene=\"1\">\r\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1557971370-e7298ee473fb\" alt=\"Luxury Living Room\" title=\"\">\r\n <div class=\"thumbnail-overlay\">\r\n <span class=\"thumbnail-number\">2<\/span>\r\n <\/div>\r\n <\/div>\r\n <div class=\"thumbnail\" data-scene=\"2\">\r\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1505252772853-08ed4d526ceb\" alt=\"Contemporary Kitchen\" title=\"\">\r\n <div class=\"thumbnail-overlay\">\r\n <span class=\"thumbnail-number\">3<\/span>\r\n <\/div>\r\n <\/div>\r\n <!-- Add more thumbnails for testing scroll -->\r\n <div class=\"thumbnail\" data-scene=\"3\">\r\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1590930298432-4567af25e674\" alt=\"Minimalist Bedroom\" title=\"\">\r\n <div class=\"thumbnail-overlay\">\r\n <span class=\"thumbnail-number\">4<\/span>\r\n <\/div>\r\n <\/div>\r\n <div class=\"thumbnail\" data-scene=\"4\">\r\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1625015531264-43c3fce8c792\" alt=\"Executive Conference Room\" title=\"\">\r\n <div class=\"thumbnail-overlay\">\r\n <span class=\"thumbnail-number\">5<\/span>\r\n <\/div>\r\n <\/div>\r\n <div class=\"thumbnail\" data-scene=\"5\">\r\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1594445925657-fae9ef11aeea\" alt=\"Stylish Lounge Area\" title=\"\">\r\n <div class=\"thumbnail-overlay\">\r\n <span class=\"thumbnail-number\">6<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <button class=\"thumbnail-nav-btn\" id=\"thumbDownBtn\">\r\n <svg width=\"16\" height=\"16\" viewbox=\"0 0 24 24\" fill=\"none\">\r\n <polyline points=\"6 9 12 15 18 9\" stroke=\"currentColor\" stroke-width=\"2\"\/>\r\n <\/svg>\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n \r\n <!-- Bottom Control Bar -->\r\n <div class=\"bottom-controls\">\r\n <div class=\"controls-left\">\r\n <button class=\"control-btn\" id=\"imageToPanoBtn\">\r\n <svg width=\"18\" height=\"18\" viewbox=\"0 0 24 24\" fill=\"none\">\r\n <rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\" ry=\"2\" stroke=\"currentColor\" stroke-width=\"2\"\/>\r\n <circle cx=\"8.5\" cy=\"8.5\" r=\"1.5\" stroke=\"currentColor\" stroke-width=\"2\"\/>\r\n <polyline points=\"21,15 16,10 5,21\" stroke=\"currentColor\" stroke-width=\"2\"\/>\r\n <\/svg>\r\n <span>Image to Panorama<\/span>\r\n <\/button>\r\n <button class=\"control-btn\" id=\"backgroundMusicBtn\">\r\n <svg width=\"18\" height=\"18\" viewbox=\"0 0 24 24\" fill=\"none\">\r\n <path d=\"M9 18V5l12-2v13\" stroke=\"currentColor\" stroke-width=\"2\"\/>\r\n <circle cx=\"6\" cy=\"18\" r=\"3\" stroke=\"currentColor\" stroke-width=\"2\"\/>\r\n <circle cx=\"18\" cy=\"16\" r=\"3\" stroke=\"currentColor\" stroke-width=\"2\"\/>\r\n <\/svg>\r\n <span>Background Music<\/span>\r\n <\/button>\r\n <\/div>\r\n \r\n <div class=\"controls-center\">\r\n <div class=\"description-box\">\r\n <p>Experience BlueBull's immersive 360\u00b0 virtual showroom. Navigate through our premium collection with cutting-edge panoramic technology. Discover products in an interactive 3D environment.<\/p>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"controls-right\">\r\n <button class=\"control-btn primary\" id=\"autoPlayBtn\">\r\n <svg width=\"18\" height=\"18\" viewbox=\"0 0 24 24\" fill=\"none\">\r\n <circle cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"2\"\/>\r\n <polygon points=\"10 8 16 12 10 16 10 8\" fill=\"currentColor\"\/>\r\n <\/svg>\r\n <span>Auto Play<\/span>\r\n <\/button>\r\n <button class=\"control-btn\" id=\"shareBtn\">\r\n <svg width=\"18\" height=\"18\" viewbox=\"0 0 24 24\" fill=\"none\">\r\n <circle cx=\"18\" cy=\"5\" r=\"3\" stroke=\"currentColor\" stroke-width=\"2\"\/>\r\n <circle cx=\"6\" cy=\"12\" r=\"3\" stroke=\"currentColor\" stroke-width=\"2\"\/>\r\n <circle cx=\"18\" cy=\"19\" r=\"3\" stroke=\"currentColor\" stroke-width=\"2\"\/>\r\n <line x1=\"8.59\" y1=\"13.51\" x2=\"15.42\" y2=\"17.49\" stroke=\"currentColor\" stroke-width=\"2\"\/>\r\n <line x1=\"15.41\" y1=\"6.51\" x2=\"8.59\" y2=\"10.49\" stroke=\"currentColor\" stroke-width=\"2\"\/>\r\n <\/svg>\r\n <span>Share<\/span>\r\n <\/button>\r\n <button class=\"control-btn\" id=\"downloadBtn\">\r\n <svg width=\"18\" height=\"18\" viewbox=\"0 0 24 24\" fill=\"none\">\r\n <path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\" stroke=\"currentColor\" stroke-width=\"2\"\/>\r\n <polyline points=\"7,10 12,15 17,10\" stroke=\"currentColor\" stroke-width=\"2\"\/>\r\n <line x1=\"12\" y1=\"15\" x2=\"12\" y2=\"3\" stroke=\"currentColor\" stroke-width=\"2\"\/>\r\n <\/svg>\r\n <span>Download<\/span>\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n \r\n <!-- Info Panel -->\r\n <div class=\"info-panel\" id=\"infoPanel\">\r\n <div class=\"info-content\">\r\n <h4>BlueBull Virtual Showroom<\/h4>\r\n <p>Welcome to BlueBull's immersive virtual showroom experience. Our advanced 3D panoramic technology allows you to explore premium products in a fully interactive environment. Navigate by dragging your mouse or touch gestures on mobile devices.<\/p>\r\n \r\n <div class=\"info-stats\">\r\n <div class=\"stat-item\">\r\n <span class=\"stat-number\">250+<\/span>\r\n <span class=\"stat-label\">S\u1ea3n ph\u1ea9m<\/span>\r\n <\/div>\r\n <div class=\"stat-item\">\r\n <span class=\"stat-number\">15<\/span>\r\n <span class=\"stat-label\">Hotspots<\/span>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"info-controls\">\r\n <button class=\"info-btn\">View Catalog<\/button>\r\n <button class=\"info-btn\">Li\u00ean h\u1ec7<\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <!-- Scene Info Display -->\r\n <div class=\"scene-info-display\" id=\"sceneInfoDisplay\">\r\n <div class=\"scene-info-content\">\r\n <h3 id=\"sceneTitle\">BlueBull Showroom Main<\/h3>\r\n <p id=\"sceneDescription\">Welcome to our main showroom featuring premium products and interactive displays.<\/p>\r\n <div class=\"scene-stats\">\r\n <div class=\"stat-item\">\r\n <span class=\"stat-number\" id=\"sceneProducts\">45<\/span>\r\n <span class=\"stat-label\">S\u1ea3n ph\u1ea9m<\/span>\r\n <\/div>\r\n <div class=\"stat-item\">\r\n <span class=\"stat-number\" id=\"sceneArea\">2500<\/span>\r\n <span class=\"stat-label\">sq ft<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <!-- Image to Panorama Modal -->\r\n <div class=\"modal\" id=\"imagePanoModal\">\r\n <div class=\"modal-content\">\r\n <div class=\"modal-header\">\r\n <h3>Image to Panorama<\/h3>\r\n <button class=\"modal-close\" id=\"modalClose\">\r\n <svg width=\"24\" height=\"24\" viewbox=\"0 0 24 24\" fill=\"none\">\r\n <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\" stroke=\"currentColor\" stroke-width=\"2\"\/>\r\n <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\" stroke=\"currentColor\" stroke-width=\"2\"\/>\r\n <\/svg>\r\n <\/button>\r\n <\/div>\r\n <div class=\"modal-body\">\r\n <div class=\"upload-area\" id=\"uploadArea\">\r\n <svg width=\"48\" height=\"48\" viewbox=\"0 0 24 24\" fill=\"none\">\r\n <rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\" ry=\"2\" stroke=\"currentColor\" stroke-width=\"2\"\/>\r\n <circle cx=\"8.5\" cy=\"8.5\" r=\"1.5\" stroke=\"currentColor\" stroke-width=\"2\"\/>\r\n <polyline points=\"21,15 16,10 5,21\" stroke=\"currentColor\" stroke-width=\"2\"\/>\r\n <\/svg>\r\n <h4>Upload Image for 360\u00b0 Panorama<\/h4>\r\n <p>Drop your image here or click to browse<\/p>\r\n <input type=\"file\" id=\"imageInput\" accept=\"image\/*\" hidden>\r\n <\/div>\r\n <div class=\"feature-note\">\r\n <div class=\"note-icon\">\ud83d\udea7<\/div>\r\n <div class=\"note-content\">\r\n <h4>Coming Soon!<\/h4>\r\n <p>This feature will convert your regular images into immersive 360\u00b0 panoramic experiences using advanced AI technology.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <script src=\"https:\/\/posmesg.com\/wp-content\/themes\/cargozen\/360_view\/script.js\"><\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>BlueBull 360\u00b0 Virtual Showroom – posmesg.com Loading Virtual Showroom… BlueBull Virtual Showroom 3D 360\u00b0 Panorama Experience 360\u00b0 Panorama Virtual Showroom 1 2 3 4 5 6 Image to Panorama Background Music Experience BlueBull’s immersive 360\u00b0 virtual showroom. Navigate through our premium collection with cutting-edge panoramic technology. Discover products in an interactive 3D environment. Auto Play…<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-5566","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/posmesg.com\/vn\/wp-json\/wp\/v2\/pages\/5566","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/posmesg.com\/vn\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/posmesg.com\/vn\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/posmesg.com\/vn\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/posmesg.com\/vn\/wp-json\/wp\/v2\/comments?post=5566"}],"version-history":[{"count":0,"href":"https:\/\/posmesg.com\/vn\/wp-json\/wp\/v2\/pages\/5566\/revisions"}],"wp:attachment":[{"href":"https:\/\/posmesg.com\/vn\/wp-json\/wp\/v2\/media?parent=5566"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}