点击封面播放背景音乐

scene/public/js/manage.js

@@ -1,7 +1,4 @@
-var g_ProjectName = window.location.pathname.substring(
-  window.location.pathname.indexOf('/') + 1,
-  window.location.pathname.lastIndexOf('/')
-)
+var g_ProjectName = window.location.pathname.substring(window.location.pathname.indexOf('/') + 1, window.location.pathname.lastIndexOf('/'))
 var g_Prefix = 'https://super.4dage.com/'
 // var g_Prefix=window.location.href.substring(0,window.location.href.indexOf("/index.html")+1);
 var s = window.location.href.split('/')
@@ -76,24 +73,14 @@ window.browser = {
     )
   },
   isFullscreen: function () {
-    return (
-      document.fullscreenElement ||
-      document.mozFullscreenElement ||
-      document.mozFullScreenElement ||
-      document.webkitFullscreenElement ||
-      document.msFullscreenElement
-    )
+    return document.fullscreenElement || document.mozFullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement || document.msFullscreenElement
   },
   valueFromHash: function (e, t) {
     var i = new RegExp('[#&?]' + e + '=([^#&?]*)'),
       n = i.exec(window.location.href)
     if (!n) return t
     var r = n[1]
-    return 'boolean' == typeof t
-      ? 'true' === r || '1' === r
-      : 'number' == typeof t
-      ? parseFloat(r)
-      : window.decodeURIComponent(r)
+    return 'boolean' == typeof t ? 'true' === r || '1' === r : 'number' == typeof t ? parseFloat(r) : window.decodeURIComponent(r)
   },
   urlHasValue: function (key, isGetValue) {
     let querys = window.location.search.substr(1).split('&')
@@ -207,11 +194,7 @@ var toPrecision = function (e, t) {
 var dealMap = (map, o = {}) => {
   //使不resize  when   image is not power of two  ，但缩小时会有锯齿
   if (!o.ignoreResize) {
-    if (
-      !map.image ||
-      !THREE.Math.isPowerOfTwo(map.image.width) ||
-      !THREE.Math.isPowerOfTwo(map.image.height)
-    ) {
+    if (!map.image || !THREE.Math.isPowerOfTwo(map.image.width) || !THREE.Math.isPowerOfTwo(map.image.height)) {
       map.wrapS = map.wrapT = THREE.ClampToEdgeWrapping
       map.minFilter = THREE.LinearFilter
       //map.generateMipmaps = true;
@@ -354,10 +337,7 @@ var convertTool = {
     /* if(config.isEdit && publicObjectSet.editor.mainDesign.editing){
 			var o = ray.intersectObjects(publicObjectSet.editor.mainDesign.wallMeshes);
 		}else{ */
-    let colliders = player.model.allFloorsVisible
-      ? player.model.colliders
-      : (floorIndex != void 0 ? player.model.floors.index[floorIndex] : player.model.currentFloor)
-          .collider.children
+    let colliders = player.model.allFloorsVisible ? player.model.colliders : (floorIndex != void 0 ? player.model.floors.index[floorIndex] : player.model.currentFloor).collider.children
     //let colliders = (floorIndex == void 0 ) ? player.model.colliders : player.model.floors.index[floorIndex].collider.children
     var o = ray.intersectObjects(colliders)
     //}
@@ -387,19 +367,12 @@ var convertTool = {
 
       var y = info.y
 
-      if (
-        player.mode ==
-        'floorplan' /*  ||  Math.abs(O.x-pos.x)<0.0001 && Math.abs(O.z-pos.z)<0.0001) */
-      ) {
+      if (player.mode == 'floorplan' /*  ||  Math.abs(O.x-pos.x)<0.0001 && Math.abs(O.z-pos.z)<0.0001) */) {
         //intersectPlane和地面平行，无交点
         var x = pos.x,
           z = pos.z
       } else {
-        if (
-          y < player.camera.position.y &&
-          O.y <= A.y /* || y>player.camera.position.y && O.y >= A.y  */
-        )
-          return null //鼠标射线向上。因为相机一定位于地面以上（地面不会抬高到相机上吧？），所以无交点。
+        if (y < player.camera.position.y && O.y <= A.y /* || y>player.camera.position.y && O.y >= A.y  */) return null //鼠标射线向上。因为相机一定位于地面以上（地面不会抬高到相机上吧？），所以无交点。
         if (O.y == A.y) {
           console.log('一样？？')
           return
@@ -550,9 +523,7 @@ var convertTool = {
       op.resolution = { x: renderSize.width, y: renderSize.height }
     }
     if (!op.camera) {
-      let camera = player.cameraControls.activeControl
-        ? player.cameraControls.activeControl.camera
-        : player.camera
+      let camera = player.cameraControls.activeControl ? player.cameraControls.activeControl.camera : player.camera
       let camera2 = camera.clone()
       camera2.matrixWorld.copy(player.camera.matrixWorld) //因为其他原因该camera的matrixWorld被还原了，而player.camera的是正确的
       op.camera = camera2
@@ -567,9 +538,7 @@ var convertTool = {
       } else {
         currentDis = op.position.distanceTo(op.camera.position)
       }
-      w =
-        op.maxSize -
-        (op.maxSize - op.minSize) * THREE.Math.smoothstep(currentDis, op.nearBound, op.farBound)
+      w = op.maxSize - (op.maxSize - op.minSize) * THREE.Math.smoothstep(currentDis, op.nearBound, op.farBound)
       //maxSize ： mesh要表现的最大像素宽度；   nearBound： 最近距离，若比nearBound近，则使用maxSize
     }
     i.copy(op.position).project(op.camera), //tag中心在屏幕上的二维坐标
@@ -710,12 +679,7 @@ window.expandCommon = function (common) {
 
         for (let i = 0; i < posLength; i++) {
           var B = posB[i]
-          var ray = new THREE.Raycaster(
-            A.clone(),
-            B.clone().sub(A).normalize(),
-            0,
-            A.distanceTo(B) - (options.tolerance || 0)
-          )
+          var ray = new THREE.Raycaster(A.clone(), B.clone().sub(A).normalize(), 0, A.distanceTo(B) - (options.tolerance || 0))
           var o = ray.intersectObjects(options.model || player.model.colliders, true)
 
           if (!o || !o.length) {
@@ -783,8 +747,7 @@ window.expandMath = function (math) {
 //管理js文件 获取modeldata.js 判断是否有特殊的字段，如果有就先加载SpecialScene.js 里面有对特殊场景处理的代码 否则就直接加载main
 
 var Manage = function () {
-  ;(this.weixinURL = 'https://res.wx.qq.com/open/js/jweixin-1.2.0.js'),
-    (this.time = '?' + new Date().getTime())
+  ;(this.weixinURL = 'https://res.wx.qq.com/open/js/jweixin-1.2.0.js'), (this.time = '?' + new Date().getTime())
   this.loadAudio()
   this.loadWeixin()
 }
@@ -820,8 +783,7 @@ Manage.prototype.LoadJs = function (_files, succes) {
   function loadFile(url, success) {
     if (!FileIsExt(classcodes, url)) {
       var _ThisType = GetFileType(url)
-      var ThisType =
-        _ThisType.indexOf('?') == -1 ? _ThisType : _ThisType.substring(0, _ThisType.indexOf('?'))
+      var ThisType = _ThisType.indexOf('?') == -1 ? _ThisType : _ThisType.substring(0, _ThisType.indexOf('?'))
       var fileObj = null
       if (ThisType == '.js') {
         fileObj = document.createElement('script')
@@ -1404,12 +1366,7 @@ function initByTHREE(THREE) {
       this.enabled = true
       //draw coverTex
       this.quad.material.uniforms.progress.value = 1
-      sceneRenderer.renderer.render(
-        sceneRenderer.scene,
-        sceneRenderer.camera,
-        this.coverRenderTarget,
-        true
-      )
+      sceneRenderer.renderer.render(sceneRenderer.scene, sceneRenderer.camera, this.coverRenderTarget, true)
       console.log('start111')
     },
     stop: function () {
@@ -1542,12 +1499,7 @@ function initByTHREE(THREE) {
     update(currentFloor) {
       if (!this.position) return
 
-      if (
-        !this.visible &&
-        this.unvisibleReasons.some(e => e.level == 1) &&
-        !this.unvisibleReasons.some(e => e.level > 1)
-      )
-        return
+      if (!this.visible && this.unvisibleReasons.some(e => e.level == 1) && !this.unvisibleReasons.some(e => e.level > 1)) return
       /*
                 规定一下level共四层
                 level3 是notTrueSide层，权重最高。
@@ -1570,20 +1522,13 @@ function initByTHREE(THREE) {
       //判断label是否被模型遮挡，遮挡则消失(如果是漫游模式最好提前计算visiblePanos)
       if (player.mode != 'panorama') {
         currentFloor = currentFloor || player.model.currentFloor
-        if (
-          !player.model.allFloorsVisible &&
-          this.floorIndex != void 0 &&
-          this.floorIndex != currentFloor.floorIndex
-        ) {
+        if (!player.model.allFloorsVisible && this.floorIndex != void 0 && this.floorIndex != currentFloor.floorIndex) {
           this.setVisible(false, 'shelter', 0, null, true)
           //this.elem.css('display','none');	return;
           if (!this.visible) return
         }
 
-        if (
-          this.shelterByModel &&
-          convertTool.ifShelter(this.position, p.vector, player.camera, this.floorIndex)
-        ) {
+        if (this.shelterByModel && convertTool.ifShelter(this.position, p.vector, player.camera, this.floorIndex)) {
           //this.elem.css('display','none');	return;
           this.setVisible(false, 'shelter', 0, null, true)
           if (!this.visible) return
@@ -1852,8 +1797,7 @@ function initByTHREE(THREE) {
 
       //this.needsUpdate = false
 
-      let camera =
-        player.mode == 'floorplan' ? player.cameraControls.activeControl.camera : player.camera //floorplan 时要用到OrthographicCamera
+      let camera = player.mode == 'floorplan' ? player.cameraControls.activeControl.camera : player.camera //floorplan 时要用到OrthographicCamera
 
       if (!this.fixOrient) {
         let parentQua = this.root.parent.getWorldQuaternion(new THREE.Quaternion())
@@ -1863,10 +1807,7 @@ function initByTHREE(THREE) {
       if (this.sizeInfo) {
         var s = convertTool.getScaleForConstantSize(
           Object.assign({}, this.sizeInfo, {
-            farBound:
-              player.mode == 'floorplan'
-                ? this.sizeInfo.farBoundPlan || this.sizeInfo.farBound
-                : this.sizeInfo.farBound,
+            farBound: player.mode == 'floorplan' ? this.sizeInfo.farBoundPlan || this.sizeInfo.farBound : this.sizeInfo.farBound,
             position: this.root.getWorldPosition(new THREE.Vector3())
           })
         )
@@ -1929,16 +1870,11 @@ function initByTHREE(THREE) {
         textMaxWidth = Math.max(textMaxWidth, textWidth)
       }
 
-      let margin =
-        this.margin || new THREE.Vector2(this.fontsize, Math.max(this.fontsize * 0.4, 10))
+      let margin = this.margin || new THREE.Vector2(this.fontsize, Math.max(this.fontsize * 0.4, 10))
       const lineSpace = (this.fontsize + margin.y) * 0.5
 
       let spriteWidth = 2 * margin.x + textMaxWidth + 2 * this.rectBorderThick
-      let spriteHeight =
-        2 * margin.y +
-        this.fontsize * this.text.length +
-        2 * this.rectBorderThick +
-        lineSpace * (this.text.length - 1)
+      let spriteHeight = 2 * margin.y + this.fontsize * this.text.length + 2 * this.rectBorderThick + lineSpace * (this.text.length - 1)
       context.canvas.width = spriteWidth
       context.canvas.height = spriteHeight
       context.font = this.fontWeight + ' ' + this.fontsize + 'px ' + this.fontface
@@ -1946,58 +1882,21 @@ function initByTHREE(THREE) {
       //canvas原点在左上角
       context.textBaseline = 'alphabetic' //  "middle"  //设置文字基线。当起点y设置为0时，只有该线以下的部分被绘制出来。middle时文字显示一半(但是对该字体所有字的一半，有的字是不一定显示一半的，尤其汉字)，alphabetic时是英文字母的那条基线。
       // border color
-      context.strokeStyle =
-        'rgba(' +
-        this.borderColor.r +
-        ',' +
-        this.borderColor.g +
-        ',' +
-        this.borderColor.b +
-        ',' +
-        this.borderColor.a +
-        ')'
+      context.strokeStyle = 'rgba(' + this.borderColor.r + ',' + this.borderColor.g + ',' + this.borderColor.b + ',' + this.borderColor.a + ')'
 
       context.lineWidth = this.rectBorderThick
       // background color
-      context.fillStyle =
-        'rgba(' +
-        this.backgroundColor.r +
-        ',' +
-        this.backgroundColor.g +
-        ',' +
-        this.backgroundColor.b +
-        ',' +
-        this.backgroundColor.a +
-        ')'
-      this.roundRect(
-        context,
-        this.rectBorderThick / 2,
-        this.rectBorderThick / 2,
-        spriteWidth - this.rectBorderThick,
-        spriteHeight - this.rectBorderThick,
-        this.borderRadius
-      )
+      context.fillStyle = 'rgba(' + this.backgroundColor.r + ',' + this.backgroundColor.g + ',' + this.backgroundColor.b + ',' + this.backgroundColor.a + ')'
+      this.roundRect(context, this.rectBorderThick / 2, this.rectBorderThick / 2, spriteWidth - this.rectBorderThick, spriteHeight - this.rectBorderThick, this.borderRadius)
 
-      context.fillStyle =
-        'rgba(' +
-        this.textColor.r +
-        ',' +
-        this.textColor.g +
-        ',' +
-        this.textColor.b +
-        ',' +
-        this.textColor.a +
-        ')'
+      context.fillStyle = 'rgba(' + this.textColor.r + ',' + this.textColor.g + ',' + this.textColor.b + ',' + this.textColor.a + ')'
 
       let y = margin.y
       for (let i = 0; i < this.text.length; i++) {
         //let actualHeight = metrics.actualBoundingBoxAscent + metrics.actualBoundingBoxDescent // 当前文本字符串在这个字体下用的实际高度
 
         //文字y向距离从textBaseline向上算
-        let actualBoundingBoxAscent =
-          infos[i].actualBoundingBoxAscent == void 0
-            ? this.fontsize * 0.8
-            : infos[i].actualBoundingBoxAscent //有的流览器没有。只能大概给一个
+        let actualBoundingBoxAscent = infos[i].actualBoundingBoxAscent == void 0 ? this.fontsize * 0.8 : infos[i].actualBoundingBoxAscent //有的流览器没有。只能大概给一个
         y += actualBoundingBoxAscent + expand
         //console.log(actualBoundingBoxAscent)
 
@@ -2006,16 +1905,7 @@ function initByTHREE(THREE) {
         let x = this.rectBorderThick + margin.x + textLeftSpace
         // text color
         if (this.textBorderThick) {
-          context.strokeStyle =
-            'rgba(' +
-            this.textBorderColor.r +
-            ',' +
-            this.textBorderColor.g +
-            ',' +
-            this.textBorderColor.b +
-            ',' +
-            this.textBorderColor.a +
-            ')'
+          context.strokeStyle = 'rgba(' + this.textBorderColor.r + ',' + this.textBorderColor.g + ',' + this.textBorderColor.b + ',' + this.textBorderColor.a + ')'
           context.lineWidth = this.textBorderThick
           context.strokeText(this.text[i], x, y)
         }
@@ -2227,9 +2117,7 @@ function initByTHREE(THREE) {
       let i = arrowCount
 
       while (i > 0) {
-        let pos = from.floorPosition
-          .clone()
-          .add(dir.clone().multiplyScalar(margin / 2 + i * sliceLen))
+        let pos = from.floorPosition.clone().add(dir.clone().multiplyScalar(margin / 2 + i * sliceLen))
         pos.y += settings.markerHeight
         let arrow = createArrow(mat)
         arrow.name = 'arrow:' + from.id + '-' + to.id + '|' + i
@@ -2250,14 +2138,7 @@ function initByTHREE(THREE) {
         mats.default.opacity = opa
         mats.fadeIn.opacity = opa * mats.fadeIn.opacity2
       }
-      transitions.start(
-        transition,
-        arrowInfo.animateDur,
-        updateArrowOpacity,
-        0,
-        easing.easeInOutCubic,
-        'updateArrowOpacity'
-      )
+      transitions.start(transition, arrowInfo.animateDur, updateArrowOpacity, 0, easing.easeInOutCubic, 'updateArrowOpacity')
     }
 
     var fadeInArrow = function () {
@@ -2554,8 +2435,7 @@ var SoundManager = {
       if (object.audio) {
         object.audio.pause()
         object.callback && object.callback(false)
-        object.audio.src &&
-          Log(name + ' 中断音频 ' + '(' + common.getFileNameFromUrl(object.audio.src) + ')')
+        object.audio.src && Log(name + ' 中断音频 ' + '(' + common.getFileNameFromUrl(object.audio.src) + ')')
       }
 
       if (isInterrupt) {
@@ -2612,12 +2492,7 @@ var SoundManager = {
     //处理设备自动播放限制
 
     let play = function () {
-      if (
-        this.currentAudio &&
-        this.currentAudio.audio &&
-        this.currentAudio.src &&
-        this.currentAudio.audio.paused
-      ) {
+      if (this.currentAudio && this.currentAudio.audio && this.currentAudio.src && this.currentAudio.audio.paused) {
         this.currentAudio.audio.play() //一般触屏了都会播放成功，就不识别paused了
 
         this.currentAudio.callback && this.currentAudio.callback(true)
@@ -2751,6 +2626,9 @@ Manage.prototype.switchBgmState = function (state) {
 
 var manage = new Manage()
 
+// 暴露switchBgmState方法到window对象
+window.switchBgmState = manage.switchBgmState.bind(manage)
+
 //处理cursor优先级
 
 var CursorDeal = {

scene/src/components/RouterOrder.tsx

@@ -11,7 +11,7 @@ const routerArr = [
     name: '首页',
     path: '/',
     exact: true,
-    Com: React.lazy(() => import('@/pages/A0base'))
+    Com: React.lazy(() => import('@/pages/A1home'))
   },
   {
     id: 2,

scene/src/pages/A1home/index.tsx

@@ -1,11 +1,15 @@
 import React, { useEffect, useState } from 'react'
 import styles from './index.module.scss'
 import A2main from '../A2main'
+import isMobile from '../../utils/isMobile'
+import A4base from '../A4base'
+import A5Mobile from '../A5Mobile'
 const scriptArr = ['./js/manage.js', './js/Hot.js?m=1', './js/main_2020_show.js', './CAD/bundle.js', './showa/js/loadCAD.js']
 
 function A1home() {
   // 动态加载 js
   const [lodingJs, setLodingJs] = useState(0)
+  const [show, setShow] = useState(true)
   useEffect(() => {
     if (lodingJs < scriptArr.length) {
       let script = document.createElement('script')
@@ -510,6 +514,13 @@ function A1home() {
         </div>
         <div id='tag-billboards' style={{ display: 'none' }}></div>
       </div>
+
+      {/* 封面 */}
+      {isMobile() ? (
+        <A5Mobile show={show} setShow={setShow} />
+      ) : (
+        <A4base show={show} setShow={setShow} />
+      )}
     </div>
   )
 }

scene/src/pages/A3hotList/index.module.scss

@@ -4,7 +4,7 @@
   right: 0;
   transition: all 0.5s;
   transform: translate(0, -50%);
-  width: 250px;
+  width: 300px;
   height: 100%;
   z-index: 30001;
   display: flex;
@@ -17,7 +17,7 @@
       align-items: center;
       justify-content: flex-start;
       gap: 10px;
-      width: 250px;
+      width: 300px;
       height: 100%;
       background: url('../../assets/img/hotlist_bg.png') center center;
       background-size: cover;
@@ -51,7 +51,7 @@
       .A3close {
         position: fixed;
         bottom: 0;
-        width: 250px;
+        width: 300px;
         height: 40px;
         background-color: rgba(32, 37, 73, 0.9);
         border-top: 1px solid rgba(43, 31, 23, 0.1);

scene/src/pages/A4base/index.module.scss

@@ -1,5 +1,5 @@
 .A4base {
-  position: relative;
+  position: fixed;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);

scene/src/pages/A4base/index.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import styles from './index.module.scss'
 import { useHistory } from 'react-router-dom'
 function A4base({ show, setShow }: { show: boolean; setShow: (show: boolean) => void }) {
-  const history = useHistory()
+  // const history = useHistory()
   return (
     <div className={styles.A4base} style={{ display: show ? 'block' : 'none' }}>
 
@@ -15,8 +15,9 @@ function A4base({ show, setShow }: { show: boolean; setShow: (show: boolean) =>
         className='A4base-button'
         onClick={() => {
           setShow(false)
-          history.push('/home?m=SG-ooxdHQTAxfH')
-          window.location.reload()
+          window.switchBgmState(true)
+          // history.push('/home?m=SG-ooxdHQTAxfH')
+          // window.location.reload()
         }}
       >
         <img src={require('./image/button.png')} alt='' />

scene/src/pages/A5Mobile/index.module.scss

@@ -1,5 +1,5 @@
 .A5Mobile {
-  position: relative;
+  position: fixed;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);

scene/src/pages/A5Mobile/index.tsx

@@ -14,8 +14,9 @@ function A5Mobile({ show, setShow }: { show: boolean; setShow: (show: boolean) =
         className='button'
         onClick={() => {
           setShow(false)
-          history.push('/home?m=SG-ooxdHQTAxfH')
-          window.location.reload()
+          window.switchBgmState(true)
+          // history.push('/home?m=SG-ooxdHQTAxfH')
+          // window.location.reload()
         }}
       >
         <img src={require('./image/button.png')} alt='' />

scene/src/types/window.d.ts

@@ -0,0 +1,8 @@
+declare global {
+  interface Window {
+    switchBgmState: (isPaused: boolean) => void
+  }
+}
+
+ 
+export {}