12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349135013511352135313541355135613571358135913601361136213631364136513661367136813691370137113721373137413751376137713781379138013811382138313841385138613871388138913901391139213931394139513961397139813991400140114021403140414051406140714081409141014111412141314141415141614171418141914201421142214231424142514261427142814291430143114321433143414351436143714381439144014411442144314441445144614471448144914501451145214531454145514561457145814591460146114621463146414651466146714681469147014711472147314741475147614771478147914801481148214831484148514861487148814891490149114921493149414951496149714981499150015011502150315041505150615071508150915101511151215131514151515161517151815191520152115221523152415251526152715281529153015311532153315341535153615371538153915401541154215431544154515461547154815491550155115521553155415551556155715581559156015611562156315641565156615671568156915701571157215731574157515761577157815791580158115821583158415851586158715881589159015911592159315941595159615971598159916001601160216031604160516061607160816091610161116121613161416151616161716181619162016211622162316241625162616271628162916301631163216331634163516361637163816391640164116421643164416451646164716481649165016511652165316541655165616571658165916601661166216631664166516661667166816691670167116721673167416751676167716781679168016811682168316841685168616871688168916901691169216931694169516961697169816991700170117021703170417051706170717081709171017111712171317141715171617171718171917201721172217231724172517261727172817291730173117321733173417351736173717381739174017411742174317441745174617471748174917501751175217531754175517561757175817591760176117621763176417651766176717681769177017711772177317741775177617771778177917801781178217831784178517861787178817891790179117921793179417951796179717981799180018011802180318041805180618071808180918101811181218131814181518161817181818191820182118221823182418251826182718281829183018311832183318341835183618371838183918401841184218431844184518461847184818491850185118521853185418551856185718581859186018611862186318641865186618671868186918701871187218731874187518761877187818791880188118821883188418851886188718881889189018911892189318941895189618971898189919001901190219031904190519061907190819091910191119121913191419151916191719181919192019211922192319241925192619271928192919301931193219331934193519361937193819391940194119421943194419451946194719481949195019511952195319541955195619571958195919601961 |
-
- //合并热点和展览
- g_currentHot = null
-
- const playVideoWhenFlyOut = false
- //同时可播放的最大个数:
- const playVideoMax = window.isEdit ? 3 : browser.isMobile() ? 1 : 2;
- const playAniMax = window.isEdit ? 6 : browser.isMobile() ? 3 : 5;
- window.initHot = function(model){
-
- var objLoader = new THREE.OBJLoader()
- var _planeGeometry = new THREE.PlaneGeometry(1,1)
- var _boxGeometry = new THREE.BoxBufferGeometry(1,1,1)
- {//ie的mesh 加了polygonOffset也是会重叠。所以去掉前面的face: (但是突然ie又播放不了videoTexture)
- var newIndex = [..._boxGeometry.index.array]
- newIndex.splice(4 * 6, 12)
- _boxGeometry.setIndex(new THREE.BufferAttribute(new Uint16Array(newIndex),1))
- }
- var originPhotoCount = photoLoaded = originModelCount = modelLoaded = 0;
-
- var defaultTex1 = Texture.load(g_HotImage.point);
- var defaultTex2 = Texture.load(g_HotImage.point2)
- dealMap(defaultTex1,{ignoreResize:true} );
- dealMap(defaultTex2,{ignoreResize:true} ); //这张图改为linear有黑边。 但即使不改,chrome调试手机版也有黑边和锯齿
-
-
- /* var _boxMat = new THREE.MeshBasicMaterial({
- color: "#eeeeee",
- transparent: !0,
- opacity: 0.8
- }) */
- var _boxMat = new THREE.MeshPhongMaterial({
- color: "#eeeeee",
- transparent: !0,
- opacity: 0.8,
- side:THREE.DoubleSide
- })
-
- var autoSizeInfo = /* {width2d:50}// */{minSize : 120, maxSize : 600, nearBound : 1 , farBound : 15}
- var hotGroup = new THREE.Object3D; hotGroup.name = "hotGroup"
- model.add(hotGroup); model.hotGroup = hotGroup
-
- var animateTexSrcs = {}
-
- var getLink = function(link){
- var src = '';
- var r = link.substring(link.indexOf("html") + 4),
- o = "en" == manage.number("lang") ? "&lang=" + manage.number("lang") : "";
- -1 == r.indexOf("?") ? src = link + "?time=" + randomTime().getTime() + "&id=" + window.number + o : src = link + "&time=" + randomTime().getTime() + "&id=" + window.number + o
- return src.replace('https://www.4dmodel.com/SuperTwo/hot_online1', 'hot')
- // return src //打包
-
- }
- var removeSrcPostMark = function(url){//去除texture.load时自动加上的'?'
- var index = url.indexOf('?')
- if(index>-1){
- return url.slice(0, index)
- }else return url
- }
-
-
- {//get plane Bound
- var planeBound = new THREE.Box3()
- var cornerPoint = [
- new THREE.Vector3(-0.5, 0.5, 0),
- new THREE.Vector3(0.5, 0.5, 0),
- new THREE.Vector3(0.5, -0.5, 0),
- new THREE.Vector3(-0.5, -0.5, 0),
- ]
- cornerPoint.forEach(e=>{
- planeBound.expandByPoint(e)
- })
-
- }
-
- var shineMats = [];
- var getShineMat = function(texture1, texture2){
- var mat = shineMats.find(e=>e.uniforms.texture1.value == texture1 && e.uniforms.texture2.value == texture2)
- if(mat) return mat
- else{
- var mat = new THREE.ShaderMaterial({
- uniforms: {
- opac: {
- type: "f",
- value: 0
- },
- texture1: {
- type: "t",
- value: texture1
- },
- texture2: {
- type: "t",
- value: texture2
- }
- },
- vertexShader: "varying vec2 vUv;\n\nvoid main() {\n\n vUv = uv ;\n gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );\n\n}\n",
- fragmentShader: "varying vec3 vNormal;\n\nvarying vec2 vUv;\n\nuniform float opac;\n\n uniform 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"
- ,transparent: !0
- })
- shineMats.push(mat)
- return mat
- }
-
- }
- var modelGeos = [];
- var getModelGeo = function(url){
- var geo = modelGeos.find(e=>e.url = url )
- if(geo) return geo
- else{
-
- var geo = null;
-
- geo.url = url
- }
- }
-
- class Hot extends THREE.Object3D{
- constructor(info, source){
- super()
-
-
- this.sid = info.sid;
- this.preDeal(info, source)// source:旧版来源
-
- this.info = info
- this.cornerPoints = []
-
-
- this.build(info);
- this.name = "hot_" + this.sid ;
-
- model.hots[info.sid] = this
-
- }
-
- build(info) {
- hotGroup.add(this)
- this.setTitleElem()
- this.setFromInfo(info)
- }
-
-
-
-
-
- setFromInfo(info, media, objObject) {
-
-
-
- if(info.styleImg.length && info.styleImg[0].includes('images/4dagePoint')){
- info.styleImg = [] //xzw add default
- }
-
-
- //1 恢复到编辑之前 2 初始加载
- var plane = this.plane;
- /* var transformAtPanos = {}
- for(var i in info.transformAtPanos){
- transformAtPanos[i] = {//只保留一个位移,主要原因是大小变化和热点大小设置冲突了, isSprite和qutaernion衝突
- pos : info.transformAtPanos[i].pos && info.transformAtPanos[i].pos.clone(),
- //qua : info.transformAtPanos[i].qua && info.transformAtPanos[i].qua.clone(),
- }
- }
-
- this.transformAtPanos = transformAtPanos */
- //在每个漫游点独立设置的position。
- var curPanoTransform = this.info.transformAtPanos[ getTransformSid()] || {}
-
-
- //没有单独设置position的漫游点使用的position
- this.position.copy(curPanoTransform.pos || info.position)
- this.rotation.copy(info.rotation)
- this.scale.copy(info.scale)
-
- this.changeTexType(info.texType, media)
-
- if(!info.objSrc){
- this.addPlane()
- if (!!this.hasBox != !!info.hasBox) {
- this.addBox(!this.hasBox);
- }
- }else{
- this.addModel(objObject || new THREE.Mesh())//暂时创建个空的
-
- }
-
- this.updateMatrixWorld()
-
- /* if(!this.info.visiblePanos){//移到model.build时,在collider建好之后
- this.getVisiblePanos()
- } */
-
-
-
- {//gif
- if(this.animation){
- GifTexDeal.remove(this.animation)
- }
-
- if(this.info.animateInfo && this.material_.map){
- this.animation = GifTexDeal.addAnimation(this.material_.map, this, this.info.animateInfo, this.sid )
- this.visible && this.inSight() && GifTexDeal.start(this.animation)
- }
- }
-
-
-
- /* if(this.info.modelBound){
- this.mesh.updateMatrixWorld()
- this.mesh.boxHelper2 = new THREE.Box3Helper( new THREE.Box3().copy(this.info.modelBound.bound).applyMatrix4(this.mesh.matrixWorld), new THREE.Color("#00aaee"));
- model.add(this.mesh.boxHelper2)
-
- }else{
- var bound = new THREE.Box3()
-
- var cornerPoint = [
- new THREE.Vector3(-0.5, 0.5, 0),
- new THREE.Vector3(0.5, 0.5, 0),
- new THREE.Vector3(0.5, -0.5, 0),
- new THREE.Vector3(-0.5, -0.5, 0),
- ]
- cornerPoint.forEach(e=>{
- bound.expandByPoint(e)
- })
-
- this.mesh.updateMatrixWorld()
- this.mesh.boxHelper2 = new THREE.Box3Helper( bound.applyMatrix4(this.mesh.matrixWorld), new THREE.Color("#00aaee"));
- model.add(this.mesh.boxHelper2)
-
- } */
- }
-
-
-
-
- changeTexType(texType, media){
-
- var plane = this.plane;
-
- if( this.texType != texType || media == 'clear'){
- //删除旧的
- if(this.texType == 'shine'){
- /* this.material_.uniforms.texture1.value.dispose()
- this.material_.uniforms.texture2.value.dispose() */ //为了恢复 不删
- }else{
- //this.material_.map.dispose()
-
- if(this.texType == 'video'){
- this.texMedia && this.texMedia.pause()
- }else{
-
- }
-
- }
-
- if(this.material_ && !hotGroup.children.find(e=>e!=this && e.material_ == this.material_ )){
- this.material_.dispose()
- }
-
- //添加新的
- if(texType == 'shine'){
-
- }else{
-
- this.changeMaterial(new THREE.MeshBasicMaterial({
- color: "#00c8af",
- opacity: 0.4,
- transparent: !0,
- polygonOffset: true,
- //是否开启多边形偏移 //ie不开启时blank也不会闪烁
- polygonOffsetFactor: -0.9,
- //多边形偏移因子
- polygonOffsetUnits: -4.0,
- //多边形偏移单位
- }))
-
-
- if(texType == 'video'){
-
- }else{
-
- }
-
- }
-
-
- }
-
-
-
- this.texType = texType
- if(media == 'clear'){
- this.material_.opacity = 0.4;
- this.texMedia = null
- return
- }
-
-
-
- if(texType == 'video'){//视频不能共用一个,否则会一起播放暂停
- var video
- if(media){
- video = media
- }else{
- if(!this.info.texSrc)return
-
- var video = $(`<video controls="controls" loop x5-playsinline="" webkit-playsinline="true" playsinline="true" controlslist="nodownload" preload="meta" ></video>`)[0]
- if(window.isEdit) video.src = manage.dealURL(this.info.texSrc); //注意,src赋值就会自动加载, preload="meta" 只加载元数据,提高加载速度,否则一开始卡
-
- /* let src = this.info.texSrc
- if(window.isEdit) src = manage.dealURL(src);
- var video = window.videoPlayer.getVideo(src)*/
-
-
- video.name = this.info.fileName
- }
-
-
- video.setAttribute("crossOrigin", 'Anonymous')//要在src设置好前解决跨域
-
- $(video).on('contextmenu', function() {
- return false;
- });//禁止右键点击出
-
- this.texMedia = video;
-
- video.oncanplaythrough = (e)=> {
- if(this.texMedia == video){
- /* if(video.paused) *///console.log({str:'oncanplaythrough '+this.sid, level:1})
- //this.material_.map.needsUpdate = !0 //当初为何加这句?
- //this.update(player)
- }
- }
- /* video.onloadstart = (e)=> {
- console.log({str:'onloadstart '+this.sid, level:1})
- }
- video.onloadedmetadata = (e)=> {
- console.log({str:'onloadedmetadata '+this.sid, level:1})
- }
- video.onloadeddata = (e)=> {
- console.log({str:'onloadeddata '+this.sid, level:1})
- }
- video.oncanplay = (e)=> {
- console.log({str:'oncanplay '+this.sid, level:1})
- } */
-
-
-
- video.volume = 0
- video.muted = true
- video.currentTime = 0
-
-
- if(!window.isEdit) this.material_.opacity = 0.3;
- this.material_.map = new THREE.VideoTexture(video)
- this.material_.map.wrapS = this.material_.map.wrapT = THREE.ClampToEdgeWrapping;
-
- this.material_.map.generateMipmaps = true;
- }else if(texType == 'photo'){
-
- if(media){
- this.texMedia = media;
- this.info.texSrc = media.src;
- this.material_.map = new THREE.Texture(); //texture也不能共用一个,因为有的会有动画,就不一样
- this.material_.map.image = media //image可以共用
- this.material_.map.needsUpdate = !0
- this.material_.opacity = 1
- }else{
- if(!this.info.texSrc)return
- this._loadDones = []
- this.material_.opacity = 0.1;
- }
- }else if(texType == 'shine'){
- if(media){
- this.changeShineTex(media)
- }else{
- this.styleImg = /* this.styleImg || */ [];
- if(this.info.styleImg){
- this.styleImg = this.info.styleImg.map((src)=>{
- return {src:/* manage.dealURL( */src } //如果要dealURL,在predeal里
- })
- }
- this.changeShineTex(this.styleImg)
- }
- this.info.texSrc = null
- }
- if(this.material_.map){
- /* this.material_.map.minFilter = THREE.LinearFilter;
- this.material_.map.magFilter = THREE.LinearFilter; */
- dealMap(this.material_.map);
- this.material_.color.set("#FFFFFF");
-
- this.material_.needsUpdate = true
- }
-
- }
-
- changeShineTex(styleImg){
-
- styleImg = styleImg || this.styleImg
- var tex1, tex2
- if(styleImg.length){
- tex1 = Texture.load(styleImg[0].src);
- tex2 = Texture.load(styleImg[1]&&styleImg[1].src || styleImg[0].src);
- dealMap(tex1,{ignoreResize:true} )
- dealMap(tex2,{ignoreResize:true} )
- }else{
- tex1 = defaultTex1;
- tex2 = defaultTex2;
- }
- this.changeMaterial(getShineMat(tex1, tex2))
- this.styleImg = styleImg
-
- this.info.styleImg = styleImg.map(img=>img.src)
-
- }
-
-
-
-
-
-
- changeMaterial(mat){
- this.material_ = mat;
- this.mesh && this.mesh.traverse((mesh)=>{
- if(mesh.material && !(mesh instanceof THREE.Box3Helper)){
- mesh.material = this.material_;
- }
- })
- }
-
-
-
-
-
- preDeal(info, source){// source:来源
-
- var convertValue = function(v ,Type){
- var value;
- if(v instanceof Array){
- v.forEach((v1)=>{v1 = parseFloat(v1)})
- value = new Type().fromArray(v);
- }else{
-
- if(!(v instanceof Type)){
- for(let i in v){v[i] = parseFloat(v[i])}
- value = new Type().copy(v);
- }else{
- value = v
- }
-
- }
- return value
- }
-
-
- if (!info.transformAtPanos) info.transformAtPanos = {}
-
-
- if(source == 'byHot'){
- var infoAttribute = info.infoAttribute || {}
- info.title = infoAttribute.title || info.title
- info.model = infoAttribute.model || info.model || [] //模型链接
- info.images = infoAttribute.images || info.images || []
- info.video = infoAttribute.video || info.video || []
- info.bgName = infoAttribute.bgName || info.bgName
- info.backgroundMusic = info.backgroundMusic || info.backgroundMusic
- info.iframe = infoAttribute.iframe || info.iframe || []
- info.styleImg = infoAttribute.styleImg || info.styleImg || []
- info.content = infoAttribute.content || info.content
-
-
- {
- let action = CloneObject(settings.hotClickEvent.shine);
- if(info.actionType == 'noAction' || info.noAction){
- action.examine = false,
- action.openHot = false
- }else if(info.actionType == 'dontExam'){
- action.examine = false
- }
- info.actionType = action
- }
-
-
- if(info.quaternion){
- info.rotation = new THREE.Euler().setFromVector3(convertValue(info.quaternion, THREE.Quaternion ))
- }else{
- info.rotation = new THREE.Euler().setFromVector3(convertValue(info.rotation, THREE.Vector3 )) //热点的旧数据很多是字符串
- }
-
- var s = Hot.getDefaulScale(info.hotIconScale) //旧版的大小,统一转换成新版
- info.scale = new THREE.Vector3(s,s,0.02)
-
-
- delete info.infoAttribute;
- /* for (let i in this.transformAtPanos) {
- info.transformAtPanos[i].pos = new THREE.Vector3().fromArray(info.transformAtPanos[i].pos)
- info.transformAtPanos[i].qua && (info.transformAtPanos[i].qua = new THREE.Quaternion().fromArray(info.transformAtPanos[i].qua))
- } */
-
- info.texType = "shine"
-
- }else{
- if(source == 'byOverlay'){
- info.texType = info.media[0]
- //info.title = info.texType == 'video'?'视频':'图片'
-
- info.texSrc = info.file
- info.actionType = CloneObject(settings.hotClickEvent[info.texType]);//给一个默认
-
- delete info.media
-
- info.rotation = new THREE.Euler().setFromQuaternion(convertValue(info.qua, THREE.Quaternion ))
- info.position = info.pos
- delete info.pos;
- delete info.qua;
-
-
- let a = info.texSrc.split('/');
- info.fileName = a.pop()
-
- info.scale = new THREE.Vector3(
- info.width,
- info.height,
- info.depth
- )
- delete info.width; delete info.height; delete info.depth;
- delete info.file
- }else{
-
- info.rotation = new THREE.Euler().fromArray(info.rotation)//.setFromVector3(info.rotation)
- }
-
-
-
- info.model = info.model || [] //模型链接
- info.images = info.images || []
- info.video = info.video || []
- info.iframe = info.iframe || []
- info.styleImg = info.styleImg || []
- info.imagesDesc = info.imagesDesc || []
- info.videosDesc = info.videosDesc || []
- info.titleShowType = info.titleShowType || 'hover'
- info.titlePos = info.titlePos || 'right'
-
-
-
- }
-
- if(info.texSrc){
- info.texSrc = manage.removeSrcPostMark(info.texSrc)
- }
-
-
- //whole:
-
- //为了兼容旧数据,尽量和hot的数据靠近,最后保存在hot里
- info.position = convertValue(info.position, THREE.Vector3)
- info.scale = convertValue(info.scale, THREE.Vector3)
- delete info.quaternion
-
- info.linkType = info.linkType || "common"
- for (let i in info.transformAtPanos) {
- info.transformAtPanos[i].pos = new THREE.Vector3().fromArray(info.transformAtPanos[i].pos)
- //info.transformAtPanos[i].qua = new THREE.Quaternion().fromArray(info.transformAtPanos[i].qua)
- }
-
- }
-
-
-
-
-
-
-
-
-
- addBox(state) {
- if (state == !!this.hasBox) {
- return;
- }
- if (state) {
- var box = new THREE.Mesh(_boxGeometry,_boxMat)
- box.position.set(0, 0, 1 / 2);
- box.renderOrder = 3
- this.plane.position.set(0, 0, 1);
- this.add(box);
- this.box = box;
- } else {
- this.plane.position.set(0, 0, 0);
- this.remove(this.box);
- this.box = null;
- }
- this.hasBox = this.info.hasBox = state
- }
- /* getSizeByScale() {
- return {
- width: settings.defaultOverlaySize[0] * this.scale.x,
- height: settings.defaultOverlaySize[1] * this.scale.y
- }
- }
-
- getScaleBySize(width, height) {
- return {
- x: width / settings.defaultOverlaySize[0],
- y: height / settings.defaultOverlaySize[1],
- }
- }*/
-
- setVisiblePanos(visibleData){
- if(visibleData)this.info.visiblePanos = visibleData
- else if(!this.info.visiblePanos) this.getVisiblePanos()
- }
-
- getVisiblePanos(){//在不同点还不一样
- var depth = this.hasBox ? this.scale.z : 0;
- var width = this.scale.x, height = this.scale.y
-
- var cornerPoint
- if(this.plane){
- cornerPoint = [
- new THREE.Vector3(0, 0, depth),
- new THREE.Vector3(-width/2, height/2, depth),
- new THREE.Vector3(width/2, height/2, depth),
- new THREE.Vector3(width/2, -height/2, depth),
- new THREE.Vector3(-width/2, -height/2, depth),
- ]
- }else{
- var bound = new THREE.Box3().copy(this.info.modelBound.bound)
- var center = bound.center()
- cornerPoint = [
- new THREE.Vector3(center.x,center.y,center.z),
- new THREE.Vector3(bound.min.x, bound.min.y, bound.min.z ),
- new THREE.Vector3(bound.min.x, bound.min.y, bound.max.z ),
- new THREE.Vector3(bound.min.x, bound.max.y, bound.min.z ),
- new THREE.Vector3(bound.max.x, bound.min.y, bound.min.z ),
- new THREE.Vector3(bound.max.x, bound.max.y, bound.min.z ),
- new THREE.Vector3(bound.max.x, bound.min.y, bound.max.z ),
- new THREE.Vector3(bound.min.x, bound.max.y, bound.max.z ),
- new THREE.Vector3(bound.max.x, bound.max.y, bound.max.z ),
- ];
-
- }
-
- var getPos = (position)=>{//每个overlay位置对应5个坐标,plane中心和四个角的位置
- if(this.plane){
- return cornerPoint.map(e=>{
- return e.clone().applyEuler(this.info.rotation).add(position)
- })
-
- }else{
- var matrixWorld = new THREE.Matrix4().compose(position, this.quaternion, this.scale)
- matrixWorld.multiplyMatrices(matrixWorld, this.mesh.matrix)
-
- return cornerPoint.map(e=>{
- return e.clone().applyMatrix4(matrixWorld);
- })
- }
-
-
- }
-
- this.info.visiblePanos = []
- var customPositions = getPos(this.info.position )
- var posAtPanos = {}
-
- for(let panoId in this.info.transformAtPanos){
- if(panoId == 'outSide')continue;
- posAtPanos[panoId] = getPos(this.info.transformAtPanos[panoId].pos )
- }
-
-
-
-
- let maxCount = browser.isMobile() ? 2000 : 5000
-
- let possiblePanos = model.panos.list
- if(this.plane){//目前都是单面,所以只要可以看到的一面的热点
- let dir1 = new THREE.Vector3(0,0,-1).applyQuaternion(this.quaternion).negate()
- possiblePanos = possiblePanos.filter(pano=>{
- let dir2 = new THREE.Vector3().subVectors(pano.position, this.position).normalize();
- return dir1.dot(dir2)>0
- })
- }
-
- let c = model.panos.list.length * model.colliders.length
- if(window.isEdit || c < maxCount){ //编辑页面保险起见还是全部算完后才可浏览,就能保证保存全部的visiblePano
- this.info.visiblePanos = common.getVisiblePano(customPositions, possiblePanos , {
- model: model.colliders , posAtPanos
- })
-
- }else{
- let start = 0
- let interval = setInterval(()=>{
- let end = start + Hot.visiPanosCountSlice;
- end = Math.min(end, possiblePanos.length)
- let i = start
- start = end
- let panos = possiblePanos.slice(i,end)
-
-
- this.info.visiblePanos = this.info.visiblePanos.concat( common.getVisiblePano(customPositions, panos, {
- model: model.colliders , posAtPanos
- }));
-
- if(end>=possiblePanos.length){
- //console.log(window.hotsi ?(++window.hotsi): (window.hotsi = 1))
- clearInterval(interval)
- }
- }, Hot.visiEveryDurSlice )// visiEveryDurSlice 等在main中定义
- }
-
- }
-
-
- updateVisible(panos, visibility) {
- if(window.isEdit && editTool.hotpoint.editSpot == this){
- return this.visible = true
- }
-
- this.visible = visibility != void 0 ? visibility : (!this.info.visiblePanos || !!panos.find(pano=>this.info.visiblePanos.includes(pano.id)))
- this.titleElem && this.titleElem.setVisible(this.visible, 'hotVisible')
-
- if (this.texType == 'video'){
- //this.switchPlay(this.visible, this.visible ? null : 'stop' );//可见时不操作;不可见时停止
- this.update(player)
- }
- }
-
- getBoundOri(){
- let bound
- if(this.objObject){
- bound = new THREE.Box3().copy(this.info.modelBound.bound)
- }else{
- bound = planeBound.clone()
- }
- return bound
- }
-
- getCornerPoint(){//获取在每个漫游点上的视觉边界点 可以打开boxHelper和addBall来观测是否准确
- if(this.cornerPoints[player.currentPano.id]){
- return this.cornerPoints[player.currentPano.id]
- }else{
- var boundPoint, cornerPoint
- var center//中心点
- if(this.plane){
- center = this.plane.getWorldPosition()
- boundPoint = [
- new THREE.Vector3(-0.5, 0.5, 0),
- new THREE.Vector3(0.5, 0.5, 0),
- new THREE.Vector3(0.5, -0.5, 0),
- new THREE.Vector3(-0.5, -0.5, 0),
- ]
-
- }else{
-
- var bound = new THREE.Box3().copy(this.info.modelBound.bound)
- boundPoint = [
- new THREE.Vector3(bound.min.x, bound.min.y, bound.min.z ),
- new THREE.Vector3(bound.min.x, bound.min.y, bound.max.z ),
- new THREE.Vector3(bound.min.x, bound.max.y, bound.min.z ),
- new THREE.Vector3(bound.max.x, bound.min.y, bound.min.z ),
- new THREE.Vector3(bound.max.x, bound.max.y, bound.min.z ),
- new THREE.Vector3(bound.max.x, bound.min.y, bound.max.z ),
- new THREE.Vector3(bound.min.x, bound.max.y, bound.max.z ),
- new THREE.Vector3(bound.max.x, bound.max.y, bound.max.z ),
- ];
-
- }
-
-
- var maxLon = -Infinity
- var minLon = +Infinity
- var maxLat = -Infinity
- var minLat = +Infinity
- var pos1 = player.currentPano.position.clone();
- center = this.position.clone() //模型bound的中心点已经位移到了hot中心点。 注意不能用getWorldPosition,得到的会是偏移的
- var dir = center.clone().sub(pos1).normalize()
- var centerDirInfo = { }
- player.cameraControls.controls.panorama.lookAt.call( centerDirInfo , null, dir )
-
- boundPoint.forEach(e=>{//lon左右
- var point = e.applyMatrix4(this.mesh.matrixWorld);
- var dir = point.clone().sub(pos1).normalize()
- var dirInfo = { }
- player.cameraControls.controls.panorama.lookAt.call( dirInfo , null, dir )
- var diffLon = (dirInfo.lon-centerDirInfo.lon) % 360
-
-
- if(Math.abs(diffLon)>180){//因为有时需要根据符号判断是在中心的左边还是右边,所以限制在180内
- diffLon += (diffLon>0 ? -360 : 360)
- }
-
- var diffLat = dirInfo.lat-centerDirInfo.lat
-
- maxLon = Math.max(diffLon, maxLon)
- minLon = Math.min(diffLon, minLon)
- maxLat = Math.max(diffLat, maxLat)
- minLat = Math.min(diffLat, minLat)
-
- })
-
- var diffLon = maxLon - minLon
- var diffLat = maxLat - minLat
-
-
- if(diffLat>180) {//可能是到了反面。不好算,直接返回所有boundPoint
-
- cornerPoint = boundPoint
-
- }else{
- //读取lon lat的最大最小值,勾勒出一个没有倾斜的矩形 。它比boundPoint看起来范围更大些
- maxLon = maxLon + centerDirInfo.lon
- maxLat = maxLat + centerDirInfo.lat
- minLon = minLon + centerDirInfo.lon
- minLat = minLat + centerDirInfo.lat
-
- var dirs = [
- math.getDirByLonLat(maxLon, maxLat),
- math.getDirByLonLat(minLon, minLat),
- math.getDirByLonLat(maxLon, minLat),
- math.getDirByLonLat(minLon, maxLat),
- ]
- cornerPoint = dirs.map(e=>{
- return e.clone().add(pos1)
- })
- cornerPoint = [center, ...cornerPoint] //最后增加一个中心点
-
-
- }
-
- /* if(this.objObject){
- cornerPoint = [pos2, ...cornerPoint]
- } */
-
-
- //addPoints(cornerPoint)
-
-
- this.cornerPoints[player.currentPano.id] = {cornerPoint, diffLon, diffLat}
-
- return this.cornerPoints[player.currentPano.id]
- }
-
-
- }
-
-
-
-
- getMediaSize(){
- let size = new THREE.Vector2;
- if(this.texMedia){
- if(this.texType == 'photo'){
- size.x = this.texMedia.width;
- size.y = this.texMedia.height;
- //动画的话再变
- if(this.info.animateInfo){
- size.x /= this.info.animateInfo.cellXcount
- size.y /= this.info.animateInfo.cellYcount
- }
- }else{
- size.x = this.texMedia.videoWidth || this.videoWidth
- size.y = this.texMedia.videoHeight || this.videoHeight
- }
- }
- return size
- }
-
-
- inSight(){
- //return true
- if(window.isEdit)return true // 太容易move了
-
- if(player.mode == 'panorama' && player.currentPano){
- if(!player.camera) return
-
- var cornerPointInfo = this.getCornerPoint();
- var cornerPoint
-
-
- let min = new THREE.Vector2(5,5)
- let scaleRatio = 1/player.zoomLevel;
-
- //根据media原始大小来调整阈值: media的原始大小能代表期望显示的大小,如果显示大小的远小于期望大小,就不显示(此时能感受到贴图锯齿严重,清晰度被浪费)。比如如果gif是一个很小的按钮,即使diffLon很小也要显示。缺点:需要用户根据所需上传合适清晰度的图。
-
- let size = this.getMediaSize()
- if(size.x>0){
- scaleRatio *= Math.sqrt(size.x * size.y) / 1000
- }
- min.multiplyScalar(scaleRatio)
-
-
- if(cornerPointInfo.diffLon < min.x || cornerPointInfo.diffLat < min.y ){
- //console.log('two far and small')
- return false
- }
-
- if(cornerPointInfo.diffLon < 15 && cornerPointInfo.diffLat < 15){//当很小的时候,只判断中心点即可
- cornerPoint = [cornerPointInfo.cornerPoint[0]];
- }else{
- cornerPoint = cornerPointInfo.cornerPoint
- }
-
- for(let i=0,j=cornerPoint.length;i<j;i++){//只要有一点可见就算看见
- var pos2d = math.getPos2d(cornerPoint[i], player.camera, $("#player")[0])
-
- if(pos2d.trueSide && pos2d.inSight) return true
-
- }
-
- }else{//飞出 只判断在不在画面内
- //return playVideoWhenFlyOut//true
- let frustumMatrix = new THREE.Matrix4
- frustumMatrix.multiplyMatrices(player.camera.projectionMatrix, player.camera.matrixWorldInverse)
-
- let frustum = new THREE.Frustum();
- frustum.setFromMatrix(frustumMatrix)
-
- let bound = this.getBoundOri()
- bound.applyMatrix4(this.matrixWorld)
- return frustum.intersectsBox(bound)
- }
-
-
-
- }
-
-
- update(player){
-
- if(this.info.isSprite){
- this.quaternion.copy(player.camera.quaternion)
- }
-
- this.updateScale()
- this.updateTitle()
- }
-
- updateScale(e, t) {//自适应调节大小
- if(!DATA.autoAdjustHotScale || this.texType != 'shine' || !this.plane )return
-
- var scale = convertTool.getScaleForConstantSize($.extend({},autoSizeInfo,{
- position: this.position.clone()
- }))
- this.plane.scale.set(scale,scale,scale)
-
- }
- switchPlay(state){//手动播放暂停
- this.pausedByUser = !state
-
- this.videoControl(state)
-
- }
-
- loadVideo(video){
- if(video.src_)return
- video.src = video.src_ = manage.dealURL(this.info.texSrc);
- }
-
- videoControl(state){
- if(this.texType != "video" || !this.material_.map)return
- var video = this.texMedia
- this.shouldPlay = state
-
-
-
- if(!state || state == 'stop'){
- if(!video.paused){
- video.pause()
- console.log({str: "paused " + this.sid, level:1})
- }
- /* video.lastCurTime = state == 'stop' ? 0 : video.currentTime //记录
- video.src = video.src_ = '' */
-
- if(state == 'stop'){
- video.currentTime = 0;
- }
- }else if(state){
- if(/* !isVideoPlayed(video) */ video.paused ){
- console.log({str: 'videoControl play ' +", "+ this.sid, level:1})
- this.loadVideo(video)
- video.play()
- //video.currentTime = video.lastCurTime || 0
- this.changeOpaWhenPlay(video)
-
- if(isVideoPlayed(video))console.log({str:"played " + this.sid + video.duration ,level:1})
- }
-
- }
- }
-
-
- changeOpaWhenPlay(video){//当播放成功后,恢复为不透明
- if(isNaN(video.duration)){//未加载好
- return setTimeout(()=>{
- this.changeOpaWhenPlay(video)
- },100)
- }
- const minPlayedTime = Math.min(video.duration/10, 0.1); //到这个时间说明加载成功
- if(!video.hasInitedOpacity){
- setTimeout(e=>{
- //console.log('trychangeOpa ',this.sid,video.currentTime)
- if(video.currentTime>minPlayedTime){
- this.material_.opacity = 1
- video.hasInitedOpacity = true
- //console.log('changeOpaWhenPlay',this.sid)
- }else{
- if(!video.paused){//再次尝试
- return setTimeout(()=>{
- this.changeOpaWhenPlay(video)
- },500)
- }
- }
- },minPlayedTime*1000+500)
- }
- }
-
-
-
- /* setDefaultHotScale = function(){//设置成默认热点大小
- var w = DATA.hotIconScale) * g_HotMeshSize.g_HotMeshWidth
- this.scale.set( w, w, this.scale.z)
- } */
-
-
- setTitleElem(){
- var title = this.info.title;
- if(title){
- if(!this.titleElem){
- this.titleElem = new Label2D({position:this.position, innerHTML:`<div>${title}</div>`, domElement:$("#hot")[0], shelterByModel:true })
- }else{
- this.titleElem.elem.html(`<div>${title}</div>`)
- }
- this.titleElem.setVisible(this.visible, 'hotVisible')
- this.setHoverState(false)
- this.setTitleDir()
- }else{
- if(this.titleElem){
- this.titleElem.dispose()
- this.titleElem = null;
- }
- }
- }
-
-
-
- setTitleDir(){
- this.titleElem && this.titleElem.elem.attr('pos',this.info.titlePos)
- }
-
-
- updateTitle(){
- this.titleElem && this.titleElem.update()
- }
-
-
-
- setHoverState(state){
- if(!this.titleElem)return
- this.hovered = !!state
-
- var v = this.info.titleShowType != 'unvisible' && (this.info.titleShowType == 'always' || this.hovered)
- this.titleElem.setVisible(v, 'hoveredVisi')
- //this.updateTitle()
- }
-
-
- closestPanoTowardTag(e, t) {
- var i = []
- , n = []
- , r = this.mesh.getWorldPosition();
- if (e === "panorama") {
- /* var o = t.position.clone().sub(r).normalize();
- n.push(function(t, i) {//scoreFunctions.direction 最好这个漫游点在currentPano到热点之间的路径上。但是这样的话可能就看不到热点正面,所以删掉
- return function(e) {
- return e.position.clone().sub(t).normalize().dot(i) * window._settings.navigation.directionFactor
- }}(r, o)
- ) */
- }
- var a = new THREE.Vector3;
- i.push(function(e) {
- 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
- },
- function(e) {
- a.copy(r).sub(e.position);
- var t = -THREE.Math.radToDeg(Math.atan(a.y / Math.sqrt(a.x * a.x + a.z * a.z)))
- , i = window._settings.tags.navigate.tiltTolerance
- return window._settings.insideLookLimitDown - i < t && t < window._settings.insideLookLimitUp + i
- },
-
- (pano)=>{ // add
- return player.checkHasNeighbor(pano)
- },
-
- (pano)=>{ // add
- // 周恩光改 解决visiblePanos为undefined时的bug
- return !this.info.visiblePanos || this.info.visiblePanos.includes(pano.id)
- }
- )
- n.push(
- (function(hot, i) { //scoreFunctions.distanceSquared
- return function(pano) {
- //i = a.navigation.distanceFactor
- return hot ? hot.position.distanceToSquared(pano.position) * i : 0
- }
- })(this, -2)
- ,
-
- (pano)=>{//尽量正对hot
- let dir = new THREE.Vector3(0,0,1).applyQuaternion(this.quaternion)
- let dir2 = new THREE.Vector3().subVectors(pano.position, this.position).normalize();
- let s = dir.dot(dir2) * 60;
- //console.log(pano.id + ":" + s)
- return s
- }
- );
-
-
- /* var tanD = player.domElement.clientWidth / player.domElement.clientHeight * Math.tan((THREE.Math.degToRad(player.zoomFov/2))) ;
- var goodDistance = overlay.width / 2 / tanD;
- n.push(
- function (pano) { //寻找正对着overlay的pano
- var overlayDir = new THREE.Vector3(0,0,1).applyQuaternion(overlay.quaternion)
- var v1 = overlayDir//.setY(0); 朝上的话set0会得到0,0,0 无法求angle
- var v2 = pano.position.clone().sub(overlay.position)//.setY(0)
- var angle = v1.angleTo(v2)
- angles[pano.id] = angle;
- angle = -angle * 100
- return angle
- },
- function (pano) { //寻找正对着overlay的pano
- var dis = pano.position.clone().distanceToSquared(overlay.position)
- var goodDistance2 = goodDistance * Math.abs(Math.cos(angles[pano.id]))//考虑了倾斜角度后的最佳距离
-
- var result = - 300 * Math.abs(dis-goodDistance2) / goodDistance2 //dis和goodDistance2差距越大分数越低
- return result;
- }
- ) */
-
-
-
-
- var s = t.model.panos.sortByScore(i, n);
- console.log(s)
- return s && 0 < s.length && s[0].item
- }
-
-
-
-
-
- examine(options={}) {
- var openHot = this.info.link && this.info.actionType.openHot && !options.dontOpen
- var fastTran = !options.dontFastTran && ( this.info.actionType.fastTran || settings.hotFastTran || options.fastTran)
- if(fastTran){//瞬间过渡 1到固定方位 2到和普通过渡一样的位置,也就是最适合的位置
- let info = this.info.cameraData
- if(info){
- player.blackToPano({
- pano: player.model.panos.index[info.pano.uuid],
- quaternion: new THREE.Quaternion().fromArray(info.camera.quaternion)
- })
- }
- }
-
-
-
- var needExamine = !fastTran && (options.examine || (!settings.dontExamHot && this.info.actionType.examine))
- if(!openHot && !needExamine)return;
-
-
- if(openHot && this.info.linkType!="common" && this.info.iframe && this.info.iframe[0]){
- var src = getLink(this.info.iframe[0]);
-
- if(this.info.linkType=="jumpLink"){
- var newPage = window.open(src, "_blank" );
- newPage.focus();
-
- }else if(this.info.linkType=="iframeDiv"){
-
- var div = document.createElement("div");
- div.style.position = 'fixed';
- div.style.width = div.style.height = "100%";
- div.style.left = div.style.top = '0';
- div.style["z-index"] = "999"
-
- var exit = document.createElement("div");
- exit.style["background-image"] = "url(images/vrOffImg.png)";
- exit.style.position = 'absolute';
- exit.style.width = exit.style.height = "50px";
- exit.style.left = '17px'; exit.style.top = "20px"
- exit.style.cursor = "pointer";
- exit.style["background-repeat"] = "no-repeat";
- exit.style["background-size"] = "25%";
- exit.style["background-position"] = "center center";
- exit.style["background-color"] = "rgba(0, 0, 0, 0.2)";
- exit.style["border-radius"] = "50%";
- exit.style["z-index"] = "3"
- exit.onclick = ()=>{
- $(div).remove()
-
- Hot.closePopup()
-
- }
-
- var myElement = document.createElement("iframe");
- myElement.style.position = 'absolute';
- myElement.style.width = myElement.style.height = "100%";
- myElement.style.left = myElement.style.top = '0';
-
- myElement.src = src
-
- $("body").append(div);
- div.appendChild(exit);
- div.appendChild(myElement)
-
- SoundManager.play('hot')
-
-
- }
-
-
- return;
- }
-
-
- if(!player.currentPano)return;
-
- var popup = document.getElementById("popup");
-
- if (openHot) {
- g_currentHot = this,
- popup.style.display = "block",
- popup.classList.add("wait");
- var n = document.createElement("iframe");
-
- SoundManager.play('hot')
-
- var src = getLink(this.info.link )
- n.src = src;
- n.id = "id1",
- n.allowTransparency = "true";
- var a = document.getElementById("id1");
- if (void 0 === a || null == a) {
- document.querySelector(".popup-content").appendChild(n);
- var s = !1;
- window.loaddingSuccess = function() {
- s = !0
- }
- ,
- setTimeout(function e() {
- if (s) {
- var t = document.querySelector("#id1").contentWindow.document;
- t.querySelector("video") && (t.querySelector("video").play(),
- !t.querySelector("video").paused && t.querySelector(".playPause") && t.querySelector(".playPause").classList.add("fa-pause")),
- t.querySelector("audio") && t.querySelector("audio").play()
- } else
- setTimeout(e, 300)
- }, 800)
- }
- }
-
-
-
- var done = function() {
- player.flyingToTag = !1;
- openHot && popup.classList.remove("wait")
- }.bind(this);
-
-
- if(!needExamine){
- done()
- return;
- }
-
- var c = this.closestPanoTowardTag(player.mode, player.currentPano) || player.currentPano
- , h = this.mesh.getWorldPosition();
- player.flyingToTag = !0;
-
-
-
- if (player.mode === 'panorama') {
- var d = {
- pano: c,
- lookAtPoint: h,
- duration: options.duration,
- maxDistanceOverride: null,
- skipWarpingCheck: !1,
- aimDuration: options.aimDuration,
-
- };
- if(fastTran){
- let f = (new THREE.Matrix4).lookAt(c.position, h, new THREE.Vector3(0,1,0));
- let quaternion = (new THREE.Quaternion).setFromRotationMatrix(f)
- player.blackToPano({
- pano:c,
- quaternion,
- })
- done()
- }else{
- player.flyToPano(d, done)
- }
-
- } else {
- var p = {
- pano: c
- };
- if (h) {
- var f = (new THREE.Matrix4).lookAt(c.position, h, new THREE.Vector3(0,1,0));
- p.quaternion = (new THREE.Quaternion).setFromRotationMatrix(f)
- }
- p.callback = done,
- p.duration = options.duration || 1500,
- p.mode = 'panorama',
- p.aimDuration = options.aimDuration
- player.flyToNewMode(p)
- }
- }
-
-
-
- addModel(object){
- if(this.objObject){
- this.remove(this.objObject)
- }
- this.objObject = object;
-
- /* object.traverse((mesh)=>{
- if(mesh.material && mesh.type == "hotSprite"){
- mesh.material = this.material_;
- }
- }) */
-
- object.name = this.info.objName;
- object.src = this.info.objSrc
-
-
-
- this.info.hasBox = false
- this.addBox(false)
- this.remove(this.plane);
- this.plane = null;
-
-
- this.setMesh(this.objObject)
- //this.adjustModelAuto()
- if(this.info.modelBound){//应该不会改变
- var s = this.info.modelBound.scaleRatio
- this.mesh.scale.set(s,s,s)
- this.mesh.position.fromArray(this.info.modelBound.position)
- this.mesh.modelBound = this.info.modelBound
-
- }
- this.material_.side = THREE.FrontSide
- this.changeBoxHelperDisplay(false)
- //this.mesh.boxHelper.visible = true
-
- }
-
-
- addPlane(){//换成plane
- if(this.plane)return
- this.plane = new THREE.Mesh(_planeGeometry, this.material_)
- this.remove(this.objObject)
- this.objObject = null
- delete this.info.objSrc
- delete this.info.objName
- delete this.info.modelBound
- this.setMesh(this.plane)
- //this.material_.side = THREE.DoubleSide //双面的话飞出来会看到悬空的
-
- }
-
-
- setMesh(mesh){
- this.mesh = mesh
- this.add(this.mesh);
-
- this.changeMaterial(this.material_) //re applyTo every mesh
-
- this.mesh.traverse((mesh)=>{
- mesh.type = "hotSprite" //raycaster use
- mesh.renderOrder = 3
- })
-
- if(!this.mesh.boxHelper){
- var boxHelper = this.mesh.children.find(e=>e instanceof THREE.Box3Helper)
- if(boxHelper){
- this.mesh.boxHelper = boxHelper
- }else{
- var bound = this.getBoundOri()
- bound.expandByVector(new THREE.Vector3(0.0001,0.0001,0.0001))
- this.mesh.boxHelper = new THREE.Box3Helper( bound, new THREE.Color( "#00ffff"));
- this.mesh.add(this.mesh.boxHelper)
- this.mesh.boxHelper.material.depthTest = false;
- this.mesh.boxHelper.material.transparent = true
- this.mesh.boxHelper.visible = false
- }
- }
- }
-
- changeBoxHelperDisplay(show){
- if(show){
- this.visible_ = this.visible
- this.visible = true
- this.mesh.boxHelper.visible = true
- }else{
- if(this.visible_ != void 0){
- this.visible = this.visible_
- }
- this.mesh.boxHelper.visible = false
- }
-
- }
-
-
- /* addToLoadQueue() {
- if (this.texType == 'photo') {
- Hot.loadQueue.includes(this) || Hot.loadQueue.push(this)
- }
- } */
-
-
- requestDownload(type, callback) {
- var plane = this.plane;
-
- if(type == 'photo'){
- if(this.photoHasRequestLoad || this.texType != 'photo'){
- return; //为什么之前1191需要在这加callback() 才能呢。现在又没事了
- }
- //console.log(' beginDownload : ' + this.sid)
-
-
- /* this.material_.map = */Texture.load(this.info.texSrc, (tex)=>{
- callback && callback()
- if(!tex.image ){
- return //只是单纯用了相同src的tex,但image仍未加载完
- }
- if(!this._loadDones){
- return
- }
- dealMap(tex)
-
- setTimeout(Hot.loadNext, 50)
- hotGroup.children.forEach(e=>{
- if(e.info.texSrc == this.info.texSrc && e.info.texType == type ){
- e.material_.color.set("#FFFFFF")
- e.material_.opacity = 1;
- //console.log('overlay loaded: ' + e.sid + " - " + this.info.texSrc.split('/').pop());
-
-
-
- e.texMedia = tex.image
- {//animation不同致使的不能使用同一个texture
- if(window.isEdit){
- if(animateTexSrcs[e.info.texSrc]){
- e.material_.map = tex.clone(); //编辑动画直接不用一个texture, 故而animation也不同
- e.material_.map.needsUpdate = true
-
- }else{
- e.material_.map = tex
- animateTexSrcs[e.info.texSrc] = 1
- }
- }else{
- if(animateTexSrcs[e.info.texSrc]){//已有该texSrc
- let finded = false
- for(let i of animateTexSrcs[e.info.texSrc]){
- if(ifSame(i[0], e.info.animateInfo)){
- e.material_.map = i[1]; finded = true; break;
- }
- }
- if(!finded){
- let tex_ = tex.clone();
- tex_.needsUpdate = true //clone后不写这句会黑块
- animateTexSrcs[e.info.texSrc].set(e.info.animateInfo, tex_)
- e.material_.map = tex_
- }
- }else{
- let object = new Map();
- object.set(e.info.animateInfo, tex)
- animateTexSrcs[e.info.texSrc] = object//注册第一个texSrc
- e.material_.map = tex
- }
-
-
- }
-
- }
- if(e.info.animateInfo && !e.animation){
- e.animation = GifTexDeal.addAnimation(e.material_.map, e, e.info.animateInfo, e.sid )
- e.visible && e.inSight() && GifTexDeal.start(e.animation)
- }
-
- if(++photoLoaded == originPhotoCount){//data2.js中的所有photo加载完毕
- Hot.allPhotoLoaded = true;
- Hot.whenAllFileLoaded && Hot.allModelLoaded && Hot.whenAllFileLoaded()
- }
-
- {
- e._loadDones.forEach(a=>a())
- e._loadDones = null
- //e.photoHasRequestLoad = true //这句不能加,否则会无法执行callback
- }
- e.material_.needsUpdate = true
-
-
-
- }
- })
-
- })
-
- this.photoHasRequestLoad = true
-
- }else if(type == 'model'){
- if(this.modelHasRequestLoad || !this.info.objSrc)return;
-
- //需要处理重复?
- objLoader.load(this.info.objSrc, (object)=>{
- this.remove(this.mesh)
- this.addModel(object)
-
- callback && callback()
- if(++modelLoaded == originModelCount){//data2.js中的所有photo加载完毕
- Hot.allModelLoaded = true;
- Hot.whenAllFileLoaded && Hot.allPhotoLoaded && Hot.whenAllFileLoaded()
- }
- })
-
-
-
- this.modelHasRequestLoad = true
- }
- }
- dispose(){
- this.parent.remove(this)
- this.titleElem && this.titleElem.dispose()
- delete player.model.hots[this.sid]
- }
-
- }
-
- Hot.updateVisibles = function(panos) { //只显示没被遮挡的,否则会卡
- if (panos === true) {
- model.hotGroup.children.forEach(e=>e.updateVisible(null,true))
- } else {
- model.hotGroup.children.forEach(e=>e.updateVisible(panos))
- }
- }
-
- Hot.beginShineHot = function(){
- if(!window.isEdit && shineMats.length == 0)return
-
-
- transitions.trigger({
- func: function(e) {
- var opa = e <= .5 ? 2 * e : -2 * e + 2
- shineMats.forEach(mat=>{
- mat.uniforms.opac.value = opa;
- })
- },
- cycling: !0,
- duration: 3e3,
- name: "hotShine"
- })
- }
-
- Hot.getDefaulScale = function(hotIconScale){
- return (hotIconScale || DATA.hotIconScale) * g_HotMeshSize.g_HotMeshWidth
- }
- var loadings = [];
- Hot.loadQueue = []; //等待下载的overlay,目前只针对photo
- Hot.maxLoadingCount = 3; //同时正在load图片的数量
- Hot.loadNext = ()=>{//继续requestDownload loadQueue中前排的item
- let count = Hot.maxLoadingCount - loadings.length
- Hot.loadQueue.slice(0, count).forEach(e=>{
- loadings.push(e)
- //console.log('requestDownload', e.hot.info.texSrc)
- e.hot.requestDownload(e.type, ()=>{
- var i = loadings.indexOf(e)
- //console.log('requestDownloaded index', i)
- i > -1 && loadings.splice(i,1)
- })
- })
- Hot.loadQueue.splice(0, count)
- }
- Hot.getNeedLoad = function() {//计算获取loadQueue,每次都重新计算,覆盖旧的
- if (!player || !player.domElement || !player.mode)
- return;
- var hots1, hots2
- if (player.mode != 'panorama') {
-
- if (Hot.loadQueue.length == 0) {
- hots1 = model.hotGroup.children.filter(e=>e.texType == 'photo' && !e.photoHasRequestLoad )
- hots2 = model.hotGroup.children.filter(e=>e.info.objSrc && !e.modelHasRequestLoad )
- Hot.loadQueue = hots1.map(e=>{return {hot:e, type:"photo"}}).concat(
- hots2.map(e=>{return {hot:e, type:"model"}})
- )
- }
- return
- }
-
-
- //Hot.loadWhenOutside = true
-
- hots1 = model.hotGroup.children.filter(e=>e.texType == 'photo' && !e.photoHasRequestLoad && (!e.info.visiblePanos || e.info.visiblePanos.includes(player.currentPano.id)))
- hots2 = model.hotGroup.children.filter(e=>e.info.objSrc && !e.modelHasRequestLoad && (!e.info.visiblePanos || e.info.visiblePanos.includes(player.currentPano.id)))
- if(hots1.length+hots2.length == 0){
- hots1 = model.hotGroup.children.filter(e=>e.texType == 'photo' && !e.photoHasRequestLoad )
- hots2 = model.hotGroup.children.filter(e=>e.info.objSrc && !e.modelHasRequestLoad )
- }
-
-
-
- var cameraDir = player.getDirection()
- Hot.loadQueue = hots1.map(e=>{return {hot:e, type:"photo"}}).concat(
- hots2.map(e=>{return {hot:e, type:"model"}})
- )
-
- var request = [(item)=>{
- return true
- }];
- var rank = [(item)=>{
- var dis = item.hot.mesh.getWorldPosition().distanceTo(player.position);
- return -dis
- }
- , (item)=>{
- var tagDir = item.hot.mesh.getWorldPosition().sub(player.position)
- var angle = tagDir.angleTo(cameraDir)
- return -angle * 20
- }]
- var result = common.sortByScore(Hot.loadQueue, request, rank);
- //Hot.loadQueue = result ? result.slice(0, 5).map(e=>e.item) : model.hotGroup.children.filter(e=>e.texType == 'photo' && !e.hasRequestLoad).slice(0, 2);
- Hot.loadQueue = result ? result.slice(0, 5).map(e=>e.item) : []
- }
- Hot.load = ()=>{//开始下载图片
- Hot.getNeedLoad()
- Hot.loadNext()
- var hots1 = model.hotGroup.children.filter(e=>e.texType == 'photo' && !e.photoHasRequestLoad )
- var hots2 = model.hotGroup.children.filter(e=>e.info.objSrc && !e.modelHasRequestLoad )
-
- if (hots1.length+hots2.length > 0) {
- setTimeout(Hot.load, 200)
- } else {
- Hot.allRequestLoad = true
- console.log('allRequestLoad')
- }
- }
- Hot.startLoad = ()=>{
- originPhotoCount = hotGroup.children.filter(e=>e.texType == 'photo').length
- originModelCount = hotGroup.children.filter(e=>!!e.info.objSrc).length
- if(originPhotoCount == 0 )Hot.allPhotoLoaded = true
- if(originModelCount == 0) Hot.allModelLoaded = true;
- if(Hot.allModelLoaded && Hot.allPhotoLoaded) Hot.whenAllFileLoaded && Hot.whenAllFileLoaded()//所有加载完毕
- else{
- Hot.load()
- }
-
- setTimeout(Hot.beginShineHot, 1000)
-
- player.emit('gotHotAndStartload')
- }
- window.Hot = Hot
-
- /* var ball = new THREE.Mesh(new THREE.SphereBufferGeometry(0.01),new THREE.MeshBasicMaterial({color:"#f00",depthTest:false,transparent:true}))
- var balls = []
- var addPoint = function(point){
- console.log(point)
- var ball1 = ball.clone()
- model.add(ball1);
- ball1.position.copy(point)
- balls.push(ball1)
- }
- var addPoints = function(points){
- balls.forEach(e=>model.remove(e))
- balls = []
- points.forEach(e=>addPoint(e))
- }
- */
-
- //判断是否是移动端,如果是给关闭按钮添加touchstart事件
-
-
-
-
- Hot.closePopup = ()=>{// 关闭热点页面
- if(!g_currentHot) return;
- g_currentHot = null;
- var hotPop = document.getElementById('popup');
- hotPop.style.display = "none";
- document.querySelector(".popup-content").removeChild(document.getElementById("id1"));
- $("#popup iframe:last").remove();
-
-
- SoundManager.pause('hot', true)//自动播放被中断的音频 (bgm
-
-
- return false
- }
-
-
- if(browser.isMobile()){
- $('#closepop').on("touchstart",Hot.closePopup);
- }else{
- $('#closepop').on("click",Hot.closePopup);
- }
-
-
-
- Hot.createHotList = function() {
- // if(!window.DATA.showHotListSta)return
- var docFragment = document.createDocumentFragment();
- var hots = hotGroup.children.filter(hot=>hot.info.actionType.openHot);
- hots = hots.sort((a,b)=>{return a.order - b.order});
- window.myHotList = hots
- hots.forEach((hot)=>{
- var li = document.createElement('li');
- var span = document.createElement('span');
- span.innerHTML = hot.info.title || '热点';
- // console.log(span.innerHTML);
- li.hot = hot; // 列表每一项对应一个热点
- li.appendChild(span);
- docFragment.appendChild(li);
-
- })
- setTimeout(()=>{
- var ul = document.querySelector('#hotListContent ul');
- ul && ul.appendChild(docFragment);
- },3000) //部分安卓手机的钉钉和支付宝浏览器如果立即添加到列表会卡住
-
-
- }
-
-
-
-
- Hot.mobileAutoPlay = function(player){//移动端。不这么写video不会播放 . (2022.11.29: 可为何加了Hot.updateHots之后又会自动播了?https有关?
- if(browser.isMobile()){
- hotGroup.children.forEach((hot)=>{
- /* if(hot.texType == 'video' && hot.shouldPlay){
- console.log(1)
- } */
- if(!hot.clickToPlayInited && hot.texType == 'video' && !isVideoPlayed(hot.texMedia) && hot.shouldPlay){
- //hot.update(player)
- console.log({str:'try mobileAutoPlay '+ hot.sid, level:1})
- hot.videoControl(true)
-
- if(isVideoPlayed(hot.texMedia)){
- console.log({str:'clickToPlayInited '+ hot.sid, level:1})
- hot.clickToPlayInited = true
- hot.changeOpaWhenPlay(video)
-
- }
- }
- })
- }
-
- }
-
-
-
-
-
-
-
-
-
- Hot.updateHots = function(){
-
- for(var i in player.model.hots){
- player.model.hots[i].update(player)
- }
-
- if( !player.ready)return
-
- this.needUpdate = true
- common.intervalTool.isWaiting('updateHots', ()=>{ //延时update,防止卡顿
- if(!this.needUpdate)return
- this.needUpdate = false
-
- let videoCanPlay = [], aniCanPlay = [];
- for(var i in player.model.hots){
-
- let hot = player.model.hots[i]
-
-
- {//实时监测播放
- if(hot.texType == "video" && !player.flying){ //飞行时不判断
- if(hot.visible && !hot.pausedByUser && hot.inSight()){ //注意edit时insight一直为true
- //this.videoControl(true)
- videoCanPlay.push(hot)
- }else{
- hot.videoControl(false)
- }
- }else if(hot.info.animateInfo){
- if(hot.visible && hot.inSight()){
- aniCanPlay.push(hot)
- }else{
- GifTexDeal.stop(hot.animation)
- }
- }
- }
- }
- let filter = (type,max,list,playFun)=>{
- if(list.length < max){
- list.forEach(hot=>type == 'video' ? hot.videoControl(true) : GifTexDeal.start(hot.animation))
- }else{
- let playerDir = player.getDirection()
- let request = []
- let planeDir = new Map()
- if(player.mode != 'panorama'){
- request.push((hot)=>{
- if(hot.plane){//考虑plane的方向,它甚至可能背对镜头
- let dir = new THREE.Vector3(0,0,-1).applyQuaternion(hot.quaternion)
- let angle = dir.dot(playerDir)
- planeDir.set(hot, angle)
- return angle > 0
- }else return true
- })
- }
- let r = common.sortByScore(list,request,[(hot)=>{ //方向因素
- var cornerPointInfo = hot.getCornerPoint(); //仅支持漫游模式
- let dir = new THREE.Vector3().subVectors(hot.position, player.position).normalize()
- score = dir.dot(playerDir)
- player.mode == 'panorama' && (score *= Math.pow(cornerPointInfo.diffLat,0.5))// pow降低高度的权重,因为宽度更重要些。之所以两个函数都乘以diffLat,也是为了防止在两个item的分数相同diffLon不同时,diffLat增长相同倍数却能造成分数差异的情况
- return score
- },
- (hot)=>{//面积因素
- if(player.mode == 'panorama'){
- var cornerPointInfo = hot.getCornerPoint(); //仅支持漫游模式
- let area = cornerPointInfo.diffLon * Math.pow(cornerPointInfo.diffLat,0.5) / 1000 //占据面积
- return area
- }else{
- let dis = player.position.distanceTo(hot.position);
- let size = hot.getBoundOri().applyMatrix4(hot.matrixWorld).size(new THREE.Vector3).length() / 2
- let score = Math.atan(size / Math.pow(dis,1.2)) * 50 // 在镜头中所占fov angle 的一半 。 pow是因为实际感受还是尽量显示近处的
- if(hot.plane){//考虑plane的方向,越倾斜分越低
- score *= planeDir.get(hot)
- }
- return score
- }
- } ])
- //getCornerPoint仅支持漫游模式 Lat高度(纬度).
-
- //console.log(r)
- r && r.forEach((e,j)=>{
- let hot = e.item
- if(j<max){
- type == 'video' ? hot.videoControl(true) : GifTexDeal.start(hot.animation)
- }else{
- type == 'video' ? hot.videoControl(false) : GifTexDeal.stop(hot.animation)
- }
- })
- }
- }
- filter('video',playVideoMax, videoCanPlay);
- filter('animateInfo',playAniMax, aniCanPlay);
-
- //console.log('updateHots')
- return true
-
-
- }, 800)
-
- }
-
- }
- function isVideoPlayed(video){
- return !video.paused && !isNaN(video.duration) //注意,有的手机首次play时会立即paused为false,但其实没加载好, duration为NAN
- }
- /*
- 保存 JSON.stringify(editTool.hotpoint.getSavingInfo())
- 可能需要再写一份保存到overlay 给旧场景项目使用
- 最好后台有针对手机版的做一个压缩。压缩成几个档位。
- 安卓手机firefox出现过视频mesh不可见或者闪烁的情况。
-
-
- 视频最容易导致崩溃, 模型还好
-
- 数据速率为4064kbps,1920*1080px 时测试部门电脑崩溃
- 数据速率为1824kbps,720 *576px 时正常
- 所以尽量降到2000以下 同时播放个数最好不超过2个 可能需要将src归零 并延迟加载、不自动播放
-
-
-
-
- 有遇到某张图在ios里显示不出,但在ps重新输出后就可以。这张图的dpi高达500,不知道是否与此有关。
- 遇到过ios14.8.1、14.7.1 无法播放webm(来自1050)。 onloadedmetadata失败
-
-
- */
|