Browse Source

fix: Merge branch 'master' of http://face3d.4dage.com:7005/chenzhiguang/nj_museum

# Conflicts:
#	public/package/js/label.js
xzw 2 years ago
parent
commit
b5197da132

BIN
public/images/image_song.jpg


BIN
public/model/default.jpg


+ 12 - 8
public/package/js/label.js

@@ -3,7 +3,6 @@ class Label2D extends THREE.EventDispatcher {
         super()
         super()
         this.title = o.title
         this.title = o.title
         this.position = o.position
         this.position = o.position
-        console.log(o);
         this.elem = $(`<div class="room-label ${o.labeltype ? o.labeltype : ''} ${o.posi == 'right' ? 'right' : ''}" >
         this.elem = $(`<div class="room-label ${o.labeltype ? o.labeltype : ''} ${o.posi == 'right' ? 'right' : ''}" >
         <a><p>
         <a><p>
         <span>${o.title}</span>
         <span>${o.title}</span>
@@ -27,10 +26,13 @@ class Label2D extends THREE.EventDispatcher {
         $(".widgets-doll-labels").append(this.elem)
         $(".widgets-doll-labels").append(this.elem)
         this.pos2d = new THREE.Vector3
         this.pos2d = new THREE.Vector3
         this.wenli = o.imgsrc
         this.wenli = o.imgsrc
+        this.emissiveTexture = texLoader.load(`model/${o.imgsrc}.jpg`);
+
+
 
 
         this.elem.css({ position: 'absolute', 'z-index': 999 })
         this.elem.css({ position: 'absolute', 'z-index': 999 })
         this.clickFun = o.clickFun;
         this.clickFun = o.clickFun;
-        this.clickFun && this.elem.on('click', this.clickFun.bind(this))
+        this.clickFun && this.elem.on('click', this.clickFun.bind(this,o))
 
 
         {
         {
             let update = (e) => {
             let update = (e) => {
@@ -60,9 +62,6 @@ class Label2D extends THREE.EventDispatcher {
         this.update()
         this.update()
     }
     }
 
 
-
-     
-
  
  
     update(e={}) {
     update(e={}) {
         if (!this.position || !this.visible || this.sheltered) return
         if (!this.position || !this.visible || this.sheltered) return
@@ -70,7 +69,13 @@ class Label2D extends THREE.EventDispatcher {
 
 
         var p = convertTool.getPos2d(this.position, viewer.camera, $("#player")[0]);
         var p = convertTool.getPos2d(this.position, viewer.camera, $("#player")[0]);
         this.pos2d = p.vector;
         this.pos2d = p.vector;
-        
+
+
+        if (this.pos2d.x>0) {
+            this.elem.addClass('right')
+          } else{
+            this.elem.removeClass('right')
+          }
         
         
         if (!p || !p.trueSide) {
         if (!p || !p.trueSide) {
             this.elem.css('display', 'none'); return;
             this.elem.css('display', 'none'); return;
@@ -83,7 +88,7 @@ class Label2D extends THREE.EventDispatcher {
             if (this.shelterByModel && convertTool.ifShelter(this.position, p.vector, viewer.camera, viewer.model.children, 0.05)) {
             if (this.shelterByModel && convertTool.ifShelter(this.position, p.vector, viewer.camera, viewer.model.children, 0.05)) {
                 this.sheltered = true
                 this.sheltered = true
                 this.elem.css('display', 'none'); return;
                 this.elem.css('display', 'none'); return;
-            }else{
+            } else {
                 this.sheltered = false
                 this.sheltered = false
             }
             }
         } else {
         } else {
@@ -124,7 +129,6 @@ class Label2D extends THREE.EventDispatcher {
         this.elem.remove();
         this.elem.remove();
         this.dispatchEvent({ type: 'dispose' })
         this.dispatchEvent({ type: 'dispose' })
         this._listeners = {}
         this._listeners = {}
-        console.log('dispose')
     }
     }
 
 
 
 

+ 18 - 18
public/package/js/objViewer.js

@@ -2,6 +2,7 @@
 let texLoader = new THREE.TextureLoader;
 let texLoader = new THREE.TextureLoader;
 
 
 
 
+var emissiveTexture = null
 
 
 let camera, scene, renderer, stats, gui;
 let camera, scene, renderer, stats, gui;
 const mouse = new THREE.Vector2();
 const mouse = new THREE.Vector2();
@@ -169,19 +170,18 @@ Viewer.prototype.animate = function () {
     if (changed.cameraChanged) {
     if (changed.cameraChanged) {
         this.dispatchEvent({ type: 'view.changed'/* , changeSlightly: changed.changeSlightly */ })
         this.dispatchEvent({ type: 'view.changed'/* , changeSlightly: changed.changeSlightly */ })
         delayNeedUpdated = true
         delayNeedUpdated = true
-        
-        if( !transitions.funcs.some(function (e) { return e.name === 'cameraFly' })){
-            convertTool.intervalTool.isWaiting('delayUpdate', ()=>{ //延时update,防止卡顿
-                if(delayNeedUpdated){  
-                    delayNeedUpdated = false 
-                    this.dispatchEvent({ type: 'delayUpdate'  }) 
-                    console.log('delayUpdate')                
-                    return true 
-                } 
+
+        if (!transitions.funcs.some(function (e) { return e.name === 'cameraFly' })) {
+            convertTool.intervalTool.isWaiting('delayUpdate', () => { //延时update,防止卡顿
+                if (delayNeedUpdated) {
+                    delayNeedUpdated = false
+                    this.dispatchEvent({ type: 'delayUpdate' })
+                    return true
+                }
             }, 200)
             }, 200)
         }
         }
-        
-        
+
+
         let label_ = this.labels.filter(e => e.elem[0].style.display == 'block')
         let label_ = this.labels.filter(e => e.elem[0].style.display == 'block')
         label_.sort((a, b) => b.pos2d.z - a.pos2d.z)
         label_.sort((a, b) => b.pos2d.z - a.pos2d.z)
         label_.forEach((e, index) => e.elem.css('z-index', index + 1000));
         label_.forEach((e, index) => e.elem.css('z-index', index + 1000));
@@ -241,17 +241,13 @@ Viewer.prototype.animate = function () {
                         group.add(object);
                         group.add(object);
                         object.traverse(function (child) {
                         object.traverse(function (child) {
                             if (child.isMesh) {
                             if (child.isMesh) {
-                                console.log(child);
                                 if (child.name == "WL48_ping") {
                                 if (child.name == "WL48_ping") {
                                     let textrueLoader = new THREE.TextureLoader();
                                     let textrueLoader = new THREE.TextureLoader();
-                                    // var emissiveTexture = textrueLoader.load("model/shadow.jpg");
-                                    // emissiveTexture.encoding = THREE.LinearEncoding;
-                                    // child.material.emissiveMap = emissiveTexture;
-                                    child.material.emissiveIntensity = 0;
+                                    emissiveTexture = textrueLoader.load("model/default.jpg");
                                     let step = 1
                                     let step = 1
                                     setInterval(() => {
                                     setInterval(() => {
-                                        if (window.activetab == 'pic') {
-                                            if (child.material.emissiveIntensity > 0.3) {
+                                        if (window.showWenli) {
+                                            if (child.material.emissiveIntensity > 0.5) {
                                                 step = -1
                                                 step = -1
                                             }
                                             }
                                             if (child.material.emissiveIntensity < 0) {
                                             if (child.material.emissiveIntensity < 0) {
@@ -259,6 +255,10 @@ Viewer.prototype.animate = function () {
                                             }
                                             }
                                             child.material.emissiveIntensity += 0.01 * step;
                                             child.material.emissiveIntensity += 0.01 * step;
                                         }
                                         }
+                                        else {
+                                            child.material.emissiveMap = emissiveTexture;
+                                            child.material.emissiveIntensity = 0;
+                                        }
                                     }, 50);
                                     }, 50);
                                     child.material.emissive = new THREE.Color(0xffffff);
                                     child.material.emissive = new THREE.Color(0xffffff);
                                     child.material.dispose();
                                     child.material.dispose();

+ 84 - 100
src/views/Home_pc.vue

@@ -36,57 +36,26 @@ import vmenu from "@/components/menu";
 import Loading from "@/components/loading";
 import Loading from "@/components/loading";
 import vintroduce from "@/components/introduce";
 import vintroduce from "@/components/introduce";
 
 
-let step = 1
+const transitionTime = 2000
+
+let labelClick = (e) => {
+  if (e.centerCamePosi) {
+    let { x, y, z } = e.centerCamePosi
+    window.transitions.start(
+      window.lerp.vector(window.viewer.camera.position,
+        new window.THREE.Vector3(x, y, z)),
+      transitionTime,
+      () => { },
+      0/* Delay */,
+      window.easing.easeInOutQuad,
+      'cameraFly');
+  }
+}
+
 
 
 let infoLabels = [{ "title": "宝珠钮", "posInModel": [-4.6302, 20.0953, 2.9731] },
 let infoLabels = [{ "title": "宝珠钮", "posInModel": [-4.6302, 20.0953, 2.9731] },
-{ "title": "瓶盖", "posInModel": [-11.7969, -1.7939, 3.9055] },
-{ "title": "瓶身", "posInModel": [-6.0636, 16.2615, 3.4633] }]
-
-
-// let picLabels = [
-//   {
-//     "title": "宝珠钮",
-//     "entitle": "Diagonal squares pattern",
-//     "labeltype": "canShow",
-//     "posInModel": [
-//       0.2358,
-//       24.1179,
-//       4.7176
-//     ]
-//   },
-//   {
-//     "title": "斜方格纹",
-//     "entitle": "Diagonal squares pattern",
-//     "labeltype": "canShow",
-//     "posi": "right",
-//     "posInModel": [
-//       4.9625,
-//       16.7108,
-//       3.7418
-//     ]
-//   },
-//   {
-//     "title": "卷草纹",
-//     "entitle": "Diagonal squares pattern",
-//     "labeltype": "canShow",
-//     "posi": "right",
-//     "posInModel": [
-//       8.1682,
-//       12.9736,
-//       5.3315
-//     ]
-//   },
-//   {
-//     "title": "缠枝扁菊纹",
-//     "entitle": "Diagonal squares pattern",
-//     "labeltype": "canShow",
-//     "posInModel": [
-//       -9.4563,
-//       11.9996,
-//       5.5396
-//     ]
-//   }
-// ]
+{ "title": "瓶身", "posInModel": [-11.7969, -1.7939, 3.9055] },
+{ "title": "瓶盖", "posInModel": [-6.0636, 16.2615, 3.4633] }]
 
 
 let picLabels = [
 let picLabels = [
   {
   {
@@ -99,7 +68,13 @@ let picLabels = [
       -9.9383,
       -9.9383,
       1.517,
       1.517,
       8.4702
       8.4702
-    ]
+    ],
+    "centerCamePosi": {
+      x: -0.4650665393060424,
+      y: 0.0106499843061736,
+      z: 0.43269467554899155,
+    },
+    clickFun: labelClick
   },
   },
   {
   {
     "title": "牡丹",
     "title": "牡丹",
@@ -112,7 +87,13 @@ let picLabels = [
       -10.5926,
       -10.5926,
       -6.1392,
       -6.1392,
       1.8685
       1.8685
-    ]
+    ],
+    "centerCamePosi": {
+      x: -0.5357516927819861,
+      y: -0.3176574374999963,
+      z: 0.1252552053945424
+    },
+    clickFun: labelClick
   },
   },
   {
   {
     "title": "梅",
     "title": "梅",
@@ -125,7 +106,13 @@ let picLabels = [
       12.4014,
       12.4014,
       5.4827,
       5.4827,
       2.9209
       2.9209
-    ]
+    ],
+    "centerCamePosi": {
+      x: 0.5882886392634421,
+      y: 0.2267149762544653,
+      z: 0.07836955309150107
+    },
+    clickFun: labelClick
   },
   },
   {
   {
     "title": "松",
     "title": "松",
@@ -137,11 +124,18 @@ let picLabels = [
       -5.2427,
       -5.2427,
       1.903,
       1.903,
       -12.1582
       -12.1582
-    ]
+    ],
+    "centerCamePosi": {
+      x: -0.2604583387784285,
+      y: 0.00816509249833358,
+      z: -0.5794133027654209
+    },
+    clickFun: labelClick
   }
   }
 ]
 ]
 
 
 
 
+
 export default {
 export default {
   components: { vmenu, Loading, vintroduce },
   components: { vmenu, Loading, vintroduce },
   data() {
   data() {
@@ -150,7 +144,6 @@ export default {
       camera: null,
       camera: null,
       renderer: null,
       renderer: null,
       controls: null,
       controls: null,
-      textrueLoader: null,
       rafId: null,
       rafId: null,
       container: null,
       container: null,
       containerW: 0,
       containerW: 0,
@@ -191,7 +184,7 @@ export default {
       window.transitions.start(
       window.transitions.start(
         window.lerp.vector(window.viewer.camera.rotation,
         window.lerp.vector(window.viewer.camera.rotation,
           new window.THREE.Vector3(-6.123233995736765e-17, 0, 0)),
           new window.THREE.Vector3(-6.123233995736765e-17, 0, 0)),
-        3000,
+        transitionTime,
         () => { },
         () => { },
         0/* Delay */,
         0/* Delay */,
         window.easing.easeInOutQuad,
         window.easing.easeInOutQuad,
@@ -208,7 +201,7 @@ export default {
       window.transitions.start(
       window.transitions.start(
         window.lerp.vector(window.viewer.model.position,
         window.lerp.vector(window.viewer.model.position,
           new window.THREE.Vector3(0, 0, 0)),
           new window.THREE.Vector3(0, 0, 0)),
-        3000,
+        transitionTime,
         () => { },
         () => { },
         0/* Delay */,
         0/* Delay */,
         window.easing.easeInOutQuad,
         window.easing.easeInOutQuad,
@@ -219,7 +212,7 @@ export default {
       window.transitions.start(
       window.transitions.start(
         window.lerp.vector(window.viewer.model.rotation,
         window.lerp.vector(window.viewer.model.rotation,
           new window.THREE.Vector3(0, 0, 0)),
           new window.THREE.Vector3(0, 0, 0)),
-        3000,
+        transitionTime,
         () => {
         () => {
           window.viewer.loadLabelsFromData(infoLabels)
           window.viewer.loadLabelsFromData(infoLabels)
           window.viewer.control.maxPolarAngle = Math.PI;
           window.viewer.control.maxPolarAngle = Math.PI;
@@ -233,7 +226,7 @@ export default {
       window.transitions.start(
       window.transitions.start(
         window.lerp.vector(window.viewer.camera.position,
         window.lerp.vector(window.viewer.camera.position,
           new window.THREE.Vector3(0, 0, 0.78)),
           new window.THREE.Vector3(0, 0, 0.78)),
-        3000,
+        transitionTime,
         () => { },
         () => { },
         0/* Delay */,
         0/* Delay */,
         window.easing.easeInOutQuad,
         window.easing.easeInOutQuad,
@@ -252,10 +245,8 @@ export default {
       window.transitions.start(
       window.transitions.start(
         window.lerp.vector(window.viewer.camera.position,
         window.lerp.vector(window.viewer.camera.position,
           new window.THREE.Vector3(0, 3.8901816405972494e-17, 0.6353148749999993)),
           new window.THREE.Vector3(0, 3.8901816405972494e-17, 0.6353148749999993)),
-        3000,
-        () => {
-          window.viewer.loadLabelsFromData(picLabels)
-        },
+        transitionTime,
+        () => { },
         0/* Delay */,
         0/* Delay */,
         window.easing.easeInOutQuad,
         window.easing.easeInOutQuad,
         'cameraFly');
         'cameraFly');
@@ -265,7 +256,7 @@ export default {
       window.transitions.start(
       window.transitions.start(
         window.lerp.vector(window.viewer.model.position,
         window.lerp.vector(window.viewer.model.position,
           new window.THREE.Vector3(0, 0, 0)),
           new window.THREE.Vector3(0, 0, 0)),
-        3000,
+        transitionTime,
         () => { },
         () => { },
         0/* Delay */,
         0/* Delay */,
         window.easing.easeInOutQuad,
         window.easing.easeInOutQuad,
@@ -276,10 +267,12 @@ export default {
       window.transitions.start(
       window.transitions.start(
         window.lerp.vector(window.viewer.model.rotation,
         window.lerp.vector(window.viewer.model.rotation,
           new window.THREE.Vector3(0, 0, 0)),
           new window.THREE.Vector3(0, 0, 0)),
-        3000,
+        transitionTime,
         () => {
         () => {
           window.viewer.control.maxPolarAngle = Math.PI / 1.5;
           window.viewer.control.maxPolarAngle = Math.PI / 1.5;
           window.viewer.control.minPolarAngle = Math.PI / 6;
           window.viewer.control.minPolarAngle = Math.PI / 6;
+          window.viewer.loadLabelsFromData(picLabels)
+          window.showWenli = true
         },
         },
         0/* Delay */,
         0/* Delay */,
         window.easing.easeInOutQuad,
         window.easing.easeInOutQuad,
@@ -300,6 +293,14 @@ export default {
     centerLabel(newVal) {
     centerLabel(newVal) {
       if (newVal) {
       if (newVal) {
         newVal.elem[0].style.display == 'block' && newVal.elem.addClass('detailShow')
         newVal.elem[0].style.display == 'block' && newVal.elem.addClass('detailShow')
+        let wlmesh = window.viewer.model.getObjectByName("WL48_ping")
+        wlmesh.material.emissiveMap = this.centerLabel.emissiveTexture;
+        wlmesh.material.dispose();
+      }
+    },
+    currentItem(newVal) {
+      if (newVal != 'pix') {
+        window.showWenli = false
       }
       }
     }
     }
   },
   },
@@ -330,44 +331,24 @@ export default {
       window.viewer.control.minPolarAngle = 0;
       window.viewer.control.minPolarAngle = 0;
     })
     })
 
 
-    let textrueLoader = new window.THREE.TextureLoader();
-
-
- 
-    window.viewer.addEventListener("delayUpdate", (e) => { 
-        setTimeout(() => { 
-          if (this.currentItem == 'pic') {
-            let centerLabel = window.viewer.getCLabel()
-            if (centerLabel) {
-              window.viewer.labels.forEach(item => {
-                if (centerLabel.title == item.title) {
-                  this.centerLabel = centerLabel
-                }
-                else {
-                  item.elem.removeClass('detailShow')
-                }
-              })
-            }
-          } 
-        }); 
-    })
-
-    window.viewer.addEventListener("onPointerUp", () => {
-      if (this.currentItem == 'pic') {
-        if (this.centerLabel) {
-          console.log(this.centerLabel);
-          let emissiveTexture = textrueLoader.load(`model/${this.centerLabel.wenli}.jpg`);
-          let wlmesh = window.viewer.model.getObjectByName("WL48_ping")
-          setTimeout(() => {
-            wlmesh.material.emissiveMap = emissiveTexture;
-            wlmesh.material.dispose();
-          }, 100);
+    window.viewer.addEventListener("delayUpdate", (e) => {
+      setTimeout(() => {
+        if (this.currentItem == 'pic') {
+          let centerLabel = window.viewer.getCLabel()
+          if (centerLabel) {
+            window.viewer.labels.forEach(item => {
+              if (centerLabel.title == item.title) {
+                this.centerLabel = centerLabel
+              }
+              else {
+                item.elem.removeClass('detailShow')
+              }
+            })
+          }
         }
         }
-      }
+      });
     })
     })
 
 
-
-
   },
   },
 
 
   beforeDestroy() {
   beforeDestroy() {
@@ -658,6 +639,8 @@ export default {
     }
     }
 
 
     &.detailShow {
     &.detailShow {
+      z-index: 1088 !important;
+
       &:after {
       &:after {
         content: "";
         content: "";
         background-image: url('~@/assets/images/point_active.svg');
         background-image: url('~@/assets/images/point_active.svg');
@@ -675,9 +658,10 @@ export default {
       .picdetail {
       .picdetail {
         opacity: 1;
         opacity: 1;
         pointer-events: auto;
         pointer-events: auto;
+
         &::before {
         &::before {
           content: '';
           content: '';
-          background-color: #fff!important;
+          background-color: #fff !important;
         }
         }
       }
       }