upp

public/three/click.js

@@ -10,14 +10,25 @@ window.stareMove = (val) => {
   viewer.setAutoMove(val)
 }
 
+let flag = false
+
 // 鼠标移入
 viewer.addEventListener('hoverObject', e => {
   // console.log('鼠标移入',e);
+  flag = true
   window.top.hoverObject(e);
 })
 
 // 鼠标移出
 viewer.addEventListener('mouseoutObject', e => {
   // console.log('鼠标移出',e);
+  flag = false
   window.top.mouseoutObject(e);
-}) 
+})
+
+
+document.querySelector('#player').onmousemove = (event) => {
+  if (!flag) return
+  let e = event || window.event;
+  window.top.mouseLoc(e.clientX, e.clientY);
+}

public/three/index.html

@@ -49,7 +49,6 @@
 
     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']
 
-
     let vfov = 60 //垂直视角范围度数
     window.setting = {
       vfov,

public/three/index.js

@@ -8,10 +8,6 @@ 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 = {
@@ -174,7 +170,6 @@ Viewer.prototype.addCard = function (around) {
     let cardIndex = Math.floor(cardNames.length * Math.random())
     common.loadTexture("assets/" + cardNames[cardIndex], (map) => {
 
-        console.log('------',map);
 
         /* let card = new THREE.Mesh(planeGeo, new THREE.MeshBasicMaterial({ 
             map,

src/views/Home/index.vue

@@ -2,6 +2,10 @@
   <div class="Home">
     <div class="btn" @click="btnFu">开始动画</div>
     <iframe id="iframe" src="/three/index.html" frameborder="0"></iframe>
+    <div class="txt" :style="{ opacity: txt.show ? '0.8' : '0' }">
+      <h2>{{ txt.title }}</h2>
+      <p>{{ txt.con }}</p>
+    </div>
   </div>
 </template>
 
@@ -11,6 +15,18 @@ export default {
   data() {
     return {
       iframeDom: null,
+      txt: {
+        title: "",
+        con: "",
+        show: false,
+      },
+      // 屏幕的宽高
+      fullNum: {
+        width: 0,
+        height: 0,
+      },
+      // 文字展示dom
+      txtDom: null,
     };
   },
   computed: {},
@@ -21,20 +37,55 @@ export default {
       this.iframeDom.contentWindow.stareMove(true);
     },
   },
-  created() {},
+
+  created() {
+    // 设置屏幕的宽高
+    this.fullNum = {
+      width: window.innerWidth,
+      height: window.innerHeight,
+    };
+  },
   mounted() {
+    // 文字dom
+    this.txtDom = document.querySelector(".txt");
+
     this.iframeDom = document.querySelector("#iframe");
     // 点击图片
     window.clickObject = (val) => {
-      console.log('000', val);
+      console.log("000", val);
     };
     // 鼠标移入
     window.hoverObject = (val) => {
-      // console.log(111, val);
+      let con =
+        "我是一个文物介绍，我是一个文物介绍，我是一个文物我是一个一个文物介绍，我是一个文物介绍我是一个文物介绍，我是一个文物介绍，我是一个文物我是一个一个文物介绍，我是一个文物介绍";
+      if (val.imgName.includes("1")) {
+        con = "xxxxxxxxxx阿三大苏打xxxxxxxxxx阿三大苏打";
+      }
+      this.txt = {
+        title: "文物" + val.imgName,
+        con,
+        show: true,
+      };
     };
     // 鼠标移出
     window.mouseoutObject = (val) => {
-      // console.log(222, val);
+      this.txt.show = false;
+    };
+
+    // 获取鼠标坐标
+    window.mouseLoc = (x, y) => {
+      // console.log("ppp", x, y);
+      // 最大X值
+      const maxX = this.fullNum.width - 100;
+      let xRes = x >= maxX ? maxX : x;
+      xRes = xRes - 100 <= 0 ? 0 : xRes - 100;
+      // 最大y值
+      const domHeight = this.txtDom.clientHeight;
+      const maxY = this.fullNum.height - domHeight / 2;
+      let yRes = y >= maxY ? maxY : y;
+      yRes = yRes - domHeight / 2 <= 0 ? 0 : yRes - domHeight / 2;
+      this.txtDom.style.top = yRes + "px";
+      this.txtDom.style.left = xRes + "px";
     };
   },
   beforeCreate() {}, //生命周期 - 创建之前
@@ -51,8 +102,12 @@ export default {
   width: 100%;
   height: 100%;
   iframe {
+    position: absolute;
+    top: 0;
+    left: 0;
     width: 100%;
     height: 100%;
+    z-index: 1;
   }
   .btn {
     position: absolute;
@@ -63,6 +118,37 @@ export default {
     display: flex;
     justify-content: center;
     align-items: center;
+    z-index: 2;
+  }
+  .txt {
+    position: absolute;
+    z-index: 3;
+    top: 0;
+    left: 0;
+    width: 200px;
+    // height: 185px;
+    text-align: center;
+    pointer-events: none;
+    font-size: 18px;
+    text-shadow: 1px 1px 2px red;
+    opacity: 0;
+    // transition: all 0.5s;
+
+    // display: -webkit-box;
+    // overflow: hidden;
+    // white-space: normal !important;
+    // text-overflow: ellipsis;
+    // word-wrap: break-word;
+    // -webkit-line-clamp: 5;
+    // -webkit-box-orient: vertical;
+    h2 {
+      font-size: 24px;
+      font-weight: 700;
+      margin-bottom: 15px;
+    }
+    p {
+      line-height: 24px;
+    }
   }
 }
 </style>