up

project/public/myData/three/index.html

@@ -47,7 +47,36 @@
   <script type="text/javascript" src="three.min.js"></script>
   <script>
 
-    const cardNames = ['1.jpg', '2.jpg', '3.jpg', '4.jpg', '5.jpg', '6.jpg', '7.jpg', '8.jpg', '9.jpg', '10.jpg', '11.jpg', '12.jpg', '13.jpg', '14.jpg']
+    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' }
+      }
+
+    ]
 
     let vfov = 60 //垂直视角范围度数
     window.setting = {
@@ -64,25 +93,6 @@
 
     };
 
-    /* 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/myData/three/index.js

@@ -1,118 +1,99 @@
+let camera, scene, renderer
 
-
-let camera, scene, renderer;
-
-const shadowHasAlpha = false  //阴影是否考虑光透过透明材质  
+const shadowHasAlpha = false //阴影是否考虑光透过透明材质
 
 const planeGeo = new THREE.PlaneBufferGeometry(1, 1)
-const raycaster = new THREE.Raycaster(); raycaster.linePrecision = 0;//不检测boxHelper
-const mouse = new THREE.Vector2();
+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")
-
-};
-
-
-
-
+  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()
+  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()
 }
 
 /* 
@@ -121,286 +102,268 @@ var Viewer = function (index, dom) {
  */
 
 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)
-    })
-
+  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 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 count = this.cardGroup.children.filter(card => {
+    return frustum.containsPoint(card.position)
+  }).length
 
-    let density = count / (this.renderer.domElement.width * this.renderer.domElement.height) * 1000
+  let density = (count / (this.renderer.domElement.width * this.renderer.domElement.height)) * 1000
 
-    return density
+  return density
 }
 
 
 Viewer.prototype.addCard = function (around) {
-
-    let cardIndex = Math.floor(cardNames.length * Math.random())
-    common.loadTexture("assets/" + cardNames[cardIndex], (map) => {
-
-
-        /* let card = new THREE.Mesh(planeGeo, new THREE.MeshBasicMaterial({ 
-            map,
-            transparent:true, opacity:0,side:2
-        }))  */
-
-
-        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
-        }
+  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])
+      }
     })
-    needRemove.forEach(card => card.parent.remove(card))
-    //needRemove.length>0 && console.log('当前存在卡数', this.cardGroup.children.length)
-}
 
+    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 {
+      //仅在相机前方生成，因为相机往这个方向移动，最前方空缺
 
-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))
+      direction = new THREE.Vector3(0, 0, -1)
+        .applyQuaternion(this.camera.quaternion)
+        .applyEuler(new THREE.Euler(0, this.camera.hfov * (Math.random() - 0.5), 0))
     }
-    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()
-
-
-
 
+    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
+    )
+  })
+}
 
-    var needsUpdate = 1;
-    if (needsUpdate) {
-        this.renderer.autoClear = true
-        this.renderer.render(this.scene, this.camera)
+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);
-
+  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")
-    }
+  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 };
+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
     }
-    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)  
+  }.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)
 
-    return { cameraChanged, changed };
-}
+  var changed = cameraChanged //|| !this.mouse.equals(this.previousState.mouse)
 
-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;
+  copy()
 
-            pixelRatio = window.devicePixelRatio;
+  return { cameraChanged, changed }
+}
 
-            this.camera.aspect = w / h;
-            this.camera.updateProjectionMatrix();
+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.renderer.setSize(w, h, false, pixelRatio);
+      this.camera.aspect = w / h
+      this.camera.updateProjectionMatrix()
 
-            this.camera.hfov = cameraLight.getHFOVForCamera(this.camera, true)
+      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)
-            )
-        }
+      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.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
 
-    Viewer.prototype.onPointerMove = function (event) {
+    mouse.x = (event.clientX / window.innerWidth) * 2 - 1
+    mouse.y = -(event.clientY / window.innerHeight) * 2 + 1
 
-        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();
-
-    }
+    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()
+  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 (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');
@@ -408,67 +371,53 @@ Viewer.prototype.onPointerUp = function (event) {
                 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() })
-        }
+    if (this.hoveredObject) {
+      this.dispatchEvent({
+        type: 'clickObject',
+        imgName: this.hoveredObject.material.uniforms.map.value.image.src.split('/').pop()
+      })
     }
+  }
 
-    this.pointerDownPos = null
+  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) {
-
-
-        }
+  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
+  }
+  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'
     }
-    this.intersects = intersects;
+  } else {
+    recover()
+    this.dispatchEvent({ type: 'mouseoutObject' })
+    this.dom.style.cursor = ''
+    this.hoveredObject = null
+  }
+  this.intersects = intersects
 }
 
-
-
-Viewer.prototype.setAutoMove = function (state) {//设置相机飞行状态
-    this.autoMove = !!state
-
+Viewer.prototype.setAutoMove = function (state) {
+  //设置相机飞行状态
+  this.autoMove = !!state
 }
 
-Object.assign(Viewer.prototype, THREE.EventDispatcher.prototype);
+Object.assign(Viewer.prototype, THREE.EventDispatcher.prototype)
 
 //============
 
-var startTime = new Date().getTime();
-var viewer = new Viewer(0, $("#player")[0])
-
-
-
-
-
-
-
-
-
-
-
+var startTime = new Date().getTime()
+var viewer = new Viewer(0, $('#player')[0])

project/src/pages/A5view/index.tsx

@@ -3,16 +3,10 @@ import styles from './index.module.scss'
 import MenuSider from '@/components/MenuSider'
 function A5view() {
 
-  useEffect(()=>{
-     // 点击图片
-    (window as any).clickObject = (val:any) => {
-      console.log("000", val);
-    };
-  },[])
+ 
 
   return (
     <div className={styles.A5view}>
-      <iframe title='three' id='iframe' src='./myData/three/index.html' frameBorder='0'></iframe>
 
       <MenuSider isSidebarOpen={false} />
     </div>