gengxin

public/package/js/label.js

@@ -14,12 +14,12 @@ class Label2D extends THREE.EventDispatcher {
         
         ${o.labeltype ? `<div class="picdetail">
         <div class="header">
-          <span>岁寒三友</span>
+          <span>${o.title}</span>
           <img src="images/video.png" alt="">
         </div>
         <div class="pinfo">
-          <img src="images/temp.jpg" alt="">
-          <p>南宋赵孟坚经历丧国的痛楚,把松竹梅在一起创作出《岁寒三友图》,借用“岁寒三友”来比喻自己为身处乱世不变其节的忠贞之士。</p>
+          <img src="images/image_${o.imgsrc}.jpg" alt="">
+          <p>${o.infodesc}</p>
         </div>
       </div>`: ''}
         </div>`);
@@ -35,9 +35,9 @@ class Label2D extends THREE.EventDispatcher {
             let update = (e) => {
                 this.update(e)
             }
-            viewer.addEventListener("view.changed", update)  
-            this.addEventListener('dispose', (e) => { 
-                viewer.removeEventListener("view.changed", update) 
+            viewer.addEventListener("view.changed", update)
+            this.addEventListener('dispose', (e) => {
+                viewer.removeEventListener("view.changed", update)
             })
         }
         this.visible = true
@@ -49,7 +49,7 @@ class Label2D extends THREE.EventDispatcher {
 
 
 
-    update(e={}) {
+    update(e = {}) {
         if (!this.position || !this.visible) return
 
         var p = convertTool.getPos2d(this.position, viewer.camera, $("#player")[0]);
@@ -59,31 +59,22 @@ class Label2D extends THREE.EventDispatcher {
 
         //判断label是否被模型遮挡，遮挡则消失(如果是漫游模式最好提前计算visiblePanos)
 
-        if (e.changeSlightly){//防卡： 画面要停止转动时才执行
+        if (e.changeSlightly) {//防卡： 画面要停止转动时才执行
             if (this.shelterByModel && convertTool.ifShelter(this.position, p.vector, viewer.camera, viewer.model.children, 0.05)) {
                 this.elem.css('display', 'none'); return;
             }
-        }else{
+        } else {
             //console.log('！changeSlightly')
         }
-         
+
 
         this.elem.css({
             left: p.pos.x + 'px',
             top: p.pos.y + 'px'
         })
 
-        /* if(settings.vrEnabled){
-            this.elem.css({transform:'rotate('+window.screenFaceOrient+'deg)'})
-        }else{
-            this.elem.css({transform:''})
-        } */
-
         this.elem.css('display', 'block');
         this.pos2d = p.vector;
-
-
-
     }
 
     setVisible(visi, reason, level = 0, type) {
@@ -100,13 +91,14 @@ class Label2D extends THREE.EventDispatcher {
         this.title = title || ''
         this.elem.html(`<a><p><span>${this.title}</span></p></a>`)
     }
+
     setPos(pos) {
         this.position = pos;
         this.update()
     }
 
     dispose() {
-        this.elem.remove(); 
+        this.elem.remove();
         this.dispatchEvent({ type: 'dispose' })
         this._listeners = {}
         console.log('dispose')

public/package/js/objViewer.js

@@ -22,12 +22,12 @@ var Viewer = function (index, dom) {
     this.camera = new THREE.PerspectiveCamera();
     this.camera.position.set(0, 0, 0.78);
     this.control = new THREE.OrbitControls(this.camera, this.dom)
-    this.control.enableDamping = true;
+    this.control.enableDamping = false;
     this.control.dampingFactor = 0.4;
     this.control.minDistance = 0.3;
     this.control.maxDistance = 2;
 
-    this.control.enablePan = true;
+    this.control.enablePan = false;
     this.control.enableZoom = true;
 
     this.setRenderer()
@@ -116,9 +116,9 @@ Viewer.prototype.hasChanged = function () {//判断画面是否改变了，改
 
     //var changed = cameraChanged //|| !this.mouse.equals(this.previousState.mouse)  
     let changeSlightly
-    if(cameraChanged){
-        changeSlightly = math.closeTo(this.camera.position,this.previousState.position, 1e-2) &&
-            math.closeTo(this.camera.quaternion,this.previousState.quaternion, 1e-3) 
+    if (cameraChanged) {
+        changeSlightly = math.closeTo(this.camera.position, this.previousState.position, 1e-2) &&
+            math.closeTo(this.camera.quaternion, this.previousState.quaternion, 1e-3)
     }
     copy()
 
@@ -167,7 +167,7 @@ Viewer.prototype.animate = function () {
 
     let changed = this.hasChanged()
     if (changed.cameraChanged) {
-        this.dispatchEvent({ type: 'view.changed', changeSlightly:changed.changeSlightly })
+        this.dispatchEvent({ type: 'view.changed', changeSlightly: changed.changeSlightly })
 
         let label_ = this.labels.filter(e => e.elem[0].style.display == 'block')
         label_.sort((a, b) => b.pos2d.z - a.pos2d.z)
@@ -229,29 +229,29 @@ Viewer.prototype.animate = function () {
                         object.traverse(function (child) {
                             if (child.isMesh) {
                                 console.log(child);
-                                // if (child.name == "WL48_ping") {
-                                //     let textrueLoader = new THREE.TextureLoader();
-                                //     var emissiveTexture = textrueLoader.load("model/shadow.jpg");
-                                //     // emissiveTexture.encoding = THREE.LinearEncoding;
-                                //     child.material.emissiveMap = emissiveTexture;
-                                //     child.material.emissiveIntensity = 0;
-                                //     // let step = 1
-                                //     // setInterval(() => {
-
-                                //     //     if (child.material.emissiveIntensity > 0.3) {
-                                //     //         step = -1
-
-                                //     //     }
-
-                                //     //     if (child.material.emissiveIntensity < 0) {
-                                //     //         step = 1
-                                //     //     }
-
-                                //     //     child.material.emissiveIntensity += 0.01 * step;
-
-                                //     // }, 50);
-                                //     child.material.emissive = new THREE.Color(0xffffff);
-                                // }
+                                if (child.name == "WL48_ping") {
+                                    let textrueLoader = new THREE.TextureLoader();
+                                    var emissiveTexture = textrueLoader.load("model/shadow.jpg");
+                                    // emissiveTexture.encoding = THREE.LinearEncoding;
+                                    child.material.emissiveMap = emissiveTexture;
+                                    child.material.emissiveIntensity = 0;
+                                    let step = 1
+                                    setInterval(() => {
+
+                                        if (window.activetab == 'pic') {
+                                            if (child.material.emissiveIntensity > 0.3) {
+                                                step = -1
+                                            }
+                                            if (child.material.emissiveIntensity < 0) {
+                                                step = 1
+                                            }
+                                            child.material.emissiveIntensity += 0.01 * step;
+                                        }
+                                        
+                                    }, 50);
+                                    child.material.emissive = new THREE.Color(0xffffff);
+                                    child.material.dispose();
+                                }
                                 /* if(child.geometry){
                                     child.geometry.computeBoundingBox();
                                     bound.union(child.geometry.boundingBox) 
@@ -301,14 +301,10 @@ Viewer.prototype.animate = function () {
 
 
 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;
@@ -320,25 +316,25 @@ Viewer.prototype.onPointerDown = function (event) {
 Viewer.prototype.onPointerUp = function (event) {
 
     if (event.isPrimary === false) return;
+    this.dispatchEvent({ type: 'onPointerUp' })
     mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
     mouse.y = - (event.clientY / window.innerHeight) * 2 + 1;
     if (mouse.distanceTo(this.pointerDownPos) < 0.006) {//click
         this.checkIntersection()
-
         // if (this.intersects.length) {
         //     console.log(this.intersects[0].point);
         //     this.addLabel({ position: this.intersects[0].point })
         // }
 
-        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/* Delay */, easing.easeInOutQuad, null, Transitions.doubleClick);
-            }
-        }
-        this.clickTime = time;
+        // 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/* Delay */, easing.easeInOutQuad, null, Transitions.doubleClick);
+        //     }
+        // }
+        // this.clickTime = time;
     }
     this.pointerDownPos = null
 }
@@ -372,7 +368,7 @@ Viewer.prototype.checkIntersection = function () {
 
 
 Viewer.prototype.removeAllLabels = function (data) {
-    this.labels.forEach(label=>{
+    this.labels.forEach(label => {
         label.dispose()
         label = null
     })
@@ -380,7 +376,7 @@ Viewer.prototype.removeAllLabels = function (data) {
 }
 
 Viewer.prototype.loadLabelsFromData = function (data) {
- 
+
     data.forEach(info => {
         info.position = new THREE.Vector3().fromArray(info.posInModel).applyMatrix4(this.model.matrixWorld)
         this.addLabel(info)

src/components/menu.vue

@@ -15,7 +15,7 @@ export default {
   props: ["canMove", "canControls"],
   data() {
     return {
-      currentid: "",
+      currentid: "info",
       list: [
         {
           id: "history",

src/views/Home_pc.vue

@@ -36,57 +36,112 @@ import vmenu from "@/components/menu";
 import Loading from "@/components/loading";
 import vintroduce from "@/components/introduce";
 
+let step = 1
 
 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
+//     ]
+//   }
+// ]
+
 let picLabels = [
   {
-    "title": "宝珠钮",
+    "title": "竹子",
     "entitle": "Diagonal squares pattern",
+    "infodesc": "清代郑燮咏竹：咬定青山不放松，立根原在破岩中;千磨万击还坚劲，任尔东西南北风。",
+    "imgsrc": "zhu",
     "labeltype": "canShow",
     "posInModel": [
-      0.2358,
-      24.1179,
-      4.7176
+      -9.9383,
+      1.517,
+      8.4702
     ]
   },
   {
-    "title": "斜方格纹",
+    "title": "牡丹",
     "entitle": "Diagonal squares pattern",
+    "infodesc": "唐朝·刘禹锡《赏牡丹》：庭前芍药妖无格，池上芙蕖净少情。唯有牡丹真国色，花开时节动京城。",
+    "imgsrc": "mudan",
     "labeltype": "canShow",
     "posi": "right",
     "posInModel": [
-      4.9625,
-      16.7108,
-      3.7418
+      -10.5926,
+      -6.1392,
+      1.8685
     ]
   },
   {
-    "title": "卷草纹",
+    "title": "梅",
     "entitle": "Diagonal squares pattern",
     "labeltype": "canShow",
+    "infodesc": "元代王冕咏梅：不要人夸好颜色，只留清气满乾坤。",
+    "imgsrc": "mei",
     "posi": "right",
     "posInModel": [
-      8.1682,
-      12.9736,
-      5.3315
+      12.4014,
+      5.4827,
+      2.9209
     ]
   },
   {
-    "title": "缠枝扁菊纹",
+    "title": "松",
     "entitle": "Diagonal squares pattern",
     "labeltype": "canShow",
+    "infodesc": "唐代白居易咏松：岁暮满山雪，松色郁青苍。彼如君子心，秉操贯冰霜。",
+    "imgsrc": "song",
     "posInModel": [
-      -9.4563,
-      11.9996,
-      5.5396
+      -5.2427,
+      1.903,
+      -12.1582
     ]
   }
 ]
 
+
 export default {
   components: { vmenu, Loading, vintroduce },
   data() {
@@ -108,13 +163,16 @@ export default {
       labelRenderer: null,
       label: null,
       meshGroup: null,
-      currentItem: ''
+      currentItem: 'info',
+      centerLabel: null,
+      fgtimer: null
     };
   },
   methods: {
 
     handleItem(data) {
       this.currentItem = data.id
+      window.activetab = data.id
       switch (data.id) {
         case "info":
           this.info()
@@ -181,7 +239,7 @@ export default {
         window.easing.easeInOutQuad,
         null);
 
-        
+
     },
 
     pic() {
@@ -193,7 +251,7 @@ export default {
       //相机位置
       window.transitions.start(
         window.lerp.vector(window.viewer.camera.position,
-          new window.THREE.Vector3(0, 2.1020988923367118e-17, 0.34329880154837705)),
+          new window.THREE.Vector3(0, 3.8901816405972494e-17, 0.6353148749999993)),
         3000,
         () => {
           window.viewer.loadLabelsFromData(picLabels)
@@ -206,7 +264,7 @@ export default {
 
       window.transitions.start(
         window.lerp.vector(window.viewer.model.position,
-          new window.THREE.Vector3(0, -0.17, 0)),
+          new window.THREE.Vector3(0, 0, 0)),
         3000,
         () => { },
         0/* Delay */,
@@ -238,6 +296,13 @@ export default {
 
 
   },
+  watch: {
+    centerLabel(newVal) {
+      if (newVal) {
+        newVal.elem[0].style.display == 'block' && newVal.elem.addClass('detailShow')
+      }
+    }
+  },
   mounted() {
     this.timer = setInterval(() => {
       if (!this.hadLoaded) {
@@ -260,32 +325,51 @@ export default {
 
     window.viewer.addEventListener("hadLoaded", () => {
       this.modelLoaded = true
-
+      window.viewer.loadLabelsFromData(infoLabels)
+      window.viewer.control.maxPolarAngle = Math.PI;
+      window.viewer.control.minPolarAngle = 0;
     })
 
+    let textrueLoader = new window.THREE.TextureLoader();
+
+
+    window.viewer.addEventListener("view.changed", (e) => {
+      if (e.changeSlightly) {
+        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("view.changed", () => {
+    window.viewer.addEventListener("onPointerUp", () => {
       if (this.currentItem == 'pic') {
-
-        let centerLabel = window.viewer.getCLabel()
-
-        if (centerLabel) {
-          window.viewer.labels.forEach(item => {
-            item.elem.removeClass('detailShow')
-          })
-          centerLabel.elem[0].style.display == 'block' && centerLabel.elem.addClass('detailShow')
+        if (this.centerLabel) {
+          let emissiveTexture = textrueLoader.load("model/shadow.jpg");
+          let wlmesh = window.viewer.model.getObjectByName("WL48_ping")
+          setTimeout(() => {
+            wlmesh.material.emissiveMap = emissiveTexture;
+            wlmesh.material.dispose();
+          }, 100);
         }
       }
-
     })
 
 
-  },
-  watch: {
-    hadLoaded(newVal) {
 
-    },
   },
+
   beforeDestroy() {
 
   },
@@ -574,6 +658,16 @@ export default {
     }
 
     &.detailShow {
+      &:after {
+        content: "";
+        background-image: url('~@/assets/images/point_active.svg');
+      }
+
+      &::before {
+        content: "";
+        background-color: #fff;
+      }
+
       a {
         opacity: 0;
       }
@@ -581,6 +675,10 @@ export default {
       .picdetail {
         opacity: 1;
         pointer-events: auto;
+        &::before {
+          content: '';
+          background-color: #fff!important;
+        }
       }
 
       &.right {
@@ -621,7 +719,8 @@ export default {
   background-size: 100% 100%;
   color: #fff;
   padding: 30px 36px;
-  transition: .1s .1s opacity ease;
+  min-height: 378px;
+  transition: .1s opacity ease;
 
   &::before {
     content: '';
@@ -631,8 +730,7 @@ export default {
     background-color: #A99979;
     position: absolute;
     right: -98px;
-    top: 50%;
-    transform: translateY(-50%);
+    top: 189px;
   }
 
   .header {