fix: 超过一定个数卡片不再增加。可调节密度

public/three/PanoramaControls.js

@@ -4,7 +4,7 @@ function PanoramaControls(camera, domElement) {
   
     // fyz 相机放大缩小
     this.activationThreshold = 1.1;
-    this.scrollZoomSpeed = 0.08;
+    this.scrollZoomSpeed = 0.001;
     this.scrollZoomSta = true;
     this.zoomMin = 0.7;
     this.zoomMax = 1.5;
@@ -273,7 +273,7 @@ PanoramaControls.prototype.onMouseWheel = function(event) {
     if(delta != void 0){//滚轮缩放 
         if(delta == 0)return //mac
         let direction = new THREE.Vector3(0,0,-1).applyQuaternion(this.camera.quaternion)
-        let moveSpeed = 0.1
+        let moveSpeed = 0.03
         if(delta < 0) moveSpeed *=-1
         this.translationWorldDelta.add(direction.multiplyScalar(moveSpeed))
     }

public/three/index.html

@@ -56,7 +56,7 @@
         far: 15,
         beginFadeNear: 7,
         near: 1,
-        fadeInDur: 2000,
+        fadeInDur: 3000,
         highest: Math.tan(THREE.Math.degToRad(vfov / 2)), //当card在1米处时最高可以多少才能在视线内
 
       }

public/three/index.js

@@ -1,4 +1,4 @@
-
+//参考 https://artsandculture.google.com/experiment/TAEPZtXK2s139g
 
 let camera, scene, renderer;
 
@@ -9,6 +9,9 @@ const raycaster = new THREE.Raycaster(); raycaster.linePrecision = 0;//不检测
 const mouse = new THREE.Vector2();
 
 let needUpdateShadow, needsUpdateScene
+const Density = 2.5
+
+
 
 var BlurShader = {
 
@@ -130,6 +133,9 @@ var Viewer = function (index, dom) {
 
  */
 
+
+
+
 Viewer.prototype.preLoadCards = function () {
 
     let i = 10
@@ -140,8 +146,17 @@ Viewer.prototype.preLoadCards = function () {
 
     let add = () => {
         if (document.hidden) return
-        this.addCard()
-        setTimeout(add, 40000 * Math.random() * this.getDensity())  //当前视野中密度越小 添加越频繁
+        let count = this.getCount()
+        let hopeCount = Density * (this.renderer.domElement.clientWidth * this.renderer.domElement.clientHeight) / 100000  
+        
+        if(count < hopeCount){ 
+            let ratio = count / hopeCount
+             
+            if(Math.random() > ratio){ 
+                this.addCard()
+            }
+        }
+        setTimeout(add,  100/* 40000 * Math.random() * this.getDensity() */)  //当前视野中密度越小 添加越频繁
     }
     add()
 
@@ -154,7 +169,8 @@ Viewer.prototype.preLoadCards = function () {
 
 }
 
-Viewer.prototype.getDensity = function () {
+
+Viewer.prototype.getCount = function () {
 
 
     let frustumMatrix = new THREE.Matrix4
@@ -167,16 +183,15 @@ Viewer.prototype.getDensity = function () {
     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
-
-    return density
+    
+    return count
 }
 
 
 Viewer.prototype.addCard = function (around) {
-
+   
+    
+    
     let cardIndex = Math.floor(cardNames.length * Math.random())
     common.loadTexture("assets/" + cardNames[cardIndex], (map) => {
 
@@ -242,7 +257,7 @@ Viewer.prototype.addCard = function (around) {
 
 Viewer.prototype.removeCards = function () {//移除超过bound的卡
     let needRemove = this.cardGroup.children.filter(card => {
-        if (card.disToCam > setting.cards.far) {
+        if (card.disToCam > setting.cards.far * 1.5) {
             card.material.dispose()
             transitions.cancel(card.transition)
             //console.log('remove一张卡')