修改首页·重复问题

mobile/public/three/index.js

@@ -2,7 +2,7 @@
 
 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
@@ -93,7 +93,7 @@ var isMobile = (function() {
         )
     )
 })()
- 
+
 
 
 var Viewer = function (index, dom) {
@@ -105,7 +105,7 @@ var Viewer = function (index, dom) {
     this.control.latMin = this.control.latMax = 0
 
 
-    //this.control.target.set(0,-1,0)  
+    //this.control.target.set(0,-1,0)
     this.setRenderer()
 
     this.scene = new THREE.Scene;
@@ -127,7 +127,7 @@ var Viewer = function (index, dom) {
     this.animate()
 }
 
-/* 
+/*
     同一时间，视线范围不能同时出现两张卡。也就是分布要根据视角范围变化，但是如果浏览器变宽导致的出现两张卡不算。
 
  */
@@ -146,16 +146,16 @@ Viewer.prototype.preLoadCards = function () {
     let add = () => {
         if (document.hidden) return
         let count = this.getCount()
-        let hopeCount = Density * (this.renderer.domElement.clientWidth * this.renderer.domElement.clientHeight) / 100000  
-        
-        if(count < hopeCount){ 
+        let hopeCount = Density * (this.renderer.domElement.clientWidth * this.renderer.domElement.clientHeight) / 100000
+
+        if(count < hopeCount){
             let ratio = count / hopeCount
-             
-            if(Math.random() > ratio){ 
+
+            if(Math.random() > ratio){
                 this.addCard()
             }
         }
-        setTimeout(add,  100/* 40000 * Math.random() * this.getDensity() */)  //当前视野中密度越小 添加越频繁
+        setTimeout(add,  200/* 40000 * Math.random() * this.getDensity() */)  //当前视野中密度越小 添加越频繁
     }
     add()
 
@@ -182,20 +182,24 @@ Viewer.prototype.getCount = function () {
     let count = this.cardGroup.children.filter(card => {
         return frustum.containsPoint(card.position)
     }).length
-    
+
     return count
 }
 
 
 Viewer.prototype.addCard = function (around) {
-   
-    
-    
+
+    let cardOldIndex = 0
+
     let cardIndex = Math.floor(cardNames.length * Math.random())
+    if(cardIndex === cardOldIndex){
+        cardIndex = Math.floor(60 * Math.random())
+    }
+    cardOldIndex = cardIndex
     common.loadTexture(cardNames[cardIndex], (map) => {
 
 
-        /* let card = new THREE.Mesh(planeGeo, new THREE.MeshBasicMaterial({ 
+        /* let card = new THREE.Mesh(planeGeo, new THREE.MeshBasicMaterial({
             map,
             transparent:true, opacity:0,side:2
         }))  */
@@ -227,7 +231,7 @@ Viewer.prototype.addCard = function (around) {
         let direction, far = setting.cards.far
         if (around) {//在四周所有方向都可生成，在一开始时需要
             let n = 0.6//范围0-1 越大越可能接近相机
-            far = far * (1 - n * Math.random()) //靠近一点  
+            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 {//仅在相机前方生成，因为相机往这个方向移动，最前方空缺
 
@@ -268,7 +272,7 @@ Viewer.prototype.removeCards = function () {//移除超过bound的卡
 }
 
 
-Viewer.prototype.update = function (deltaTime) {//绘制的时候同时更新 
+Viewer.prototype.update = function (deltaTime) {//绘制的时候同时更新
 
     this.setSize()
     this.control.update(deltaTime)
@@ -324,7 +328,7 @@ Viewer.prototype.setRenderer = function () {
         this.renderer.shadowMap.enabled = true
         this.renderer.shadowMap.type = THREE.PCFSoftShadowMap
         console.log("ContextCreated")
-        //this.emit(Events.ContextCreated) 
+        //this.emit(Events.ContextCreated)
     } catch (e) {
         console.error("Unable to create a WebGL rendering context")
     }
@@ -339,7 +343,7 @@ Viewer.prototype.hasChanged = function () {//判断画面是否改变了，改
             projectionMatrix: this.camera.projectionMatrix.clone(),//worldMatrix在control时归零了所以不用了吧，用position和qua也一样
             position: this.camera.position.clone(),
             quaternion: this.camera.quaternion.clone(),
-            //mouse: this.mouse.clone(), 
+            //mouse: this.mouse.clone(),
             fov: this.camera.fov
         };
     }.bind(this)
@@ -355,7 +359,7 @@ Viewer.prototype.hasChanged = function () {//判断画面是否改变了，改
         !this.camera.quaternion.equals(this.previousState.quaternion)
 
 
-    var changed = cameraChanged //|| !this.mouse.equals(this.previousState.mouse)  
+    var changed = cameraChanged //|| !this.mouse.equals(this.previousState.mouse)
 
     copy()
 
@@ -399,7 +403,7 @@ Viewer.prototype.animate = function () {
 
 
 Viewer.prototype.onPointerMove = function (event, force) {
-     
+
     if (event.isPrimary === false) return;
 
     mouse.x = (event.clientX / window.innerWidth) * 2 - 1;

mobile/src/api/index.js

@@ -8,7 +8,7 @@ const hhbangBookApi = {
       method: 'get',
       params: {
         pageNo: Math.floor(Math.random() * 10) + 1, // 随机页码
-        pageSize: 30,
+        pageSize: 60,
         ...params
       }
     })

mobile/src/views/Home/index.vue

@@ -81,7 +81,7 @@ const getRecommendList = async () => {
 
   // 处理接口返回的数据
   let list = data.pageData;
-  list = list.filter(i => i.thumbnail).slice(0, 30)
+  list = list.filter(i => i.thumbnail).slice(0, 60)
   const totalCount = data.total;
 
   // 更新总数

mobile/src/views/collectpage/components/collectDetail.vue

@@ -36,7 +36,7 @@
             <div class="model-item">
               <iframe
                 id="ifr"
-                :src="`https://sit-huyaobangjng.4dage.com/modelLoad/model.html?m=${modelList[0]?.src}`"
+                :src="`https://hybgc.4dage.com/front/modelLoad/model.html?m=${modelList[0]?.src}`"
                 frameborder="0"
                 width="100%"
                 height="100%"

pc/.env.development

@@ -9,8 +9,8 @@ VITE_AXIOS_BASE_URL = '/api'  # 用于代理
 # VITE_AXIOS_BASE_URL = 'https://mock.apipark.cn/m1/3776410-0-default'  # apifox云端mock
 # VITE_AXIOS_BASE_URL = 'http://192.168.0.73:8085'
 # 代理配置-target
-# VITE_PROXY_TARGET = 'http://192.168.0.73:8180'
-VITE_PROXY_TARGET = 'https://sit-huyaobangjng.4dage.com'
+VITE_PROXY_TARGET = 'http://192.168.0.73:8180'
+# VITE_PROXY_TARGET = 'https://sit-huyaobangjng.4dage.com'
 
 # 图片基础
 VITE_COS_BASE_URL = 'https://hybgc.4dage.com/ArtCMS/'

pc/public/modelLoad/4dage.js

@@ -6349,4 +6349,4 @@ fdage = {
             "wirevert.glsl": "precision highp float;uniform mat4 uModelViewProjectionMatrix;attribute vec3 vPosition;vec4 h(mat4 i,vec3 p){return i[0]*p.x+(i[1]*p.y+(i[2]*p.z+i[3]));}void main(void){gl_Position=h(uModelViewProjectionMatrix,vPosition);gl_Position.z+=-0.00005*gl_Position.w;}",
             nil: ""
         }
-    }(fdage);
+    }(fdage);

pc/public/three/index.html

@@ -59,6 +59,7 @@
 
       function initViewer(cardNames) {
         window.cardNames = cardNames;
+        console.log(cardNames, 11111)
         var startTime = new Date().getTime();
         window.viewer = new Viewer(0, $("#player")[0])
 

pc/public/three/index.js

@@ -2,7 +2,7 @@
 
 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
@@ -93,7 +93,7 @@ var isMobile = (function() {
         )
     )
 })()
- 
+
 
 
 var Viewer = function (index, dom) {
@@ -105,7 +105,7 @@ var Viewer = function (index, dom) {
     this.control.latMin = this.control.latMax = 0
 
 
-    //this.control.target.set(0,-1,0)  
+    //this.control.target.set(0,-1,0)
     this.setRenderer()
 
     this.scene = new THREE.Scene;
@@ -127,7 +127,7 @@ var Viewer = function (index, dom) {
     this.animate()
 }
 
-/* 
+/*
     同一时间，视线范围不能同时出现两张卡。也就是分布要根据视角范围变化，但是如果浏览器变宽导致的出现两张卡不算。
 
  */
@@ -146,16 +146,16 @@ Viewer.prototype.preLoadCards = function () {
     let add = () => {
         if (document.hidden) return
         let count = this.getCount()
-        let hopeCount = Density * (this.renderer.domElement.clientWidth * this.renderer.domElement.clientHeight) / 100000  
-        
-        if(count < hopeCount){ 
+        let hopeCount = Density * (this.renderer.domElement.clientWidth * this.renderer.domElement.clientHeight) / 100000
+
+        if(count < hopeCount){
             let ratio = count / hopeCount
-             
-            if(Math.random() > ratio){ 
+
+            if(Math.random() > ratio){
                 this.addCard()
             }
         }
-        setTimeout(add,  100/* 40000 * Math.random() * this.getDensity() */)  //当前视野中密度越小 添加越频繁
+        setTimeout(add,  200/* 40000 * Math.random() * this.getDensity() */)  //当前视野中密度越小 添加越频繁
     }
     add()
 
@@ -182,20 +182,23 @@ Viewer.prototype.getCount = function () {
     let count = this.cardGroup.children.filter(card => {
         return frustum.containsPoint(card.position)
     }).length
-    
+
     return count
 }
 
 
 Viewer.prototype.addCard = function (around) {
-   
-    
-    
+
+    let cardOldIndex = 0
     let cardIndex = Math.floor(cardNames.length * Math.random())
+    if(cardIndex === cardOldIndex){
+        cardIndex = Math.floor(60 * Math.random())
+    }
+    cardOldIndex = cardIndex
     common.loadTexture(cardNames[cardIndex], (map) => {
 
 
-        /* let card = new THREE.Mesh(planeGeo, new THREE.MeshBasicMaterial({ 
+        /* let card = new THREE.Mesh(planeGeo, new THREE.MeshBasicMaterial({
             map,
             transparent:true, opacity:0,side:2
         }))  */
@@ -227,7 +230,7 @@ Viewer.prototype.addCard = function (around) {
         let direction, far = setting.cards.far
         if (around) {//在四周所有方向都可生成，在一开始时需要
             let n = 0.6//范围0-1 越大越可能接近相机
-            far = far * (1 - n * Math.random()) //靠近一点  
+            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 {//仅在相机前方生成，因为相机往这个方向移动，最前方空缺
 
@@ -268,7 +271,7 @@ Viewer.prototype.removeCards = function () {//移除超过bound的卡
 }
 
 
-Viewer.prototype.update = function (deltaTime) {//绘制的时候同时更新 
+Viewer.prototype.update = function (deltaTime) {//绘制的时候同时更新
 
     this.setSize()
     this.control.update(deltaTime)
@@ -324,7 +327,7 @@ Viewer.prototype.setRenderer = function () {
         this.renderer.shadowMap.enabled = true
         this.renderer.shadowMap.type = THREE.PCFSoftShadowMap
         console.log("ContextCreated")
-        //this.emit(Events.ContextCreated) 
+        //this.emit(Events.ContextCreated)
     } catch (e) {
         console.error("Unable to create a WebGL rendering context")
     }
@@ -339,7 +342,7 @@ Viewer.prototype.hasChanged = function () {//判断画面是否改变了，改
             projectionMatrix: this.camera.projectionMatrix.clone(),//worldMatrix在control时归零了所以不用了吧，用position和qua也一样
             position: this.camera.position.clone(),
             quaternion: this.camera.quaternion.clone(),
-            //mouse: this.mouse.clone(), 
+            //mouse: this.mouse.clone(),
             fov: this.camera.fov
         };
     }.bind(this)
@@ -355,7 +358,7 @@ Viewer.prototype.hasChanged = function () {//判断画面是否改变了，改
         !this.camera.quaternion.equals(this.previousState.quaternion)
 
 
-    var changed = cameraChanged //|| !this.mouse.equals(this.previousState.mouse)  
+    var changed = cameraChanged //|| !this.mouse.equals(this.previousState.mouse)
 
     copy()
 
@@ -399,7 +402,7 @@ Viewer.prototype.animate = function () {
 
 
 Viewer.prototype.onPointerMove = function (event, force) {
-     
+
     if (event.isPrimary === false) return;
 
     mouse.x = (event.clientX / window.innerWidth) * 2 - 1;

pc/src/api/index.js

@@ -8,7 +8,7 @@ const hhbangBookApi = {
       method: 'get',
       params: {
         pageNo: Math.floor(Math.random() * 10) + 1, // 随机页码
-        pageSize: 30,
+        pageSize: 60,
         ...params
       }
     })

pc/src/views/Home/index.vue

@@ -112,7 +112,7 @@ const getRecommendList = async () => {
 
   // 处理接口返回的数据
   let list = data.pageData;
-  list = list.filter(i => i.thumbnail).slice(0, 30)
+  list = list.filter(i => i.thumbnail).slice(0, 60)
   const totalCount = data.total;
 
   // 更新总数
@@ -124,7 +124,7 @@ const getRecommendList = async () => {
   }));
 
   processedData.maxWidth = 1000;
-  processedData.qualityRatio = 0.8;
+  processedData.qualityRatio = 0.1;
 
   const imgList = processedData.map((i) => i._thumb);
   console.log(imgList, 'imgList')

pc/src/views/collect/components/collectDetails.vue

@@ -28,9 +28,10 @@
           <!-- 模型展示 - 直接展示单个模型 -->
           <div v-show="showModel && currentDisplayArtifact.modelFiles && currentDisplayArtifact.modelFiles.length > 0" class="model-container">
             <div v-if="modelList[0]" class="model-item" @click="handleModelClick(modelList[0])">
-              <iframe :src="`https://sit-huyaobangjng.4dage.com/modelLoad/model.html?m=${modelList[0].src}`"
+              <iframe :src="`https://hybgc.4dage.com/front/modelLoad/model.html?m=${modelList[0].src}`"
                 frameborder="0"
                 width="100%"
+                ref=""
                 height="100%"
                 allowfullscreen></iframe>
                 <!-- <iframe :src="`${modelList[0].src}`"
@@ -79,6 +80,7 @@
         <div class="toggle-buttons">
           <button
             class="toggle-btn"
+            v-show="currentDisplayArtifact.modelFiles && currentDisplayArtifact.modelFiles.length > 0"
             :class="{ active: showModel }"
             @click="toggleDisplayMode(true)"
           >
@@ -259,6 +261,19 @@ const imageUrlList = computed(() => {
   return imgFiles.map(imgFile => `${imguRL}${imgFile}`);
 });
 
+const toggleDisplayMode = (isModel) => {
+  showModel.value = isModel;
+  // if(isModel){
+  //   currentCarouselIndex.value = modelCount.value > 0 ? 1 : 0;
+  //   // 重置图片索引为1
+  //   currentImageIndex.value = imageCount.value > 0 ? 1 : 0;
+  // }else{
+  //   currentImageIndex.value = imageCount.value > 0 ? 1 : 0;
+  //   // 重置模型索引为1
+  //   currentCarouselIndex.value = modelCount.value > 0 ? 1 : 0;
+  // }
+};
+
 // 模型列表数据
 const modelList = computed(() => {
   if (!currentDisplayArtifact.value) return [];
@@ -296,6 +311,8 @@ const getModelList = (arr) => {
   if(arr){
     return arr.filter((item) => {return item.indexOf('.4dage') != -1})
   } else {
+    // 更改默认为图片
+    toggleDisplayMode(false)
     return []
   }
 }
@@ -349,19 +366,6 @@ const handleBack = () => {
   emit('back-to-list');
 };
 
-const toggleDisplayMode = (isModel) => {
-  showModel.value = isModel;
-  // if(isModel){
-  //   currentCarouselIndex.value = modelCount.value > 0 ? 1 : 0;
-  //   // 重置图片索引为1
-  //   currentImageIndex.value = imageCount.value > 0 ? 1 : 0;
-  // }else{
-  //   currentImageIndex.value = imageCount.value > 0 ? 1 : 0;
-  //   // 重置模型索引为1
-  //   currentCarouselIndex.value = modelCount.value > 0 ? 1 : 0;
-  // }
-};
-
 const navigateArtifact = (direction) => {
   const newIndex = direction === 'prev' ? currentIndex.value - 1 : currentIndex.value + 1;
 

pc/src/views/collect/components/modelLook.vue

@@ -15,7 +15,7 @@
       <div class="model-content">
         <iframe
           v-if="modelSrc"
-          :src="`https://sit-huyaobangjng.4dage.com/modelLoad/model.html?m=${modelSrc}`"
+          :src="`https://hybgc.4dage.com/front/modelLoad/model.html?m=${modelSrc}`"
           frameborder="0"
           width="100%"
           height="100%"