Merge branch 'master' of http://192.168.0.115:3000/lanxin/gmlx

project/package.json

@@ -31,10 +31,10 @@
     "redux-devtools-extension": "^2.13.9",
     "redux-thunk": "^2.4.1",
     "sass": "^1.55.0",
+    "swiper": "^11.2.10",
     "typescript": "^4.8.4",
     "vconsole": "^3.15.1",
-    "web-vitals": "^2.1.4",
-    "swiper": "^11.2.10"
+    "web-vitals": "^2.1.4"
   },
   "scripts": {
     "dev": "react-app-rewired start --host 0.0.0.0",

project/public/index.html

@@ -11,6 +11,7 @@
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
     <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon" />
     <script src="./myData/myData.js"></script>
+    <script src="./three/data.js"></script>
     <title>革命领袖视察黑龙江纪念馆</title>
   </head>
 

project/public/myData/myData.js

@@ -208,3 +208,5 @@ const myDataTemp = {
         },
     ]
 }
+
+

project/public/myData/three/index.js

@@ -1,423 +0,0 @@
-let camera, scene, renderer
-
-const shadowHasAlpha = false //阴影是否考虑光透过透明材质
-
-const planeGeo = new THREE.PlaneBufferGeometry(1, 1)
-const raycaster = new THREE.Raycaster()
-raycaster.linePrecision = 0 //不检测boxHelper
-const mouse = new THREE.Vector2()
-
-let needUpdateShadow, needsUpdateScene
-
-var BlurShader = {
-  uniforms: {
-    map: { value: null },
-    blurRadius: { value: new THREE.Vector2(1.0 / 512.0, 1.0 / 512.0) },
-    opacity: { value: 0 }
-  },
-
-  vertexShader: [
-    'varying vec2 vUv;',
-
-    'void main() {',
-
-    '	vUv = uv;',
-    '	gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );',
-
-    '}'
-  ].join('\n'),
-
-  fragmentShader: [
-    'uniform sampler2D map;',
-    'uniform vec2 resolution;',
-    'uniform float blurRadius;',
-    'uniform float opacity;',
-    'varying vec2 vUv;',
-
-    'void main() {',
-
-    '	vec2 offset = blurRadius / resolution; ',
-
-    '	vec4 sum = vec4( 0.0 );',
-
-    '	sum += texture2D( map, vec2( vUv.x - 4.0 * offset.x, vUv.y ) ) * 0.051;',
-    '	sum += texture2D( map, vec2( vUv.x - 3.0 * offset.x, vUv.y ) ) * 0.0918;',
-    '	sum += texture2D( map, vec2( vUv.x - 2.0 * offset.x, vUv.y ) ) * 0.12245;',
-    '	sum += texture2D( map, vec2( vUv.x - 1.0 * offset.x, vUv.y ) ) * 0.1531;',
-    '	sum += texture2D( map, vec2( vUv.x, vUv.y ) ) * 0.1633;',
-    '	sum += texture2D( map, vec2( vUv.x + 1.0 * offset.x, vUv.y ) ) * 0.1531;',
-    '	sum += texture2D( map, vec2( vUv.x + 2.0 * offset.x, vUv.y ) ) * 0.12245;',
-    '	sum += texture2D( map, vec2( vUv.x + 3.0 * offset.x, vUv.y ) ) * 0.0918;',
-    '	sum += texture2D( map, vec2( vUv.x + 4.0 * offset.x, vUv.y ) ) * 0.051;',
-
-    '	sum += texture2D( map, vec2( vUv.x , vUv.y - 4.0 * offset.y ) ) * 0.051;',
-    '	sum += texture2D( map, vec2( vUv.x , vUv.y - 3.0 * offset.y) ) * 0.0918;',
-    '	sum += texture2D( map, vec2( vUv.x , vUv.y - 2.0 * offset.y) ) * 0.12245;',
-    '	sum += texture2D( map, vec2( vUv.x , vUv.y - 1.0 * offset.y ) ) * 0.1531;',
-    '	sum += texture2D( map, vec2( vUv.x , vUv.y ) ) * 0.1633;',
-    '	sum += texture2D( map, vec2( vUv.x , vUv.y + 1.0 * offset.y ) ) * 0.1531;',
-    '	sum += texture2D( map, vec2( vUv.x , vUv.y + 2.0 * offset.y ) ) * 0.12245;',
-    '	sum += texture2D( map, vec2( vUv.x , vUv.y + 3.0 * offset.y ) ) * 0.0918;',
-    '	sum += texture2D( map, vec2( vUv.x , vUv.y + 4.0 * offset.y ) ) * 0.051;',
-
-    '	gl_FragColor = sum / 2.0 ;',
-    '	gl_FragColor.a *= opacity;',
-
-    '}'
-  ].join('\n')
-}
-
-var Viewer = function (index, dom) {
-  this.index = index
-  this.dom = dom
-  this.camera = new THREE.PerspectiveCamera(setting.vfov)
-  this.camera.position.set(0, 1, -1.5)
-  this.control = new PanoramaControls(this.camera, this.dom)
-  this.control.latMin = this.control.latMax = 0
-
-  //this.control.target.set(0,-1,0)
-  this.setRenderer()
-
-  this.scene = new THREE.Scene()
-  this.scene.background = common.loadTexture('background.jpg')
-  this.pointerDownPos
-  this.active = false
-  this.antialias = true
-  this.clickTime = new Date().getTime()
-  this.updateClock = new THREE.Clock()
-
-  this.cardGroup = new THREE.Object3D()
-  this.scene.add(this.cardGroup)
-  this.cardGroup.name = 'cardGroup'
-  this.autoMove = true
-
-  this.bindEvents()
-  this.preLoadCards()
-  this.animate()
-}
-
-/* 
-    同一时间，视线范围不能同时出现两张卡。也就是分布要根据视角范围变化，但是如果浏览器变宽导致的出现两张卡不算。
-
- */
-
-Viewer.prototype.preLoadCards = function () {
-  let i = 10
-  while (i-- > 0) {
-    this.addCard(true)
-  }
-
-  let add = () => {
-    if (document.hidden) return
-    this.addCard()
-    setTimeout(add, 40000 * Math.random() * this.getDensity()) //当前视野中密度越小 添加越频繁
-  }
-  add()
-
-  document.addEventListener('visibilitychange', e => {
-    if (!document.hidden) add()
-    console.log('document.hidden', document.hidden)
-  })
-}
-
-Viewer.prototype.getDensity = function () {
-  let frustumMatrix = new THREE.Matrix4()
-  frustumMatrix.multiplyMatrices(this.camera.projectionMatrix, this.camera.matrixWorldInverse)
-
-  let frustum = new THREE.Frustum()
-  frustum.setFromProjectionMatrix(frustumMatrix)
-
-  let count = this.cardGroup.children.filter(card => {
-    return frustum.containsPoint(card.position)
-  }).length
-
-  let density = (count / (this.renderer.domElement.width * this.renderer.domElement.height)) * 1000
-
-  return density
-}
-
-
-Viewer.prototype.addCard = function (around) {
-  let cardIndex = Math.floor(cardNames.length * Math.random())
-
-  common.loadTexture(cardNames[cardIndex].img, map => {
-      let card = new THREE.Mesh(
-      planeGeo,
-      new THREE.ShaderMaterial({
-        uniforms: {
-          map: { value: map },
-          resolution: {
-            value: new THREE.Vector2(
-              this.renderer.domElement.width,
-              this.renderer.domElement.height
-            )
-          },
-          blurRadius: { value: 0 }, //像素
-          opacity: { value: 0 }
-        },
-        vertexShader: BlurShader.vertexShader,
-        fragmentShader: BlurShader.fragmentShader,
-        transparent: true,
-        side: 2
-      })
-    )
-
-    Object.defineProperty(card.material, 'opacity', {
-      get: function () {
-        return card.material.uniforms.opacity.value
-      },
-      set: function (e) {
-        card.material.uniforms.opacity.value = e
-
-        card.material.uniforms.blurRadius.value = math.linearClamp(e, [0, 0.4], [40, 0])
-      }
-    })
-
-    let direction,
-      far = setting.cards.far
-    if (around) {
-      //在四周所有方向都可生成，在一开始时需要
-      let n = 0.4 //范围0-1 越大越可能接近相机
-      far = far * (1 - n * Math.random()) //靠近一点
-      direction = new THREE.Vector3(0, 0, -1).applyEuler(
-        new THREE.Euler(0, Math.PI * 2 * Math.random(), 0)
-      )
-    } else {
-      //仅在相机前方生成，因为相机往这个方向移动，最前方空缺
-
-      direction = new THREE.Vector3(0, 0, -1)
-        .applyQuaternion(this.camera.quaternion)
-        .applyEuler(new THREE.Euler(0, this.camera.hfov * (Math.random() - 0.5), 0))
-    }
-
-    let h = (Math.random() * 2 - 1) * setting.cards.highest * 0.8 // *0.8是因为靠近后就会飞出视线
-    card.position
-      .copy(this.camera.position)
-      .add(direction.add(new THREE.Vector3(0, h, 0)).multiplyScalar(far))
-
-    card.scale.set(map.image.width / 500, map.image.height / 500, 1)
-    this.cardGroup.add(card)
-
-    card.transition = transitions.start(
-      lerp.property(card.material, 'opacity', 1, e => {
-        //console.log(e, card.uuid)
-      }),
-      setting.cards.fadeInDur
-    )
-  })
-}
-
-Viewer.prototype.removeCards = function () {
-  //移除超过bound的卡
-  let needRemove = this.cardGroup.children.filter(card => {
-    if (card.disToCam > setting.cards.far) {
-      card.material.dispose()
-      transitions.cancel(card.transition)
-      //console.log('remove一张卡')
-      return true
-    }
-  })
-  needRemove.forEach(card => card.parent.remove(card))
-  //needRemove.length>0 && console.log('当前存在卡数', this.cardGroup.children.length)
-}
-
-Viewer.prototype.update = function (deltaTime) {
-  //绘制的时候同时更新
-
-  this.setSize()
-  this.control.update(deltaTime)
-  transitions.update(deltaTime)
-
-  if (this.autoMove) {
-    let direction = new THREE.Vector3(0, 0, -1).applyQuaternion(this.camera.quaternion)
-    let moveSpeed = 0.8
-    this.camera.position.add(direction.multiplyScalar(deltaTime * moveSpeed))
-  }
-  this.cardGroup.children.forEach(card => {
-    card.quaternion.copy(this.camera.quaternion)
-
-    let dis = card.position.clone().setY(0).distanceTo(this.camera.position.clone().setY(0))
-    if (!card.transition.running) {
-      card.material.opacity = math.linearClamp(
-        dis,
-        [setting.cards.near, setting.cards.beginFadeNear],
-        [0, 1]
-      )
-    }
-
-    card.disToCam = dis
-  })
-  this.removeCards()
-
-  var needsUpdate = 1
-  if (needsUpdate) {
-    this.renderer.autoClear = true
-    this.renderer.render(this.scene, this.camera)
-  }
-}
-
-Viewer.prototype.bindEvents = function () {
-  this.renderer.domElement.addEventListener('pointermove', this.onPointerMove.bind(this), false)
-  this.renderer.domElement.addEventListener('pointerdown', this.onPointerDown.bind(this), false)
-  this.renderer.domElement.addEventListener('pointerup', this.onPointerUp.bind(this), false)
-}
-
-Viewer.prototype.setRenderer = function () {
-  try {
-    ;((this.renderer = new THREE.WebGLRenderer({
-      canvas: $(this.dom).find('canvas')[0],
-      antialias: true
-    })),
-      this.renderer.setPixelRatio(window.devicePixelRatio ? window.devicePixelRatio : 1),
-      (this.renderer.autoClear = false))
-    this.renderer.setClearColor(0xffffff, 1)
-    console.log('ContextCreated')
-    //this.emit(Events.ContextCreated)
-  } catch (e) {
-    console.error('Unable to create a WebGL rendering context')
-  }
-}
-
-Viewer.prototype.hasChanged = function () {
-  //判断画面是否改变了，改变后需要更新一些东西
-  var copy = function () {
-    this.previousState = {
-      projectionMatrix: this.camera.projectionMatrix.clone(), //worldMatrix在control时归零了所以不用了吧，用position和qua也一样
-      position: this.camera.position.clone(),
-      quaternion: this.camera.quaternion.clone(),
-      //mouse: this.mouse.clone(),
-      fov: this.camera.fov
-    }
-  }.bind(this)
-
-  if (!this.previousState) {
-    copy()
-    return { cameraChanged: !0, changed: !0 }
-  }
-  var cameraChanged =
-    !this.camera.projectionMatrix.equals(this.previousState.projectionMatrix) ||
-    !this.camera.position.equals(this.previousState.position) ||
-    !this.camera.quaternion.equals(this.previousState.quaternion)
-
-  var changed = cameraChanged //|| !this.mouse.equals(this.previousState.mouse)
-
-  copy()
-
-  return { cameraChanged, changed }
-}
-
-Viewer.prototype.setSize = (function () {
-  var w, h, pixelRatio
-  return function () {
-    if (
-      w != this.dom.clientWidth ||
-      h != this.dom.clientHeight ||
-      pixelRatio != window.devicePixelRatio
-    ) {
-      w = this.dom.clientWidth
-      h = this.dom.clientHeight
-
-      pixelRatio = window.devicePixelRatio
-
-      this.camera.aspect = w / h
-      this.camera.updateProjectionMatrix()
-
-      this.renderer.setSize(w, h, false, pixelRatio)
-
-      this.camera.hfov = cameraLight.getHFOVForCamera(this.camera, true)
-
-      this.cardGroup.children.forEach(card => card.material.uniforms.resolution.value.set(w, h))
-    }
-  }
-})()
-
-;((Viewer.prototype.animate = function () {
-  var deltaTime = Math.min(1, this.updateClock.getDelta())
-  this.update(deltaTime)
-  //bus.emit('player/position/change', {x:this.position.x, y:this.position.z, lon: this.cameraControls.controls.panorama.lon})
-
-  window.requestAnimationFrame(this.animate.bind(this))
-}),
-  (Viewer.prototype.onPointerMove = function (event) {
-    if (event.isPrimary === false) return
-
-    mouse.x = (event.clientX / window.innerWidth) * 2 - 1
-    mouse.y = -(event.clientY / window.innerHeight) * 2 + 1
-
-    if (!this.pointerDownPos) this.checkIntersection()
-  }))
-Viewer.prototype.onPointerDown = function (event) {
-  if (event.isPrimary === false) return
-  mouse.x = (event.clientX / window.innerWidth) * 2 - 1
-  mouse.y = -(event.clientY / window.innerHeight) * 2 + 1
-  this.pointerDownPos = mouse.clone()
-  this.pointerDownTime = Date.now()
-}
-
-Viewer.prototype.onPointerUp = function (event) {
-  if (event.isPrimary === false) return
-  mouse.x = (event.clientX / window.innerWidth) * 2 - 1
-  mouse.y = -(event.clientY / window.innerHeight) * 2 + 1
-  let now = Date.now()
-  if (mouse.distanceTo(this.pointerDownPos) < 0.006 && now - this.pointerDownTime < 1000) {
-    //click
-
-    //doubleClick
-    /* var time = new Date().getTime();
-        if(time - this.clickTime < 300){
-            if(this.intersects.length){
-                console.log('doubleClick');
-                transitions.cancelById(0)
-                transitions.start(lerp.vector(this.control.target, this.intersects[0].point), 600, null, 0 , easing.easeInOutQuad, null, Transitions.doubleClick);
-            }
-        } */
-    if (this.hoveredObject) {
-      this.dispatchEvent({
-        type: 'clickObject',
-        imgName: this.hoveredObject.material.uniforms.map.value.image.src.split('/').pop()
-      })
-    }
-  }
-
-  this.pointerDownPos = null
-}
-
-Viewer.prototype.checkIntersection = function () {
-  raycaster.setFromCamera(mouse, this.camera)
-  raycaster.near = 2
-  const intersects = raycaster.intersectObject(this.cardGroup, true)
-  var recover = () => {
-    if (this.hoveredObject) {
-    }
-  }
-  if (intersects.length > 0) {
-    const hoveredObject = intersects[0].object
-    if (this.hoveredObject != hoveredObject) {
-      recover()
-      this.dispatchEvent({
-        type: 'hoverObject',
-        imgName: hoveredObject.material.uniforms.map.value.image.src.split('/').pop()
-      })
-      this.hoveredObject = hoveredObject
-      this.dom.style.cursor = 'pointer'
-    }
-  } else {
-    recover()
-    this.dispatchEvent({ type: 'mouseoutObject' })
-    this.dom.style.cursor = ''
-    this.hoveredObject = null
-  }
-  this.intersects = intersects
-}
-
-Viewer.prototype.setAutoMove = function (state) {
-  //设置相机飞行状态
-  this.autoMove = !!state
-}
-
-Object.assign(Viewer.prototype, THREE.EventDispatcher.prototype)
-
-//============
-
-var startTime = new Date().getTime()
-var viewer = new Viewer(0, $('#player')[0])

project/public/three/data.js

@@ -0,0 +1,57 @@
+    const cardNames = [
+      {
+        id: 1,
+        name: '文物的名称1',
+        img: '1.png',
+        obj: { 构件: '构件1', 位置: '位置1', 装饰: '装饰1', 材质: '材质1' }
+      },
+      {
+        id: 2,
+        name: '文物的名称2',
+        img: '2.png',
+        obj: { 构件: '构件2', 位置: '位置2', 装饰: '装饰2', 材质: '材质2' }
+      },
+      {
+        id: 3,
+        name: '文物的名称3',
+        img: '3.png',
+        obj: { 构件: '构件3', 位置: '位置3', 装饰: '装饰3', 材质: '材质3' }
+      },
+      {
+        id: 4,
+        name: '文物的名称4',
+        img: '4.png',
+        obj: { 构件: '构件4', 位置: '位置4', 装饰: '装饰4', 材质: '材质4' }
+      },
+      {
+        id: 5,
+        name: '文物的名称5',
+        img: '5.png',
+        obj: { 构件: '构件5', 位置: '位置5', 装饰: '装饰5', 材质: '材质5' }
+      },
+      {
+        id: 6,
+        name: '文物的名称6',
+        img: '6.png',
+        obj: { 构件: '构件6', 位置: '位置6', 装饰: '装饰6', 材质: '材质6' }
+      },
+      {
+        id: 7,
+        name: '文物的名称7',
+        img: '7.png',
+        obj: { 构件: '构件7', 位置: '位置7', 装饰: '装饰7', 材质: '材质7' }
+      },
+      {
+        id: 8,
+        name: '文物的名称8',
+        img: '8.png',
+        obj: { 构件: '构件8', 位置: '位置8', 装饰: '装饰8', 材质: '材质8' }
+      },
+      {
+        id: 9,
+        name: '文物的名称9',
+        img: '9.png',
+        obj: { 构件: '构件9', 位置: '位置9', 装饰: '装饰9', 材质: '材质9' }
+      }
+    ]
+

project/public/myData/three/index.html

@@ -45,38 +45,11 @@
 
   <script type="text/javascript" src="jquery-2.1.1.min.js"></script>
   <script type="text/javascript" src="three.min.js"></script>
-  <script>
 
-    const cardNames = [
-      {
-        id: 1, name: '文物的名称1', img: './assets/1.png', obj: { 构件: '构件1', 位置: '位置1', 装饰: '装饰1', 材质: '材质1' },
-      },
-      {
-        id: 2, name: '文物的名称2', img: './assets/2.png', obj: { 构件: '构件2', 位置: '位置2', 装饰: '装饰2', 材质: '材质2' }
-      },
-      {
-        id: 3, name: '文物的名称3', img: './assets/3.png', obj: { 构件: '构件3', 位置: '位置3', 装饰: '装饰3', 材质: '材质3' }
-      },
-      {
-        id: 4, name: '文物的名称4', img: './assets/4.png', obj: { 构件: '构件4', 位置: '位置4', 装饰: '装饰4', 材质: '材质4' }
-      },
-      {
-        id: 5, name: '文物的名称5', img: './assets/5.png', obj: { 构件: '构件5', 位置: '位置5', 装饰: '装饰5', 材质: '材质5' }
-      },
-      {
-        id: 6, name: '文物的名称6', img: './assets/6.png', obj: { 构件: '构件6', 位置: '位置6', 装饰: '装饰6', 材质: '材质6' }
-      },
-      {
-        id: 7, name: '文物的名称7', img: './assets/7.png', obj: { 构件: '构件7', 位置: '位置7', 装饰: '装饰7', 材质: '材质7' }
-      },
-      {
-        id: 8, name: '文物的名称8', img: './assets/8.png', obj: { 构件: '构件8', 位置: '位置8', 装饰: '装饰8', 材质: '材质8' }
-      },
-      {
-        id: 9, name: '文物的名称9', img: './assets/9.png', obj: { 构件: '构件9', 位置: '位置9', 装饰: '装饰9', 材质: '材质9' }
-      }
+  <script src="./data.js"></script>
+
+  <script>
 
-    ]
 
     let vfov = 60 //垂直视角范围度数
     window.setting = {
@@ -93,6 +66,25 @@
 
     };
 
+    /* var textarea = document.createElement('textarea');
+    textarea.id = "consoleLog";
+
+    document.getElementsByTagName("body")[0].appendChild(textarea);
+    var list = ["log", "error", "warn", "debug", "info", "time", "timeEnd"]
+    var exchange = function (o) {
+    console["old" + o] = console[o];
+    console[o] = function (str) {
+      console["old" + o](str);
+      var t = document.getElementById("consoleLog").innerHTML;
+      document.getElementById("consoleLog").innerHTML = str + "\n\n" + t;
+    }
+    }
+
+    for (var i = 0; i < list.length; i++) {
+    exchange(list[i])
+    }
+
+    */
   </script>
 
 

project/public/three/index.js

@@ -0,0 +1,467 @@
+
+
+let camera, scene, renderer;
+
+const shadowHasAlpha = false  //阴影是否考虑光透过透明材质  
+
+const planeGeo = new THREE.PlaneBufferGeometry(1, 1)
+const raycaster = new THREE.Raycaster(); raycaster.linePrecision = 0;//不检测boxHelper
+const mouse = new THREE.Vector2();
+
+let needUpdateShadow, needsUpdateScene
+
+var BlurShader = {
+
+    uniforms: {
+
+        "map": { value: null },
+        "blurRadius": { value: new THREE.Vector2(1.0 / 512.0, 1.0 / 512.0) },
+        'opacity': { value: 0 }
+    },
+
+    vertexShader: [
+
+        "varying vec2 vUv;",
+
+        "void main() {",
+
+        "	vUv = uv;",
+        "	gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );",
+
+        "}"
+
+    ].join("\n"),
+
+    fragmentShader: [
+
+        "uniform sampler2D map;",
+        "uniform vec2 resolution;",
+        "uniform float blurRadius;",
+        "uniform float opacity;",
+        "varying vec2 vUv;",
+
+        "void main() {",
+
+
+        "	vec2 offset = blurRadius / resolution; ",
+
+        "	vec4 sum = vec4( 0.0 );",
+
+        "	sum += texture2D( map, vec2( vUv.x - 4.0 * offset.x, vUv.y ) ) * 0.051;",
+        "	sum += texture2D( map, vec2( vUv.x - 3.0 * offset.x, vUv.y ) ) * 0.0918;",
+        "	sum += texture2D( map, vec2( vUv.x - 2.0 * offset.x, vUv.y ) ) * 0.12245;",
+        "	sum += texture2D( map, vec2( vUv.x - 1.0 * offset.x, vUv.y ) ) * 0.1531;",
+        "	sum += texture2D( map, vec2( vUv.x, vUv.y ) ) * 0.1633;",
+        "	sum += texture2D( map, vec2( vUv.x + 1.0 * offset.x, vUv.y ) ) * 0.1531;",
+        "	sum += texture2D( map, vec2( vUv.x + 2.0 * offset.x, vUv.y ) ) * 0.12245;",
+        "	sum += texture2D( map, vec2( vUv.x + 3.0 * offset.x, vUv.y ) ) * 0.0918;",
+        "	sum += texture2D( map, vec2( vUv.x + 4.0 * offset.x, vUv.y ) ) * 0.051;",
+
+        "	sum += texture2D( map, vec2( vUv.x , vUv.y - 4.0 * offset.y ) ) * 0.051;",
+        "	sum += texture2D( map, vec2( vUv.x , vUv.y - 3.0 * offset.y) ) * 0.0918;",
+        "	sum += texture2D( map, vec2( vUv.x , vUv.y - 2.0 * offset.y) ) * 0.12245;",
+        "	sum += texture2D( map, vec2( vUv.x , vUv.y - 1.0 * offset.y ) ) * 0.1531;",
+        "	sum += texture2D( map, vec2( vUv.x , vUv.y ) ) * 0.1633;",
+        "	sum += texture2D( map, vec2( vUv.x , vUv.y + 1.0 * offset.y ) ) * 0.1531;",
+        "	sum += texture2D( map, vec2( vUv.x , vUv.y + 2.0 * offset.y ) ) * 0.12245;",
+        "	sum += texture2D( map, vec2( vUv.x , vUv.y + 3.0 * offset.y ) ) * 0.0918;",
+        "	sum += texture2D( map, vec2( vUv.x , vUv.y + 4.0 * offset.y ) ) * 0.051;",
+
+
+        "	gl_FragColor = sum / 2.0 ;",
+        "	gl_FragColor.a *= opacity;",
+
+
+
+        "}"
+
+    ].join("\n")
+
+};
+
+
+
+
+
+var Viewer = function (index, dom) {
+    this.index = index;
+    this.dom = dom
+    this.camera = new THREE.PerspectiveCamera(setting.vfov);
+    this.camera.position.set(0, 1, -1.5);
+    this.control = new PanoramaControls(this.camera, this.dom)
+    this.control.latMin = this.control.latMax = 0
+
+
+    //this.control.target.set(0,-1,0)  
+    this.setRenderer()
+
+    this.scene = new THREE.Scene();
+    this.scene.background = common.loadTexture("./img/background.jpg")
+    this.pointerDownPos
+    this.active = false;
+    this.antialias = true;
+    this.clickTime = new Date().getTime();
+    this.updateClock = new THREE.Clock();
+
+
+    this.cardGroup = new THREE.Object3D();
+    this.scene.add(this.cardGroup);
+    this.cardGroup.name = "cardGroup";
+    this.autoMove = true
+
+
+    this.bindEvents()
+    this.preLoadCards()
+    this.animate()
+}
+
+/* 
+    同一时间，视线范围不能同时出现两张卡。也就是分布要根据视角范围变化，但是如果浏览器变宽导致的出现两张卡不算。
+
+ */
+
+Viewer.prototype.preLoadCards = function () {
+
+    let i = 10
+    while (i-- > 0) {
+        this.addCard(true)
+    }
+
+
+    let add = () => {
+        if (document.hidden) return
+        this.addCard()
+        setTimeout(add, 40000 * Math.random() * this.getDensity())  //当前视野中密度越小 添加越频繁
+    }
+    add()
+
+
+
+    document.addEventListener('visibilitychange', (e) => {
+        if (!document.hidden) add()
+        console.log('document.hidden', document.hidden)
+    })
+
+}
+
+Viewer.prototype.getDensity = function () {
+
+
+    let frustumMatrix = new THREE.Matrix4()
+    frustumMatrix.multiplyMatrices(this.camera.projectionMatrix, this.camera.matrixWorldInverse)
+
+    let frustum = new THREE.Frustum();
+    frustum.setFromProjectionMatrix(frustumMatrix)
+
+
+    let count = this.cardGroup.children.filter(card => {
+        return frustum.containsPoint(card.position)
+    }).length
+
+
+    let density = count / (this.renderer.domElement.width * this.renderer.domElement.height) * 1000
+
+    return density
+}
+
+
+Viewer.prototype.addCard = function (around) {
+
+    let cardIndex = Math.floor(cardNames.length * Math.random())
+    common.loadTexture("./assets/" + cardNames[cardIndex].img, (map) => {
+
+        let card = new THREE.Mesh(planeGeo, new THREE.ShaderMaterial({
+            uniforms: {
+                map: { value: map },
+                resolution: { value: new THREE.Vector2(this.renderer.domElement.width, this.renderer.domElement.height) },
+                blurRadius: { value: 0 },//像素
+                opacity: { value: 0 }
+            },
+            vertexShader: BlurShader.vertexShader,
+            fragmentShader: BlurShader.fragmentShader,
+            transparent: true, side: 2
+        }))
+
+        Object.defineProperty(card.material, 'opacity', {
+            get: function () {
+                return card.material.uniforms.opacity.value
+            },
+            set: function (e) {
+                card.material.uniforms.opacity.value = e
+
+                card.material.uniforms.blurRadius.value = math.linearClamp(e, [0, 0.4], [40, 0])
+            }
+        })
+
+        let direction, far = setting.cards.far
+        if (around) {//在四周所有方向都可生成，在一开始时需要
+            let n = 0.6//范围0-1 越大越可能接近相机
+            far = far * (1 - n * Math.random()) //靠近一点  
+            direction = new THREE.Vector3(0, 0, -1).applyEuler(new THREE.Euler(0, Math.PI * 2 * Math.random(), 0))
+        } else {//仅在相机前方生成，因为相机往这个方向移动，最前方空缺
+
+
+            direction = new THREE.Vector3(0, 0, -1).applyQuaternion(this.camera.quaternion).applyEuler(new THREE.Euler(0, this.camera.hfov * (Math.random() - 0.5), 0))
+
+        }
+
+
+        let h = (Math.random() * 2 - 1) * setting.cards.highest * 0.8 // *0.8是因为靠近后就会飞出视线
+        card.position.copy(this.camera.position).add(direction.add(new THREE.Vector3(0, h, 0)).multiplyScalar(far))
+
+        card.scale.set(map.image.width / 500, map.image.height / 500, 1)
+        this.cardGroup.add(card)
+
+
+        card.transition = transitions.start(lerp.property(card.material, 'opacity', 1, (e) => {
+            //console.log(e, card.uuid)
+
+        }), setting.cards.fadeInDur);
+
+
+    })
+}
+
+
+Viewer.prototype.removeCards = function () {//移除超过bound的卡
+    let needRemove = this.cardGroup.children.filter(card => {
+        if (card.disToCam > setting.cards.far) {
+            card.material.dispose()
+            transitions.cancel(card.transition)
+            //console.log('remove一张卡')
+            return true
+        }
+    })
+    needRemove.forEach(card => card.parent.remove(card))
+    //needRemove.length>0 && console.log('当前存在卡数', this.cardGroup.children.length)
+}
+
+
+Viewer.prototype.update = function (deltaTime) {//绘制的时候同时更新 
+
+    this.setSize()
+    this.control.update(deltaTime)
+    transitions.update(deltaTime)
+
+    if (this.autoMove) {
+        let direction = new THREE.Vector3(0, 0, -1).applyQuaternion(this.camera.quaternion)
+        let moveSpeed = 0.8
+        this.camera.position.add(direction.multiplyScalar(deltaTime * moveSpeed))
+    }
+    this.cardGroup.children.forEach(card => {
+        card.quaternion.copy(this.camera.quaternion)
+
+        let dis = card.position.clone().setY(0).distanceTo(this.camera.position.clone().setY(0))
+        if (!card.transition.running) {
+            card.material.opacity = math.linearClamp(dis, [setting.cards.near, setting.cards.beginFadeNear], [0, 1])
+        }
+
+        card.disToCam = dis
+    })
+    this.removeCards()
+
+
+
+
+
+    var needsUpdate = 1;
+    if (needsUpdate) {
+        this.renderer.autoClear = true
+        this.renderer.render(this.scene, this.camera)
+    }
+
+
+}
+
+
+
+
+Viewer.prototype.bindEvents = function () {
+
+    this.renderer.domElement.addEventListener('pointermove', this.onPointerMove.bind(this), false);
+    this.renderer.domElement.addEventListener('pointerdown', this.onPointerDown.bind(this), false);
+    this.renderer.domElement.addEventListener('pointerup', this.onPointerUp.bind(this), false);
+
+}
+
+Viewer.prototype.setRenderer = function () {
+    try {
+        this.renderer = new THREE.WebGLRenderer({ canvas: $(this.dom).find("canvas")[0], antialias: true }),
+            this.renderer.setPixelRatio(window.devicePixelRatio ? window.devicePixelRatio : 1),
+            this.renderer.autoClear = false
+        this.renderer.setClearColor(0xffffff, 1)
+        console.log("ContextCreated")
+        //this.emit(Events.ContextCreated) 
+    } catch (e) {
+        console.error("Unable to create a WebGL rendering context")
+    }
+}
+
+
+
+
+Viewer.prototype.hasChanged = function () {//判断画面是否改变了，改变后需要更新一些东西
+    var copy = function () {
+        this.previousState = {
+            projectionMatrix: this.camera.projectionMatrix.clone(),//worldMatrix在control时归零了所以不用了吧，用position和qua也一样
+            position: this.camera.position.clone(),
+            quaternion: this.camera.quaternion.clone(),
+            //mouse: this.mouse.clone(), 
+            fov: this.camera.fov
+        };
+    }.bind(this)
+
+
+    if (!this.previousState) {
+        copy()
+        return { cameraChanged: !0, changed: !0 };
+    }
+    var cameraChanged =
+        !this.camera.projectionMatrix.equals(this.previousState.projectionMatrix) ||
+        !this.camera.position.equals(this.previousState.position) ||
+        !this.camera.quaternion.equals(this.previousState.quaternion)
+
+
+    var changed = cameraChanged //|| !this.mouse.equals(this.previousState.mouse)  
+
+    copy()
+
+    return { cameraChanged, changed };
+}
+
+Viewer.prototype.setSize = function () {
+    var w, h, pixelRatio;
+    return function () {
+        if (w != this.dom.clientWidth || h != this.dom.clientHeight || pixelRatio != window.devicePixelRatio) {
+            w = this.dom.clientWidth;
+            h = this.dom.clientHeight;
+
+            pixelRatio = window.devicePixelRatio;
+
+            this.camera.aspect = w / h;
+            this.camera.updateProjectionMatrix();
+
+
+            this.renderer.setSize(w, h, false, pixelRatio);
+
+            this.camera.hfov = cameraLight.getHFOVForCamera(this.camera, true)
+
+
+            this.cardGroup.children.forEach(card =>
+                card.material.uniforms.resolution.value.set(w, h)
+            )
+        }
+    }
+}()
+
+
+
+Viewer.prototype.animate = function () {
+    var deltaTime = Math.min(1, this.updateClock.getDelta());
+    this.update(deltaTime)
+    //bus.emit('player/position/change', {x:this.position.x, y:this.position.z, lon: this.cameraControls.controls.panorama.lon})
+
+    window.requestAnimationFrame(this.animate.bind(this));
+},
+
+
+    Viewer.prototype.onPointerMove = function (event) {
+
+        if (event.isPrimary === false) return;
+
+        mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
+        mouse.y = - (event.clientY / window.innerHeight) * 2 + 1;
+
+        if (!this.pointerDownPos) this.checkIntersection();
+
+    }
+Viewer.prototype.onPointerDown = function (event) {
+
+    if (event.isPrimary === false) return;
+    mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
+    mouse.y = - (event.clientY / window.innerHeight) * 2 + 1;
+    this.pointerDownPos = mouse.clone()
+    this.pointerDownTime = Date.now()
+}
+
+Viewer.prototype.onPointerUp = function (event) {
+
+    if (event.isPrimary === false) return;
+    mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
+    mouse.y = - (event.clientY / window.innerHeight) * 2 + 1;
+    let now = Date.now()
+    if (mouse.distanceTo(this.pointerDownPos) < 0.006 && now - this.pointerDownTime < 1000) {//click
+
+        //doubleClick
+        /* var time = new Date().getTime();
+        if(time - this.clickTime < 300){
+            if(this.intersects.length){
+                console.log('doubleClick');
+                transitions.cancelById(0)
+                transitions.start(lerp.vector(this.control.target, this.intersects[0].point), 600, null, 0 , easing.easeInOutQuad, null, Transitions.doubleClick);
+            }
+        } */
+        if (this.hoveredObject) {
+            this.dispatchEvent({ type: 'clickObject', imgName: this.hoveredObject.material.uniforms.map.value.image.src.split('/').pop() })
+        }
+    }
+
+    this.pointerDownPos = null
+}
+
+
+
+Viewer.prototype.checkIntersection = function () {
+
+    raycaster.setFromCamera(mouse, this.camera);
+    raycaster.near = 2
+    const intersects = raycaster.intersectObject(this.cardGroup, true);
+    var recover = () => {
+        if (this.hoveredObject) {
+
+
+        }
+    }
+    if (intersects.length > 0) {
+
+        const hoveredObject = intersects[0].object;
+        if (this.hoveredObject != hoveredObject) {
+            recover()
+            this.dispatchEvent({ type: "hoverObject", imgName: hoveredObject.material.uniforms.map.value.image.src.split('/').pop() })
+            this.hoveredObject = hoveredObject;
+            this.dom.style.cursor = 'pointer'
+
+        }
+    } else {
+        recover()
+        this.dispatchEvent({ type: "mouseoutObject" })
+        this.dom.style.cursor = ''
+        this.hoveredObject = null
+    }
+    this.intersects = intersects;
+}
+
+
+
+Viewer.prototype.setAutoMove = function (state) {//设置相机飞行状态
+    this.autoMove = !!state
+
+}
+
+Object.assign(Viewer.prototype, THREE.EventDispatcher.prototype);
+
+//============
+
+var startTime = new Date().getTime();
+var viewer = new Viewer(0, $("#player")[0])
+
+
+
+
+
+
+
+
+
+
+

project/src/pages/A5view/index.module.scss

@@ -1,9 +1,40 @@
 .A5view {
   position: relative;
+  overflow: auto;
+  // background-image: url('../../assets/three/background.jpg');
+  // background-size: 100% 100%;
+
+
   :global {
-    iframe{
+
+    iframe {
       width: 100%;
       height: 100%;
     }
+
+
+    // .A5row {
+    //   width: 17vw;
+    //   height: 44vh;
+    //   background-image: url('../../assets/three/row.png');
+    //   background-size: 100% 100%;
+    //   display: flex;
+    //   flex-direction: column;
+    //   justify-content: center;
+    //   align-items: center;
+
+    //   h3 {
+    //     font-size: 16px;
+    //     margin-bottom: 3%;
+    //     color: #fff3c5;
+    //     letter-spacing: 2px;
+    //   }
+
+    //   img {
+    //     max-width: 40%;
+    //     max-height: 50%;
+    //   }
+    // }
   }
-}
+
+}

project/src/pages/A5view/index.tsx

@@ -1,13 +1,17 @@
-import React, { useEffect } from 'react'
+import React, { useCallback, useEffect, useRef, useState } from 'react'
 import styles from './index.module.scss'
 import MenuSider from '@/components/MenuSider'
-function A5view() {
-
- 
 
+function A5view() {
   return (
     <div className={styles.A5view}>
-
+      {/* {cardNames.map(item => (
+        <div className='A5row' key={item.id}>
+          <h3>{item.name}</h3>
+          <img src={`./myData/three/assets/${item.img}`} alt='' />
+        </div>
+      ))} */}
+      <iframe id='iframe' src='./three/index.html' frameBorder='0' title='3d'></iframe>
       <MenuSider isSidebarOpen={false} />
     </div>
   )

project/src/types/declaration.d.ts

@@ -6,6 +6,9 @@ declare module '*.gif'
 declare module '*.svg'
 declare module 'js-export-excel'
 declare module 'braft-utils'
+declare module 'react-virtualized'
+declare const cardNames: any[]
+
 
 // public/myData.js 里面的一些数据的类型
 declare const isPcTemp: boolean