Hot.js 66 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349135013511352135313541355135613571358135913601361136213631364136513661367136813691370137113721373137413751376137713781379138013811382138313841385138613871388138913901391139213931394139513961397139813991400140114021403140414051406140714081409141014111412141314141415141614171418141914201421142214231424142514261427142814291430143114321433143414351436143714381439144014411442144314441445144614471448144914501451145214531454145514561457145814591460146114621463146414651466146714681469147014711472147314741475147614771478147914801481148214831484148514861487148814891490149114921493149414951496149714981499150015011502150315041505150615071508150915101511151215131514151515161517151815191520152115221523152415251526152715281529153015311532153315341535153615371538153915401541154215431544154515461547154815491550155115521553155415551556155715581559156015611562156315641565156615671568156915701571157215731574157515761577157815791580158115821583158415851586158715881589159015911592159315941595159615971598159916001601160216031604160516061607160816091610161116121613161416151616161716181619162016211622162316241625162616271628162916301631163216331634163516361637163816391640164116421643164416451646164716481649165016511652165316541655165616571658165916601661166216631664166516661667166816691670167116721673167416751676167716781679168016811682168316841685168616871688168916901691169216931694169516961697169816991700170117021703170417051706170717081709171017111712171317141715171617171718171917201721172217231724172517261727172817291730173117321733173417351736173717381739174017411742174317441745174617471748174917501751175217531754175517561757175817591760176117621763176417651766176717681769177017711772177317741775177617771778177917801781178217831784
  1. //合并热点和展览
  2. g_currentHot = null
  3. const playVideoWhenFlyOut = false
  4. const playCountMax = 2;//同时可播放的最大个数
  5. window.initHot = function(model){
  6. var objLoader = new THREE.OBJLoader()
  7. var _planeGeometry = new THREE.PlaneGeometry(1,1)
  8. var _boxGeometry = new THREE.BoxBufferGeometry(1,1,1)
  9. {//ie的mesh 加了polygonOffset也是会重叠。所以去掉前面的face: (但是突然ie又播放不了videoTexture)
  10. var newIndex = [..._boxGeometry.index.array]
  11. newIndex.splice(4 * 6, 12)
  12. _boxGeometry.setIndex(new THREE.BufferAttribute(new Uint16Array(newIndex),1))
  13. }
  14. var originPhotoCount = photoLoaded = originModelCount = modelLoaded = 0;
  15. var defaultTex1 = Texture.load(g_HotImage.point);
  16. var defaultTex2 = Texture.load(g_HotImage.point2)
  17. /* var _boxMat = new THREE.MeshBasicMaterial({
  18. color: "#eeeeee",
  19. transparent: !0,
  20. opacity: 0.8
  21. }) */
  22. var _boxMat = new THREE.MeshPhongMaterial({
  23. color: "#eeeeee",
  24. transparent: !0,
  25. opacity: 0.8,
  26. side:THREE.DoubleSide
  27. })
  28. var autoSizeInfo = /* {width2d:50}// */{minSize : 120, maxSize : 600, nearBound : 1 , farBound : 15}
  29. var hotGroup = new THREE.Object3D; hotGroup.name = "hotGroup"
  30. model.add(hotGroup); model.hotGroup = hotGroup
  31. var animateTexSrcs = {}
  32. var getLink = function(link){
  33. var src = '';
  34. var r = link.substring(link.indexOf("html") + 4)
  35. , o = "en" == manage.number("lang") ? "&lang=" + manage.number("lang") : "";
  36. -1 == r.indexOf("?") ? src = link + "?time=" + randomTime().getTime() + "&id=" + window.number + o : src = link + "&time=" + randomTime().getTime() + "&id=" + window.number + o
  37. return src
  38. }
  39. var removeSrcPostMark = function(url){//去除texture.load时自动加上的'?'
  40. var index = url.indexOf('?')
  41. if(index>-1){
  42. return url.slice(0, index)
  43. }else return url
  44. }
  45. {//get plane Bound
  46. var planeBound = new THREE.Box3()
  47. var cornerPoint = [
  48. new THREE.Vector3(-0.5, 0.5, 0),
  49. new THREE.Vector3(0.5, 0.5, 0),
  50. new THREE.Vector3(0.5, -0.5, 0),
  51. new THREE.Vector3(-0.5, -0.5, 0),
  52. ]
  53. cornerPoint.forEach(e=>{
  54. planeBound.expandByPoint(e)
  55. })
  56. }
  57. var shineMats = [];
  58. var getShineMat = function(texture1, texture2){
  59. var mat = shineMats.find(e=>e.uniforms.texture1.value == texture1 && e.uniforms.texture2.value == texture2)
  60. if(mat) return mat
  61. else{
  62. var mat = new THREE.ShaderMaterial({
  63. uniforms: {
  64. color: {
  65. type: "c",
  66. value: new THREE.Color(16720384)
  67. },
  68. opac: {
  69. type: "f",
  70. value: 0
  71. },
  72. texture1: {
  73. type: "t",
  74. value: texture1
  75. },
  76. texture2: {
  77. type: "t",
  78. value: texture2
  79. }
  80. },
  81. vertexShader: "varying vec2 vUv;\n\nvoid main() {\n\n vUv = uv ;\n gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );\n\n}\n",
  82. fragmentShader: "varying vec3 vNormal;\n\nvarying vec2 vUv;\n\nuniform float opac;\n\nuniform vec3 color;\n\nuniform sampler2D texture1;\n\nuniform sampler2D texture2;\n\nvoid main() {\n\nvec4 tcolor1 = texture2D( texture1, vUv );\n\nvec4 tcolor2 = texture2D( texture2, vUv );\n\ngl_FragColor = mix(tcolor1,tcolor2 ,opac) + tcolor2*0.2; }\n"
  83. ,transparent: !0
  84. })
  85. shineMats.push(mat)
  86. return mat
  87. }
  88. }
  89. var modelGeos = [];
  90. var getModelGeo = function(url){
  91. var geo = modelGeos.find(e=>e.url = url )
  92. if(geo) return geo
  93. else{
  94. var geo = null;
  95. geo.url = url
  96. }
  97. }
  98. class Hot extends THREE.Object3D{
  99. constructor(info, source){
  100. super()
  101. this.sid = info.sid;
  102. this.preDeal(info, source)// source:旧版来源
  103. this.info = info
  104. this.cornerPoints = []
  105. this.build(info);
  106. this.name = "hot_" + this.sid ;
  107. model.hots[info.sid] = this
  108. }
  109. build(info) {
  110. /* this.changeMaterial(new THREE.MeshBasicMaterial({
  111. color: "#00c8af",
  112. opacity: 0.4,
  113. transparent: !0,
  114. polygonOffset: true,
  115. //是否开启多边形偏移 //ie不开启时blank也不会闪烁
  116. polygonOffsetFactor: -0.9,
  117. //多边形偏移因子
  118. polygonOffsetUnits: -4.0,
  119. //多边形偏移单位
  120. }))
  121. if(!info.objSrc){
  122. this.addPlane()
  123. if (info.hasBox) this.addBox(true)
  124. }else{
  125. this.addModel(new THREE.Mesh())//暂时创建个空的
  126. } */
  127. hotGroup.add(this)
  128. this.setTitleElem()
  129. this.setFromInfo(info)
  130. }
  131. setFromInfo(info, media, objObject) {
  132. //1 恢复到编辑之前 2 初始加载
  133. var plane = this.plane;
  134. /* var transformAtPanos = {}
  135. for(var i in info.transformAtPanos){
  136. transformAtPanos[i] = {//只保留一个位移,主要原因是大小变化和热点大小设置冲突了, isSprite和qutaernion衝突
  137. pos : info.transformAtPanos[i].pos && info.transformAtPanos[i].pos.clone(),
  138. //qua : info.transformAtPanos[i].qua && info.transformAtPanos[i].qua.clone(),
  139. }
  140. }
  141. this.transformAtPanos = transformAtPanos */
  142. //在每个漫游点独立设置的position。
  143. var curPanoTransform = this.info.transformAtPanos[ getTransformSid()] || {}
  144. //没有单独设置position的漫游点使用的position
  145. this.position.copy(curPanoTransform.pos || info.position)
  146. this.rotation.copy(info.rotation)
  147. this.scale.copy(info.scale)
  148. this.changeTexType(info.texType, media)
  149. if(!info.objSrc){
  150. this.addPlane()
  151. if (!!this.hasBox != !!info.hasBox) {
  152. this.addBox(!this.hasBox);
  153. }
  154. }else{
  155. this.addModel(objObject || new THREE.Mesh())//暂时创建个空的
  156. }
  157. this.updateMatrixWorld()
  158. /* if(!this.info.visiblePanos){//移到model.build时,在collider建好之后
  159. this.getVisiblePanos()
  160. } */
  161. {//gif
  162. if(this.animation){
  163. GifTexDeal.remove(this.animation)
  164. }
  165. if(this.info.animateInfo && this.material_.map){
  166. this.animation = GifTexDeal.addAnimation(this.material_.map, this, this.info.animateInfo, this.sid )
  167. this.visible && this.inSight() && GifTexDeal.start(this.animation)
  168. }
  169. }
  170. /* if(this.info.modelBound){
  171. this.mesh.updateMatrixWorld()
  172. this.mesh.boxHelper2 = new THREE.Box3Helper( new THREE.Box3().copy(this.info.modelBound.bound).applyMatrix4(this.mesh.matrixWorld), new THREE.Color("#00aaee"));
  173. model.add(this.mesh.boxHelper2)
  174. }else{
  175. var bound = new THREE.Box3()
  176. var cornerPoint = [
  177. new THREE.Vector3(-0.5, 0.5, 0),
  178. new THREE.Vector3(0.5, 0.5, 0),
  179. new THREE.Vector3(0.5, -0.5, 0),
  180. new THREE.Vector3(-0.5, -0.5, 0),
  181. ]
  182. cornerPoint.forEach(e=>{
  183. bound.expandByPoint(e)
  184. })
  185. this.mesh.updateMatrixWorld()
  186. this.mesh.boxHelper2 = new THREE.Box3Helper( bound.applyMatrix4(this.mesh.matrixWorld), new THREE.Color("#00aaee"));
  187. model.add(this.mesh.boxHelper2)
  188. } */
  189. }
  190. changeTexType(texType, media){
  191. var plane = this.plane;
  192. if( this.texType != texType || media == 'clear'){
  193. //删除旧的
  194. if(this.texType == 'shine'){
  195. /* this.material_.uniforms.texture1.value.dispose()
  196. this.material_.uniforms.texture2.value.dispose() */ //为了恢复 不删
  197. }else{
  198. //this.material_.map.dispose()
  199. if(this.texType == 'video'){
  200. this.texMedia && this.texMedia.pause()
  201. }else{
  202. }
  203. }
  204. if(this.material_ && !hotGroup.children.find(e=>e!=this && e.material_ == this.material_ )){
  205. this.material_.dispose()
  206. }
  207. //添加新的
  208. if(texType == 'shine'){
  209. }else{
  210. this.changeMaterial(new THREE.MeshBasicMaterial({
  211. color: "#00c8af",
  212. opacity: 0.4,
  213. transparent: !0,
  214. polygonOffset: true,
  215. //是否开启多边形偏移 //ie不开启时blank也不会闪烁
  216. polygonOffsetFactor: -0.9,
  217. //多边形偏移因子
  218. polygonOffsetUnits: -4.0,
  219. //多边形偏移单位
  220. }))
  221. if(texType == 'video'){
  222. }else{
  223. }
  224. }
  225. }
  226. this.texType = texType
  227. if(media == 'clear'){
  228. this.material_.opacity = 0.4;
  229. this.texMedia = null
  230. return
  231. }
  232. if(texType == 'video'){//视频不能共用一个,否则会一起播放暂停
  233. var video
  234. if(media){
  235. video = media
  236. }else{
  237. if(!this.info.texSrc)return
  238. var video = $(`<video controls="controls" loop autoplay x5-playsinline="" webkit-playsinline="true" playsinline="true" controlslist="nodownload"></video>`)[0]
  239. if(window.isEdit) video.src = manage.dealURL(this.info.texSrc);
  240. video.name = this.info.fileName
  241. }
  242. video.setAttribute("crossOrigin", 'Anonymous')//要在src设置好前解决跨域
  243. $(video).on('contextmenu', function() {
  244. return false;
  245. });//禁止右键点击出
  246. this.texMedia = video;
  247. video.oncanplaythrough = ()=> {
  248. if(this.texMedia == video){
  249. this.material_.map.needsUpdate = !0
  250. this.update(player)
  251. //video.play()
  252. }
  253. }
  254. video.volume = 0
  255. video.muted = true
  256. video.currentTime = 0
  257. this.material_.map = new THREE.VideoTexture(video)
  258. this.material_.map.wrapS = this.material_.map.wrapT = THREE.ClampToEdgeWrapping;
  259. this.material_.map.generateMipmaps = true;
  260. }else if(texType == 'photo'){
  261. if(media){
  262. this.texMedia = media;
  263. this.info.texSrc = media.src;
  264. this.material_.map = new THREE.Texture(); //texture也不能共用一个,因为有的会有动画,就不一样
  265. this.material_.map.image = media //image可以共用
  266. this.material_.map.needsUpdate = !0
  267. }else{
  268. if(!this.info.texSrc)return
  269. this._loadDones = []
  270. this.material_.opacity = 0.1;
  271. }
  272. }else if(texType == 'shine'){
  273. if(media){
  274. this.changeShineTex(media)
  275. }else{
  276. this.styleImg = /* this.styleImg || */ [];
  277. if(this.info.styleImg){
  278. this.styleImg = this.info.styleImg.map((src)=>{
  279. return {src:/* manage.dealURL( */src } //如果要dealURL,在predeal里
  280. })
  281. }
  282. this.changeShineTex(this.styleImg)
  283. }
  284. this.info.texSrc = null
  285. }
  286. if(this.material_.map){
  287. /* this.material_.map.minFilter = THREE.LinearFilter;
  288. this.material_.map.magFilter = THREE.LinearFilter; */
  289. dealMap(this.material_.map);
  290. this.material_.color.set("#FFFFFF");
  291. this.material_.opacity = 1
  292. this.material_.needsUpdate = true
  293. }
  294. }
  295. changeShineTex(styleImg){
  296. styleImg = styleImg || this.styleImg
  297. var tex1, tex2
  298. if(styleImg.length){
  299. tex1 = Texture.load(styleImg[0].src);
  300. tex2 = Texture.load(styleImg[1]&&styleImg[1].src || styleImg[0].src);
  301. }else{
  302. tex1 = defaultTex1;
  303. tex2 = defaultTex2;
  304. }
  305. this.changeMaterial(getShineMat(tex1, tex2))
  306. this.styleImg = styleImg
  307. this.info.styleImg = styleImg.map(img=>img.src)
  308. }
  309. changeMaterial(mat){
  310. this.material_ = mat;
  311. this.mesh && this.mesh.traverse((mesh)=>{
  312. if(mesh.material && !(mesh instanceof THREE.Box3Helper)){
  313. mesh.material = this.material_;
  314. }
  315. })
  316. }
  317. /*
  318. actionType: "common"
  319. infoAttribute: {images: [], styleImg: [], model: [], video: [], bgName: "background", iframe: [], title: "11",…}
  320. bgName: "background"
  321. content: "111"
  322. iframe: []
  323. images: []
  324. model: []
  325. styleImg: []
  326. title: "11"
  327. video: []
  328. isSprite: 0
  329. link: "https://www.4dmodel.com/SuperTwo/hot_online1/index.html#/?m=EDwn769489868"
  330. linkType: "common"
  331. noAction: 0
  332. order: 4
  333. position: {x: -4.238, y: 1.32, z: -0.648}
  334. rotation: {x: 0, y: 0.018105110200249575, z: 0}
  335. transformAtPanos: {}
  336. IO4Kq7494332: {actionTy
  337. depth: 0.08
  338. file: "https://super.4dage.com/data/TEST/edit/20200805_172635119.mp4"
  339. hasBox: 1
  340. height: 0.7289
  341. media: ["video"]
  342. pos: [-5.562, 1.349, 1.994]
  343. qua: [0, 0.70672, 0, 0.70749]
  344. sid: "1596619585929"
  345. transformAtPanos: {,…} */
  346. preDeal(info, source){// source:来源
  347. var convertValue = function(v ,Type){
  348. var value;
  349. if(v instanceof Array){
  350. v.forEach((v1)=>{v1 = parseFloat(v1)})
  351. value = new Type().fromArray(v);
  352. }else{
  353. if(!(v instanceof Type)){
  354. for(let i in v){v[i] = parseFloat(v[i])}
  355. value = new Type().copy(v);
  356. }else{
  357. value = v
  358. }
  359. }
  360. return value
  361. }
  362. if (!info.transformAtPanos) info.transformAtPanos = {}
  363. if(source == 'byHot'){
  364. var infoAttribute = info.infoAttribute || {}
  365. info.title = infoAttribute.title || info.title
  366. info.model = infoAttribute.model || info.model || [] //模型链接
  367. info.images = infoAttribute.images || info.images || []
  368. info.video = infoAttribute.video || info.video || []
  369. info.bgName = infoAttribute.bgName || info.bgName
  370. info.backgroundMusic = info.backgroundMusic || info.backgroundMusic
  371. info.iframe = infoAttribute.iframe || info.iframe || []
  372. info.styleImg = infoAttribute.styleImg || info.styleImg || []
  373. info.content = infoAttribute.content || info.content
  374. {
  375. let action = CloneObject(settings.hotClickEvent.shine);
  376. if(info.actionType == 'noAction' || info.noAction){
  377. action.examine = false,
  378. action.openHot = false
  379. }else if(info.actionType == 'dontExam'){
  380. action.examine = false
  381. }
  382. info.actionType = action
  383. }
  384. if(info.quaternion){
  385. info.rotation = new THREE.Euler().setFromVector3(convertValue(info.quaternion, THREE.Quaternion ))
  386. }else{
  387. info.rotation = new THREE.Euler().setFromVector3(convertValue(info.rotation, THREE.Vector3 )) //热点的旧数据很多是字符串
  388. }
  389. var s = Hot.getDefaulScale(info.hotIconScale) //旧版的大小,统一转换成新版
  390. info.scale = new THREE.Vector3(s,s,0.02)
  391. delete info.infoAttribute;
  392. /* for (let i in this.transformAtPanos) {
  393. info.transformAtPanos[i].pos = new THREE.Vector3().fromArray(info.transformAtPanos[i].pos)
  394. info.transformAtPanos[i].qua && (info.transformAtPanos[i].qua = new THREE.Quaternion().fromArray(info.transformAtPanos[i].qua))
  395. } */
  396. info.texType = "shine"
  397. }else{
  398. if(source == 'byOverlay'){
  399. info.texType = info.media[0]
  400. //info.title = info.texType == 'video'?'视频':'图片'
  401. info.texSrc = info.file
  402. info.actionType = CloneObject(settings.hotClickEvent[info.texType]);//给一个默认
  403. delete info.media
  404. info.rotation = new THREE.Euler().setFromQuaternion(convertValue(info.qua, THREE.Quaternion ))
  405. info.position = info.pos
  406. delete info.pos;
  407. delete info.qua;
  408. let a = info.texSrc.split('/');
  409. info.fileName = a.pop()
  410. info.scale = new THREE.Vector3(
  411. info.width,
  412. info.height,
  413. info.depth
  414. )
  415. delete info.width; delete info.height; delete info.depth;
  416. delete info.file
  417. }else{
  418. info.rotation = new THREE.Euler().fromArray(info.rotation)//.setFromVector3(info.rotation)
  419. }
  420. info.model = info.model || [] //模型链接
  421. info.images = info.images || []
  422. info.video = info.video || []
  423. info.iframe = info.iframe || []
  424. info.styleImg = info.styleImg || []
  425. info.imagesDesc = info.imagesDesc || []
  426. info.videosDesc = info.videosDesc || []
  427. info.titleShowType = info.titleShowType || 'hover'
  428. info.titlePos = info.titlePos || 'right'
  429. }
  430. if(info.texSrc){
  431. info.texSrc = manage.removeSrcPostMark(info.texSrc)
  432. }
  433. //whole:
  434. //为了兼容旧数据,尽量和hot的数据靠近,最后保存在hot里
  435. info.position = convertValue(info.position, THREE.Vector3)
  436. info.scale = convertValue(info.scale, THREE.Vector3)
  437. delete info.quaternion
  438. info.linkType = info.linkType || "common"
  439. for (let i in info.transformAtPanos) {
  440. info.transformAtPanos[i].pos = new THREE.Vector3().fromArray(info.transformAtPanos[i].pos)
  441. //info.transformAtPanos[i].qua = new THREE.Quaternion().fromArray(info.transformAtPanos[i].qua)
  442. }
  443. }
  444. addBox(state) {
  445. if (state == !!this.hasBox) {
  446. return;
  447. }
  448. if (state) {
  449. var box = new THREE.Mesh(_boxGeometry,_boxMat)
  450. box.position.set(0, 0, 1 / 2);
  451. box.renderOrder = 3
  452. this.plane.position.set(0, 0, 1);
  453. this.add(box);
  454. this.box = box;
  455. } else {
  456. this.plane.position.set(0, 0, 0);
  457. this.remove(this.box);
  458. this.box = null;
  459. }
  460. this.hasBox = this.info.hasBox = state
  461. }
  462. /* getSizeByScale() {
  463. return {
  464. width: settings.defaultOverlaySize[0] * this.scale.x,
  465. height: settings.defaultOverlaySize[1] * this.scale.y
  466. }
  467. }
  468. getScaleBySize(width, height) {
  469. return {
  470. x: width / settings.defaultOverlaySize[0],
  471. y: height / settings.defaultOverlaySize[1],
  472. }
  473. }*/
  474. setVisiblePanos(visibleData){
  475. if(visibleData)this.info.visiblePanos = visibleData
  476. else if(!this.info.visiblePanos) this.getVisiblePanos()
  477. }
  478. getVisiblePanos(){//在不同点还不一样
  479. var depth = this.hasBox ? this.scale.z : 0;
  480. var width = this.scale.x, height = this.scale.y
  481. var cornerPoint
  482. if(this.plane){
  483. cornerPoint = [
  484. new THREE.Vector3(0, 0, depth),
  485. new THREE.Vector3(-width/2, height/2, depth),
  486. new THREE.Vector3(width/2, height/2, depth),
  487. new THREE.Vector3(width/2, -height/2, depth),
  488. new THREE.Vector3(-width/2, -height/2, depth),
  489. ]
  490. }else{
  491. var bound = new THREE.Box3().copy(this.info.modelBound.bound)
  492. var center = bound.center()
  493. cornerPoint = [
  494. new THREE.Vector3(center.x,center.y,center.z),
  495. new THREE.Vector3(bound.min.x, bound.min.y, bound.min.z ),
  496. new THREE.Vector3(bound.min.x, bound.min.y, bound.max.z ),
  497. new THREE.Vector3(bound.min.x, bound.max.y, bound.min.z ),
  498. new THREE.Vector3(bound.max.x, bound.min.y, bound.min.z ),
  499. new THREE.Vector3(bound.max.x, bound.max.y, bound.min.z ),
  500. new THREE.Vector3(bound.max.x, bound.min.y, bound.max.z ),
  501. new THREE.Vector3(bound.min.x, bound.max.y, bound.max.z ),
  502. new THREE.Vector3(bound.max.x, bound.max.y, bound.max.z ),
  503. ];
  504. }
  505. var getPos = (position)=>{//每个overlay位置对应5个坐标,plane中心和四个角的位置
  506. if(this.plane){
  507. return cornerPoint.map(e=>{
  508. return e.clone().applyEuler(this.info.rotation).add(position)
  509. })
  510. }else{
  511. var matrixWorld = new THREE.Matrix4().compose(position, this.quaternion, this.scale)
  512. matrixWorld.multiplyMatrices(matrixWorld, this.mesh.matrix)
  513. return cornerPoint.map(e=>{
  514. return e.clone().applyMatrix4(matrixWorld);
  515. })
  516. }
  517. }
  518. this.info.visiblePanos = []
  519. var customPositions = getPos(this.info.position )
  520. var posAtPanos = {}
  521. for(let panoId in this.info.transformAtPanos){
  522. if(panoId == 'outSide')continue;
  523. posAtPanos[panoId] = getPos(this.info.transformAtPanos[panoId].pos )
  524. }
  525. let maxCount = browser.isMobile() ? 2000 : 5000
  526. let c = model.panos.list.length * model.colliders.length
  527. if(window.isEdit || c < maxCount){ //编辑页面保险起见还是全部算完后才可浏览,就能保证保存全部的visiblePano
  528. this.info.visiblePanos = common.getVisiblePano(customPositions, model.panos.list, {
  529. model: model.colliders , posAtPanos
  530. })
  531. }else{
  532. let start = 0
  533. let interval = setInterval(()=>{
  534. let end = start + Hot.visiPanosCountSlice;
  535. end = Math.min(end, model.panos.list.length)
  536. let i = start
  537. start = end
  538. let panos = model.panos.list.slice(i,end)
  539. this.info.visiblePanos = this.info.visiblePanos.concat( common.getVisiblePano(customPositions, panos, {
  540. model: model.colliders , posAtPanos
  541. }));
  542. if(end>=model.panos.list.length){
  543. console.log(window.hotsi ?(++window.hotsi): (window.hotsi = 1))
  544. clearInterval(interval)
  545. }
  546. }, Hot.visiEveryDurSlice )// visiEveryDurSlice 等在main中定义
  547. }
  548. }
  549. updateVisible(panos, visibility) {
  550. if(window.isEdit && editTool.hotpoint.editSpot == this){
  551. return this.visible = true
  552. }
  553. this.visible = visibility != void 0 ? visibility : (!this.info.visiblePanos || !!panos.find(pano=>this.info.visiblePanos.includes(pano.id)))
  554. this.titleElem && this.titleElem.setVisible(this.visible, 'hotVisible')
  555. if (this.texType == 'video'){
  556. //this.switchPlay(this.visible, this.visible ? null : 'stop' );//可见时不操作;不可见时停止
  557. this.update(player)
  558. }
  559. }
  560. getCornerPoint(){//获取在每个漫游点上的视觉边界点 可以打开boxHelper和addBall来观测是否准确
  561. if(this.cornerPoints[player.currentPano.id]){
  562. return this.cornerPoints[player.currentPano.id]
  563. }else{
  564. var boundPoint, cornerPoint
  565. var center//中心点
  566. if(this.plane){
  567. center = this.plane.getWorldPosition()
  568. boundPoint = [
  569. new THREE.Vector3(-0.5, 0.5, 0),
  570. new THREE.Vector3(0.5, 0.5, 0),
  571. new THREE.Vector3(0.5, -0.5, 0),
  572. new THREE.Vector3(-0.5, -0.5, 0),
  573. ]
  574. }else{
  575. var bound = new THREE.Box3().copy(this.info.modelBound.bound)
  576. boundPoint = [
  577. new THREE.Vector3(bound.min.x, bound.min.y, bound.min.z ),
  578. new THREE.Vector3(bound.min.x, bound.min.y, bound.max.z ),
  579. new THREE.Vector3(bound.min.x, bound.max.y, bound.min.z ),
  580. new THREE.Vector3(bound.max.x, bound.min.y, bound.min.z ),
  581. new THREE.Vector3(bound.max.x, bound.max.y, bound.min.z ),
  582. new THREE.Vector3(bound.max.x, bound.min.y, bound.max.z ),
  583. new THREE.Vector3(bound.min.x, bound.max.y, bound.max.z ),
  584. new THREE.Vector3(bound.max.x, bound.max.y, bound.max.z ),
  585. ];
  586. }
  587. var maxLon = -Infinity
  588. var minLon = +Infinity
  589. var maxLat = -Infinity
  590. var minLat = +Infinity
  591. var pos1 = player.currentPano.position.clone();
  592. center = this.position.clone() //模型bound的中心点已经位移到了hot中心点。 注意不能用getWorldPosition,得到的会是偏移的
  593. var dir = center.clone().sub(pos1).normalize()
  594. var centerDirInfo = { }
  595. player.cameraControls.controls.panorama.lookAt.call( centerDirInfo , null, dir )
  596. boundPoint.forEach(e=>{//lon左右
  597. var point = e.applyMatrix4(this.mesh.matrixWorld);
  598. var dir = point.clone().sub(pos1).normalize()
  599. var dirInfo = { }
  600. player.cameraControls.controls.panorama.lookAt.call( dirInfo , null, dir )
  601. var diffLon = (dirInfo.lon-centerDirInfo.lon) % 360
  602. if(Math.abs(diffLon)>180){//因为有时需要根据符号判断是在中心的左边还是右边,所以限制在180内
  603. diffLon += (diffLon>0 ? -360 : 360)
  604. }
  605. var diffLat = dirInfo.lat-centerDirInfo.lat
  606. maxLon = Math.max(diffLon, maxLon)
  607. minLon = Math.min(diffLon, minLon)
  608. maxLat = Math.max(diffLat, maxLat)
  609. minLat = Math.min(diffLat, minLat)
  610. })
  611. var diffLon = maxLon - minLon
  612. var diffLat = maxLat - minLat
  613. if(diffLat>180) {//可能是到了反面。不好算,直接返回所有boundPoint
  614. cornerPoint = boundPoint
  615. }else{
  616. //读取lon lat的最大最小值,勾勒出一个没有倾斜的矩形 。它比boundPoint看起来范围更大些
  617. maxLon = maxLon + centerDirInfo.lon
  618. maxLat = maxLat + centerDirInfo.lat
  619. minLon = minLon + centerDirInfo.lon
  620. minLat = minLat + centerDirInfo.lat
  621. var dirs = [
  622. math.getDirByLonLat(maxLon, maxLat),
  623. math.getDirByLonLat(minLon, minLat),
  624. math.getDirByLonLat(maxLon, minLat),
  625. math.getDirByLonLat(minLon, maxLat),
  626. ]
  627. cornerPoint = dirs.map(e=>{
  628. return e.clone().add(pos1)
  629. })
  630. cornerPoint = [center, ...cornerPoint] //最后增加一个中心点
  631. }
  632. /* if(this.objObject){
  633. cornerPoint = [pos2, ...cornerPoint]
  634. } */
  635. //addPoints(cornerPoint)
  636. this.cornerPoints[player.currentPano.id] = {cornerPoint, diffLon, diffLat}
  637. return this.cornerPoints[player.currentPano.id]
  638. }
  639. }
  640. inSight(){
  641. //return true
  642. if(window.isEdit)return true // 太容易move了
  643. if(player.mode == 'panorama' && player.currentPano){
  644. if(!player.camera) return
  645. var cornerPointInfo = this.getCornerPoint();
  646. var cornerPoint
  647. if(cornerPointInfo.diffLon < 3 || cornerPointInfo.diffLat < 3 ){
  648. //console.log('two far and small')
  649. return false
  650. }
  651. if(cornerPointInfo.diffLon < 15 && cornerPointInfo.diffLat < 15){//当很小的时候,只判断中心点即可
  652. cornerPoint = [cornerPointInfo.cornerPoint[0]];
  653. }else{
  654. cornerPoint = cornerPointInfo.cornerPoint
  655. }
  656. for(let i=0,j=cornerPoint.length;i<j;i++){//只要有一点可见就算看见
  657. var pos2d = math.getPos2d(cornerPoint[i], player.camera, $("#player")[0])
  658. if(pos2d.trueSide && pos2d.inSight) return true
  659. }
  660. }else{//飞出要判断模型阻挡,有点耗时就算了
  661. return playVideoWhenFlyOut//true
  662. }
  663. }
  664. update(player){
  665. if(player.mode == 'panorama'){//实时监测播放
  666. if(this.texType == "video" && !player.flying){ //飞行时不判断
  667. if(this.visible && !this.pausedByUser && this.inSight()){
  668. this.videoControl(true)
  669. }else{
  670. this.videoControl(false)
  671. }
  672. }else if(this.info.animateInfo){
  673. if(this.visible && this.inSight()){
  674. GifTexDeal.start(this.animation)
  675. }else{
  676. GifTexDeal.stop(this.animation)
  677. }
  678. }
  679. }
  680. if(this.info.isSprite){
  681. this.quaternion.copy(player.camera.quaternion)
  682. }
  683. this.updateScale()
  684. }
  685. updateScale(e, t) {//自适应调节大小
  686. if(!DATA.autoAdjustHotScale || this.texType != 'shine' || !this.plane )return
  687. //let renderSize = player.sceneRenderer.renderer.domElement
  688. let renderSize = player.sceneRenderer.renderer.getSize()
  689. var scale = convertTool.getScaleForConstantSize($.extend(autoSizeInfo,{
  690. camera:player.camera, resolution:{x:renderSize.width, y:renderSize.height},
  691. position: this.position.clone() ,
  692. }))
  693. this.plane.scale.set(scale,scale,scale)
  694. }
  695. switchPlay(state){//手动播放暂停
  696. this.pausedByUser = !state
  697. this.videoControl(state)
  698. }
  699. loadVideo(video){
  700. if(video.src)return
  701. video.src = manage.dealURL(this.info.texSrc);
  702. }
  703. videoControl(state){
  704. if(this.texType != "video" || !this.material_.map)return
  705. var video = this.material_.map.image
  706. if(!state || state == 'stop'){
  707. if(!video.paused){
  708. video.pause()
  709. console.log("pause " + this.sid)
  710. }
  711. if(state == 'stop'){
  712. video.currentTime = 0;
  713. }
  714. }else if(state){
  715. if(video.paused){
  716. this.loadVideo(video)
  717. video.play()
  718. console.log("play " + this.sid)
  719. }
  720. }
  721. }
  722. /* setDefaultHotScale = function(){//设置成默认热点大小
  723. var w = DATA.hotIconScale) * g_HotMeshSize.g_HotMeshWidth
  724. this.scale.set( w, w, this.scale.z)
  725. } */
  726. setTitleElem(){
  727. var title = this.info.title;
  728. if(title){
  729. if(!this.titleElem){
  730. this.titleElem = new Label2D({position:this.position, innerHTML:`<div>${title}</div>`, domElement:$("#hot")[0], shelterByModel:true })
  731. }else{
  732. this.titleElem.elem.html(`<div>${title}</div>`)
  733. }
  734. this.titleElem.setVisible(this.visible, 'hotVisible')
  735. this.setHoverState(false)
  736. this.setTitleDir()
  737. }else{
  738. if(this.titleElem){
  739. this.titleElem.dispose()
  740. this.titleElem = null;
  741. }
  742. }
  743. }
  744. setTitleDir(){
  745. this.titleElem && this.titleElem.elem.attr('pos',this.info.titlePos)
  746. }
  747. updateTitle(){
  748. this.titleElem && this.titleElem.update()
  749. }
  750. /* setTitleElem(){
  751. var root = $("#hot");
  752. var title = this.info.title;
  753. if(title){
  754. if(!this.titleElem){
  755. var elem = $(`<div></div>`)
  756. root.append(elem);
  757. this.titleElem = elem;
  758. }
  759. this.titleElem.text(title)
  760. this.setTitleDir()
  761. }else{
  762. if(this.titleElem){
  763. this.titleElem.remove()
  764. this.titleElem = null;
  765. }
  766. }
  767. }
  768. setTitleDir(){
  769. this.titleElem.attr('pos',this.info.titlePos)
  770. }
  771. updateTitle(){
  772. if(!this.titleElem)return;
  773. if(!this.visible || this.info.titleShowType == 'unvisible' ||
  774. this.info.titleShowType != 'always' && !this.hovered ){
  775. return this.titleElem.css("display","none");
  776. }
  777. var pos = math.getPos2d(this.position, player.camera, $("#player")[0])
  778. if(pos.trueSide){//inSight
  779. this.titleElem.css( { "left" : `${pos.pos.x}px`, "top": `${pos.pos.y}px ` });
  780. this.titleElem.css("display","block");
  781. }else{
  782. this.titleElem.css("display","none");
  783. }
  784. } */
  785. setHoverState(state){
  786. if(!this.titleElem)return
  787. this.hovered = !!state
  788. var v = this.info.titleShowType != 'unvisible' && (this.info.titleShowType == 'always' || this.hovered)
  789. this.titleElem.setVisible(v, 'hoveredVisi')
  790. //this.updateTitle()
  791. }
  792. closestPanoTowardTag(e, t) {
  793. var i = []
  794. , n = []
  795. , r = this.mesh.getWorldPosition();
  796. if (e === "panorama") {
  797. /* var o = t.position.clone().sub(r).normalize();
  798. n.push(function(t, i) {//scoreFunctions.direction 最好这个漫游点在currentPano到热点之间的路径上。但是这样的话可能就看不到热点正面,所以删掉
  799. return function(e) {
  800. return e.position.clone().sub(t).normalize().dot(i) * window._settings.navigation.directionFactor
  801. }}(r, o)
  802. ) */
  803. }
  804. var a = new THREE.Vector3;
  805. i.push(function(e) {
  806. return Math.abs(e.position.x - r.x) > window._settings.tags.visibility.cameraClearance || Math.abs(e.position.z - r.z) > window._settings.tags.visibility.cameraClearance
  807. },
  808. function(e) {
  809. a.copy(r).sub(e.position);
  810. var t = -THREE.Math.radToDeg(Math.atan(a.y / Math.sqrt(a.x * a.x + a.z * a.z)))
  811. , i = window._settings.tags.navigate.tiltTolerance
  812. return window._settings.insideLookLimitDown - i < t && t < window._settings.insideLookLimitUp + i
  813. },
  814. (pano)=>{ // add
  815. return player.checkHasNeighbor(pano)
  816. },
  817. (pano)=>{ // add
  818. // 周恩光改 解决visiblePanos为undefined时的bug
  819. return this.info.visiblePanos && this.info.visiblePanos.includes(pano.id)
  820. }
  821. )
  822. n.push(
  823. (function(hot, i) { //scoreFunctions.distanceSquared
  824. return function(pano) {
  825. //i = a.navigation.distanceFactor
  826. return hot ? hot.position.distanceToSquared(pano.position) * i : 0
  827. }
  828. })(this, -2)
  829. ,
  830. (pano)=>{//尽量正对hot
  831. let dir = new THREE.Vector3(0,0,1).applyQuaternion(this.quaternion)
  832. let dir2 = new THREE.Vector3().subVectors(pano.position, this.position).normalize();
  833. let s = dir.dot(dir2) * 10;
  834. //console.log(pano.id + ":" + s)
  835. return s
  836. }
  837. );
  838. var s = t.model.panos.sortByScore(i, n);
  839. return s && 0 < s.length && s[0].pano
  840. }
  841. examine(options={}) {
  842. var openHot = this.info.link && this.info.actionType.openHot && !options.dontOpen
  843. var fastTran = !options.dontFastTran && ( this.info.actionType.fastTran || settings.hotFastTran || options.fastTran)
  844. if(fastTran){//瞬间过渡 1到固定方位 2到和普通过渡一样的位置,也就是最适合的位置
  845. let info = this.info.cameraData
  846. if(info){
  847. player.blackToPano({
  848. pano: player.model.panos.index[info.pano.uuid],
  849. quaternion: new THREE.Quaternion().fromArray(info.camera.quaternion)
  850. })
  851. }
  852. }
  853. var needExamine = !fastTran && (options.examine || (!settings.dontExamHot && this.info.actionType.examine))
  854. if(!openHot && !needExamine)return;
  855. if(openHot && this.info.linkType!="common" && this.info.iframe && this.info.iframe[0]){
  856. var src = getLink(this.info.iframe[0]);
  857. if(this.info.linkType=="jumpLink"){
  858. var newPage = window.open(src, "_blank" );
  859. newPage.focus();
  860. }else if(this.info.linkType=="iframeDiv"){
  861. var div = document.createElement("div");
  862. div.style.position = 'fixed';
  863. div.style.width = div.style.height = "100%";
  864. div.style.left = div.style.top = '0';
  865. div.style["z-index"] = "999"
  866. var exit = document.createElement("div");
  867. exit.style["background-image"] = "url(images/vrOffImg.png)";
  868. exit.style.position = 'absolute';
  869. exit.style.width = exit.style.height = "50px";
  870. exit.style.left = '17px'; exit.style.top = "20px"
  871. exit.style.cursor = "pointer";
  872. exit.style["background-repeat"] = "no-repeat";
  873. exit.style["background-size"] = "25%";
  874. exit.style["background-position"] = "center center";
  875. exit.style["background-color"] = "rgba(0, 0, 0, 0.2)";
  876. exit.style["border-radius"] = "50%";
  877. exit.style["z-index"] = "3"
  878. exit.onclick = ()=>{
  879. $(div).remove()
  880. Hot.closePopup()
  881. }
  882. var myElement = document.createElement("iframe");
  883. myElement.style.position = 'absolute';
  884. myElement.style.width = myElement.style.height = "100%";
  885. myElement.style.left = myElement.style.top = '0';
  886. myElement.src = src
  887. $("body").append(div);
  888. div.appendChild(exit);
  889. div.appendChild(myElement)
  890. SoundManager.play('hot')
  891. }
  892. return;
  893. }
  894. if(!player.currentPano)return;
  895. var popup = document.getElementById("popup");
  896. if (openHot) {
  897. g_currentHot = this,
  898. popup.style.display = "block",
  899. popup.classList.add("wait");
  900. var n = document.createElement("iframe");
  901. SoundManager.play('hot')
  902. var src = getLink(this.info.link )
  903. n.src = src;
  904. n.id = "id1",
  905. n.allowTransparency = "true";
  906. var a = document.getElementById("id1");
  907. if (void 0 === a || null == a) {
  908. document.querySelector(".popup-content").appendChild(n);
  909. var s = !1;
  910. window.loaddingSuccess = function() {
  911. s = !0
  912. }
  913. ,
  914. setTimeout(function e() {
  915. if (s) {
  916. var t = document.querySelector("#id1").contentWindow.document;
  917. t.querySelector("video") && (t.querySelector("video").play(),
  918. !t.querySelector("video").paused && t.querySelector(".playPause") && t.querySelector(".playPause").classList.add("fa-pause")),
  919. t.querySelector("audio") && t.querySelector("audio").play()
  920. } else
  921. setTimeout(e, 300)
  922. }, 800)
  923. }
  924. }
  925. var done = function() {
  926. player.flyingToTag = !1;
  927. openHot && popup.classList.remove("wait")
  928. }.bind(this);
  929. if(!needExamine){
  930. done()
  931. return;
  932. }
  933. var c = this.closestPanoTowardTag(player.mode, player.currentPano) || player.currentPano
  934. , h = this.mesh.getWorldPosition();
  935. player.flyingToTag = !0;
  936. if (player.mode === 'panorama') {
  937. var d = {
  938. pano: c,
  939. lookAtPoint: h,
  940. duration: options.duration,
  941. maxDistanceOverride: null,
  942. skipWarpingCheck: !1,
  943. aimDuration: options.aimDuration,
  944. };
  945. if(fastTran){
  946. let f = (new THREE.Matrix4).lookAt(c.position, h, new THREE.Vector3(0,1,0));
  947. let quaternion = (new THREE.Quaternion).setFromRotationMatrix(f)
  948. player.blackToPano({
  949. pano:c,
  950. quaternion,
  951. })
  952. done()
  953. }else{
  954. player.flyToPano(d, done)
  955. }
  956. } else {
  957. var p = {
  958. pano: c
  959. };
  960. if (h) {
  961. var f = (new THREE.Matrix4).lookAt(c.position, h, new THREE.Vector3(0,1,0));
  962. p.quaternion = (new THREE.Quaternion).setFromRotationMatrix(f)
  963. }
  964. p.callback = done,
  965. p.duration = options.duration || 1500,
  966. p.mode = 'panorama',
  967. p.aimDuration = options.aimDuration
  968. player.flyToNewMode(p)
  969. }
  970. }
  971. addModel(object){
  972. if(this.objObject){
  973. this.remove(this.objObject)
  974. }
  975. this.objObject = object;
  976. /* object.traverse((mesh)=>{
  977. if(mesh.material && mesh.type == "hotSprite"){
  978. mesh.material = this.material_;
  979. }
  980. }) */
  981. object.name = this.info.objName;
  982. object.src = this.info.objSrc
  983. this.info.hasBox = false
  984. this.addBox(false)
  985. this.remove(this.plane);
  986. this.plane = null;
  987. this.setMesh(this.objObject)
  988. //this.adjustModelAuto()
  989. if(this.info.modelBound){//应该不会改变
  990. var s = this.info.modelBound.scaleRatio
  991. this.mesh.scale.set(s,s,s)
  992. this.mesh.position.fromArray(this.info.modelBound.position)
  993. this.mesh.modelBound = this.info.modelBound
  994. }
  995. this.material_.side = THREE.FrontSide
  996. this.changeBoxHelperDisplay(false)
  997. //this.mesh.boxHelper.visible = true
  998. }
  999. addPlane(){//换成plane
  1000. if(this.plane)return
  1001. this.plane = new THREE.Mesh(_planeGeometry, this.material_)
  1002. this.remove(this.objObject)
  1003. this.objObject = null
  1004. delete this.info.objSrc
  1005. delete this.info.objName
  1006. delete this.info.modelBound
  1007. this.setMesh(this.plane)
  1008. //this.material_.side = THREE.DoubleSide //双面的话飞出来会看到悬空的
  1009. }
  1010. setMesh(mesh){
  1011. this.mesh = mesh
  1012. this.add(this.mesh);
  1013. this.mesh.renderOrder = 3
  1014. this.changeMaterial(this.material_) //re applyTo every mesh
  1015. this.mesh.traverse((mesh)=>{
  1016. mesh.type = "hotSprite" //raycaster use
  1017. })
  1018. if(!this.mesh.boxHelper){
  1019. var boxHelper = this.mesh.children.find(e=>e instanceof THREE.Box3Helper)
  1020. if(boxHelper){
  1021. this.mesh.boxHelper = boxHelper
  1022. }else{
  1023. var bound
  1024. if(this.objObject){
  1025. bound = new THREE.Box3().copy(this.info.modelBound.bound)
  1026. }else{
  1027. bound = planeBound
  1028. }
  1029. bound.expandByVector(new THREE.Vector3(0.0001,0.0001,0.0001))
  1030. this.mesh.boxHelper = new THREE.Box3Helper( bound, new THREE.Color( "#00ffff"));
  1031. this.mesh.add(this.mesh.boxHelper)
  1032. this.mesh.boxHelper.material.depthTest = false;
  1033. this.mesh.boxHelper.material.transparent = true
  1034. this.mesh.boxHelper.visible = false
  1035. }
  1036. }
  1037. }
  1038. changeBoxHelperDisplay(show){
  1039. if(show){
  1040. this.visible_ = this.visible
  1041. this.visible = true
  1042. this.mesh.boxHelper.visible = true
  1043. }else{
  1044. if(this.visible_ != void 0){
  1045. this.visible = this.visible_
  1046. }
  1047. this.mesh.boxHelper.visible = false
  1048. }
  1049. }
  1050. /* addToLoadQueue() {
  1051. if (this.texType == 'photo') {
  1052. Hot.loadQueue.includes(this) || Hot.loadQueue.push(this)
  1053. }
  1054. } */
  1055. requestDownload(type, callback) {
  1056. var plane = this.plane;
  1057. if(type == 'photo'){
  1058. if(this.photoHasRequestLoad || this.texType != 'photo'){
  1059. return; //为什么之前1191需要在这加callback() 才能呢。现在又没事了
  1060. }
  1061. console.log(' beginDownload : ' + this.sid)
  1062. /* this.material_.map = */Texture.load(this.info.texSrc, (tex)=>{
  1063. callback && callback()
  1064. if(!tex.image ){
  1065. return //只是单纯用了相同src的tex,但image仍未加载完
  1066. }
  1067. if(!this._loadDones){
  1068. return
  1069. }
  1070. dealMap(tex)
  1071. setTimeout(Hot.loadNext, 50)
  1072. hotGroup.children.forEach(e=>{
  1073. if(e.info.texSrc == this.info.texSrc && e.info.texType == type ){
  1074. e.material_.color.set("#FFFFFF")
  1075. e.material_.opacity = 1;
  1076. //console.log('overlay loaded: ' + e.sid + " - " + this.info.texSrc.split('/').pop());
  1077. e.texMedia = tex.image
  1078. {//animation不同致使的不能使用同一个texture
  1079. if(window.isEdit){
  1080. if(animateTexSrcs[e.info.texSrc]){
  1081. e.material_.map = tex.clone(); //编辑动画直接不用一个texture, 故而animation也不同
  1082. e.material_.map.needsUpdate = true
  1083. }else{
  1084. e.material_.map = tex
  1085. animateTexSrcs[e.info.texSrc] = 1
  1086. }
  1087. }else{
  1088. if(animateTexSrcs[e.info.texSrc]){//已有该texSrc
  1089. let finded = false
  1090. for(let i of animateTexSrcs[e.info.texSrc]){
  1091. if(ifSame(i[0], e.info.animateInfo)){
  1092. e.material_.map = i[1]; finded = true; break;
  1093. }
  1094. }
  1095. if(!finded){
  1096. let tex_ = tex.clone();
  1097. animateTexSrcs[e.info.texSrc].set(e.info.animateInfo, tex_)
  1098. e.material_.map = tex_
  1099. }
  1100. }else{
  1101. let object = new Map();
  1102. object.set(e.info.animateInfo, tex)
  1103. animateTexSrcs[e.info.texSrc] = object//注册第一个texSrc
  1104. e.material_.map = tex
  1105. }
  1106. }
  1107. }
  1108. if(e.info.animateInfo && !e.animation){
  1109. e.animation = GifTexDeal.addAnimation(e.material_.map, e, e.info.animateInfo, e.sid )
  1110. e.visible && e.inSight() && GifTexDeal.start(e.animation)
  1111. }
  1112. if(++photoLoaded == originPhotoCount){//data2.js中的所有photo加载完毕
  1113. Hot.allPhotoLoaded = true;
  1114. Hot.whenAllFileLoaded && Hot.allModelLoaded && Hot.whenAllFileLoaded()
  1115. }
  1116. {
  1117. e._loadDones.forEach(a=>a())
  1118. e._loadDones = null
  1119. //e.photoHasRequestLoad = true //这句不能加,否则会无法执行callback
  1120. }
  1121. e.material_.needsUpdate = true
  1122. }
  1123. })
  1124. })
  1125. this.photoHasRequestLoad = true
  1126. }else if(type == 'model'){
  1127. if(this.modelHasRequestLoad || !this.info.objSrc)return;
  1128. //需要处理重复?
  1129. objLoader.load(this.info.objSrc, (object)=>{
  1130. this.remove(this.mesh)
  1131. this.addModel(object)
  1132. callback && callback()
  1133. if(++modelLoaded == originModelCount){//data2.js中的所有photo加载完毕
  1134. Hot.allModelLoaded = true;
  1135. Hot.whenAllFileLoaded && Hot.allPhotoLoaded && Hot.whenAllFileLoaded()
  1136. }
  1137. })
  1138. this.modelHasRequestLoad = true
  1139. }
  1140. }
  1141. }
  1142. Hot.updateVisibles = function(panos) {
  1143. if (panos === true) {
  1144. model.hotGroup.children.forEach(e=>e.updateVisible(null,true))
  1145. } else {
  1146. model.hotGroup.children.forEach(e=>e.updateVisible(panos))
  1147. }
  1148. }
  1149. Hot.beginShineHot = function(){
  1150. if(!window.isEdit && shineMats.length == 0)return
  1151. transitions.trigger({
  1152. func: function(e) {
  1153. var opa = e <= .5 ? 2 * e : -2 * e + 2
  1154. shineMats.forEach(mat=>{
  1155. mat.uniforms.opac.value = opa;
  1156. })
  1157. },
  1158. cycling: !0,
  1159. duration: 3e3,
  1160. name: "hotShine"
  1161. })
  1162. }
  1163. Hot.getDefaulScale = function(hotIconScale){
  1164. return (hotIconScale || DATA.hotIconScale) * g_HotMeshSize.g_HotMeshWidth
  1165. }
  1166. var loadings = [];
  1167. Hot.loadQueue = []; //等待下载的overlay,目前只针对photo
  1168. Hot.maxLoadingCount = 3; //同时正在load图片的数量
  1169. Hot.loadNext = ()=>{//继续requestDownload loadQueue中前排的item
  1170. let count = Hot.maxLoadingCount - loadings.length
  1171. Hot.loadQueue.slice(0, count).forEach(e=>{
  1172. loadings.push(e)
  1173. console.log('requestDownload', e.hot.info.texSrc)
  1174. e.hot.requestDownload(e.type, ()=>{
  1175. var i = loadings.indexOf(e)
  1176. //console.log('requestDownloaded index', i)
  1177. i > -1 && loadings.splice(i,1)
  1178. })
  1179. })
  1180. Hot.loadQueue.splice(0, count)
  1181. }
  1182. Hot.getNeedLoad = function() {//计算获取loadQueue,每次都重新计算,覆盖旧的
  1183. if (!player || !player.domElement || !player.mode)
  1184. return;
  1185. var hots1, hots2
  1186. if (player.mode != 'panorama') {
  1187. if (Hot.loadQueue.length == 0) {
  1188. hots1 = model.hotGroup.children.filter(e=>e.texType == 'photo' && !e.photoHasRequestLoad )
  1189. hots2 = model.hotGroup.children.filter(e=>e.info.objSrc && !e.modelHasRequestLoad )
  1190. Hot.loadQueue = hots1.map(e=>{return {hot:e, type:"photo"}}).concat(
  1191. hots2.map(e=>{return {hot:e, type:"model"}})
  1192. )
  1193. }
  1194. return
  1195. }
  1196. //Hot.loadWhenOutside = true
  1197. hots1 = model.hotGroup.children.filter(e=>e.texType == 'photo' && !e.photoHasRequestLoad && (!e.info.visiblePanos || e.info.visiblePanos.includes(player.currentPano.id)))
  1198. hots2 = model.hotGroup.children.filter(e=>e.info.objSrc && !e.modelHasRequestLoad && (!e.info.visiblePanos || e.info.visiblePanos.includes(player.currentPano.id)))
  1199. if(hots1.length+hots2.length == 0){
  1200. hots1 = model.hotGroup.children.filter(e=>e.texType == 'photo' && !e.photoHasRequestLoad )
  1201. hots2 = model.hotGroup.children.filter(e=>e.info.objSrc && !e.modelHasRequestLoad )
  1202. }
  1203. var cameraDir = player.getDirection()
  1204. Hot.loadQueue = hots1.map(e=>{return {hot:e, type:"photo"}}).concat(
  1205. hots2.map(e=>{return {hot:e, type:"model"}})
  1206. )
  1207. var request = [(item)=>{
  1208. return true
  1209. }];
  1210. var rank = [(item)=>{
  1211. var dis = item.hot.mesh.getWorldPosition().distanceTo(player.position);
  1212. return -dis
  1213. }
  1214. , (item)=>{
  1215. var tagDir = item.hot.mesh.getWorldPosition().sub(player.position)
  1216. var angle = tagDir.angleTo(cameraDir)
  1217. return -angle * 20
  1218. }]
  1219. var result = common.sortByScore(Hot.loadQueue, request, rank);
  1220. //Hot.loadQueue = result ? result.slice(0, 5).map(e=>e.item) : model.hotGroup.children.filter(e=>e.texType == 'photo' && !e.hasRequestLoad).slice(0, 2);
  1221. Hot.loadQueue = result ? result.slice(0, 5).map(e=>e.item) : []
  1222. }
  1223. Hot.load = ()=>{//开始下载图片
  1224. Hot.getNeedLoad()
  1225. Hot.loadNext()
  1226. var hots1 = model.hotGroup.children.filter(e=>e.texType == 'photo' && !e.photoHasRequestLoad )
  1227. var hots2 = model.hotGroup.children.filter(e=>e.info.objSrc && !e.modelHasRequestLoad )
  1228. if (hots1.length+hots2.length > 0) {
  1229. setTimeout(Hot.load, 200)
  1230. } else {
  1231. Hot.allRequestLoad = true
  1232. console.log('allRequestLoad')
  1233. }
  1234. }
  1235. Hot.startLoad = ()=>{
  1236. originPhotoCount = hotGroup.children.filter(e=>e.texType == 'photo').length
  1237. originModelCount = hotGroup.children.filter(e=>!!e.info.objSrc).length
  1238. if(originPhotoCount == 0 )Hot.allPhotoLoaded = true
  1239. if(originModelCount == 0) Hot.allModelLoaded = true;
  1240. if(Hot.allModelLoaded && Hot.allPhotoLoaded) Hot.whenAllFileLoaded && Hot.whenAllFileLoaded()//所有加载完毕
  1241. else{
  1242. Hot.load()
  1243. }
  1244. }
  1245. window.Hot = Hot
  1246. /* var ball = new THREE.Mesh(new THREE.SphereBufferGeometry(0.01),new THREE.MeshBasicMaterial({color:"#f00",depthTest:false,transparent:true}))
  1247. var balls = []
  1248. var addPoint = function(point){
  1249. console.log(point)
  1250. var ball1 = ball.clone()
  1251. model.add(ball1);
  1252. ball1.position.copy(point)
  1253. balls.push(ball1)
  1254. }
  1255. var addPoints = function(points){
  1256. balls.forEach(e=>model.remove(e))
  1257. balls = []
  1258. points.forEach(e=>addPoint(e))
  1259. }
  1260. */
  1261. //判断是否是移动端,如果是给关闭按钮添加touchstart事件
  1262. Hot.closePopup = ()=>{// 关闭热点页面
  1263. if(!g_currentHot) return;
  1264. g_currentHot = null;
  1265. var hotPop = document.getElementById('popup');
  1266. hotPop.style.display = "none";
  1267. document.querySelector(".popup-content").removeChild(document.getElementById("id1"));
  1268. $("#popup iframe:last").remove();
  1269. SoundManager.pause('hot', true)//自动播放被中断的音频 (bgm
  1270. return false
  1271. }
  1272. if(browser.isMobile()){
  1273. $('#closepop').on("touchstart",Hot.closePopup);
  1274. }else{
  1275. $('#closepop').on("click",Hot.closePopup);
  1276. }
  1277. Hot.createHotList = function() {
  1278. if(!window.DATA.showHotListSta)return
  1279. var docFragment = document.createDocumentFragment();
  1280. var hots = hotGroup.children.filter(hot=>hot.info.actionType.openHot);
  1281. hots = hots.sort((a,b)=>{return a.order - b.order});
  1282. hots.forEach((hot)=>{
  1283. var li = document.createElement('li');
  1284. var span = document.createElement('span');
  1285. span.innerHTML = hot.info.title || '热点';
  1286. // console.log(span.innerHTML);
  1287. li.hot = hot; // 列表每一项对应一个热点
  1288. li.appendChild(span);
  1289. docFragment.appendChild(li);
  1290. })
  1291. setTimeout(()=>{
  1292. var ul = document.querySelector('#hotListContent ul');
  1293. ul && ul.appendChild(docFragment);
  1294. },3000) //部分安卓手机的钉钉和支付宝浏览器如果立即添加到列表会卡住
  1295. }
  1296. }
  1297. /*
  1298. 保存 JSON.stringify(editTool.hotpoint.getSavingInfo())
  1299. 可能需要再写一份保存到overlay 给旧场景项目使用
  1300. 最好后台有针对手机版的做一个压缩。压缩成几个档位。
  1301. 安卓手机firefox出现过视频mesh不可见或者闪烁的情况。
  1302. 视频最容易导致崩溃, 模型还好
  1303. 数据速率为4064kbps,1920*1080px 时测试部门电脑崩溃
  1304. 数据速率为1824kbps,720 *576px 时正常
  1305. 所以尽量降到2000以下 同时播放个数最好不超过2个 可能需要将src归零 并延迟加载、不自动播放
  1306. */