Tag.js 4.0 KB

1
  1. var Tag=function(){"use strict";var n=new THREE.SphereBufferGeometry(.04,6,6),t=new THREE.MeshBasicMaterial({color:"#F12"}),i=function(i){function e(e,o){void 0===o&&(o={}),i.call(this),this.sid=e,this.position.copy(o.position);var r=new THREE.Mesh(n,t);this.add(r)}return i&&(e.__proto__=i),e.prototype=Object.create(i&&i.prototype),e.prototype.constructor=e,e}(THREE.Object3D);return function(n,t){var e=KanKan.Deferred(),o=function(){var t={TagItem:i,$name:"Tag",$html:"<div xui_tags></div> <style> [xui_tags] {\n position: absolute;\n width: 100%;\n height: 100%;\n }\n [xui_tags] > div {\n pointer-events: all;\n visibility: hidden;\n position: absolute;\n width: 48px;\n height: 48px;\n margin-left: -24px;\n margin-top: -24px;\n }\n [is-mobile] [xui_tags] > div {\n pointer-events: all;\n visibility: hidden;\n position: absolute;\n width: 32px;\n height: 32px;\n margin-left: -16px;\n margin-top: -16px;\n }\n [xui_tags] > div.visible {\n visibility: visible;\n }\n\n [xui_tags] .point {\n display: block;\n width: 48px;\n height: 48px;\n background-size: cover;\n cursor: pointer;\n }\n [is-mobile] [xui_tags] .point {\n display: block;\n width: 32px;\n height: 32px;\n background-size: cover;\n cursor: pointer;\n }\n\n [xui_tags] .point.zoom {\n animation: tag-animate-zoom 3s -1s linear infinite;\n }\n\n [xui_tags] .content .trans {\n position: absolute;\n right: 35px;\n top: 50%;\n min-width: 420px;\n min-height: 60px;\n z-index: 1000;\n transform: translateY(-50%) scale(0);\n transform-origin: center right;\n /* transition: all 0.3s cubic-bezier(0.35, 0.32, 0.65, 0.63); */\n pointer-events: none;\n padding: 0 40px 0 0;\n }\n\n [is-mobile] [xui_tags] .content .trans {\n padding: 0 0 0 0;\n left: 50%;\n top: 50%;\n right: auto;\n min-width: 1.3333rem;\n min-height: 0.8rem;\n z-index: 1000;\n transform: translate(-50%, -50%) scale(0);\n transform-origin: center center;\n border: 0.0267rem solid #000000;\n border-radius: 0.1067rem;\n\n }\n [is-mobile] [xui_tags] .content .trans.fixed {\n position: fixed;\n }\n [xui_tags] .content .trans.active {\n transform: translateY(-50%) scale(1);\n }\n [is-mobile] [xui_tags] .content .trans.active {\n transform: translate(-50%, -50%) scale(1);\n }\n [xui_tags] .content .trans .arrow {\n pointer-events: auto;\n content: '';\n position: absolute;\n top: 50%;\n right: 0;\n width: 0;\n height: 0;\n border-top: 15px solid transparent;\n border-bottom: 15px solid transparent;\n border-left: 40px solid rgba(27, 27, 28, 0.8);\n transform: translateY(-50%);\n }\n [is-mobile] [xui_tags] .content .trans .arrow {\n width: 1.0667rem;\n height: 1.0667rem;\n border-radius: 50%;\n background: rgba(27, 27, 28, 0.8);\n position: absolute;\n left: 50%;\n bottom: -1.2rem;\n top: auto;\n transform: translateX(-50%);\n border: none;\n }\n\n [is-mobile] [xui_tags] .content .trans .arrow .iconfont {\n font-size: 0.48rem;\n position: absolute;\n left: 50%;\n top: 50%;\n right: auto;\n transform: translate(-50%, -50%);\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n @keyframes tag-animate-zoom {\n 0% {\n transform: scale(1);\n }\n 50% {\n transform: scale(0.7);\n }\n 100% {\n transform: scale(1);\n }\n } </style> ",$load:function(){n.TagManager.install()}};e.resolve(t)};return n.Scene.loaded?o():n.Scene.on("loaded",o),e}}();