From c1d66f0e07c9cc91dad2f8019b244ba61d330f55 Mon Sep 17 00:00:00 2001
From: rucky <scl22@qq.com>
Date: Thu, 14 Oct 2021 18:15:41 +0800
Subject: [PATCH] =?UTF-8?q?=E4=B8=80=E4=BA=9B=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/color/index.vue | 56 ++++++++++++++++++----------------
 src/page/index/Home/index.vue  |  4 +--
 src/page/index/router/index.js |  6 ++--
 3 files changed, 35 insertions(+), 31 deletions(-)

diff --git a/src/components/color/index.vue b/src/components/color/index.vue
index e7e6cda..5ce4006 100644
--- a/src/components/color/index.vue
+++ b/src/components/color/index.vue
@@ -75,7 +75,7 @@ export default {
                 1,
                 200
             );
-            this.camera.position.set(0, 0, 20);
+            this.camera.position.set(0, 0, 30);
             this.camera.lookAt(0, 0, 0);
 
             // 定义操控
@@ -85,7 +85,7 @@ export default {
             );
             this.controls.maxPolarAngle = Math.PI * 0.5;
             this.controls.minDistance = 1;
-            this.controls.maxDistance = 100;
+            this.controls.maxDistance = 200;
             this.controls.addEventListener("change", this.render);
 
             // 添加全局环境光
@@ -198,10 +198,14 @@ export default {
             );
             if (this.intersects.length > 0) {
                 const object = this.intersects[0].object;
-                // gsap.to(object.material, {
-                //     opacity: 0,
-                //     onUpdate: () => {},
-                // });
+                gsap.to(object.scale, {
+                    x: 0,
+                    y: 0,
+                    z: 0,
+                    onUpdate: () => {
+                        this.render();
+                    },
+                });
                 object.layers.toggle(this.BLOOM_SCENE);
                 this.render();
             }
@@ -232,17 +236,17 @@ export default {
 
                 const material = new THREE.MeshBasicMaterial({ color: color });
                 const sphere = new THREE.Mesh(geometry, material);
-                sphere.position.x = Math.random() * 100 - 50;
-                sphere.position.y = Math.random() * 100 - 50;
-                sphere.position.z = Math.random() * 100 - 50;
+                sphere.position.x = Math.random() * 30 - 15;
+                sphere.position.y = Math.random() * 30 - 15;
+                sphere.position.z = Math.random() * 30 - 15;
                 sphere.position
                     .normalize()
-                    .multiplyScalar(Math.random() * 4.0 + 2.0);
+                    .multiplyScalar(Math.random() * 5.0 + 2.5);
                 sphere.scale.setScalar(Math.random() * Math.random() + 0.5);
                 this.scene.add(sphere);
 
-                if (Math.random() < 0.25)
-                    sphere.layers.enable(this.BLOOM_SCENE);
+                // if (Math.random() < 0.25)
+                sphere.layers.enable(this.BLOOM_SCENE);
 
                 this.group.add(sphere);
             }
@@ -317,20 +321,20 @@ export default {
                 },
             });
             // 光闪烁
-            gsap.to(this.params, {
-                exposure: 1.2,
-                duration: 2,
-                yoyo: true,
-                repeat: -1,
-                onUpdate: () => {
-                    this.renderer.toneMappingExposure = Math.pow(
-                        this.params.exposure,
-                        4.0
-                    );
-                    this.render();
-                    // console.log(this.params.scene);
-                },
-            });
+            // gsap.to(this.params, {
+            //     exposure: 1.1,
+            //     duration: 2,
+            //     yoyo: true,
+            //     repeat: -1,
+            //     onUpdate: () => {
+            //         this.renderer.toneMappingExposure = Math.pow(
+            //             this.params.exposure,
+            //             4.0
+            //         );
+            //         this.render();
+            //         // console.log(this.params.scene);
+            //     },
+            // });
         },
     },
 };
diff --git a/src/page/index/Home/index.vue b/src/page/index/Home/index.vue
index fdecedb..cc56504 100644
--- a/src/page/index/Home/index.vue
+++ b/src/page/index/Home/index.vue
@@ -113,8 +113,8 @@ export default {
             // 第一个游戏
             if (id == 1) {
                 this.$router.push({
-                    path: "/color",
-                    query: {},
+                    name: "Color",
+                    params: {},
                 });
             }
         },
diff --git a/src/page/index/router/index.js b/src/page/index/router/index.js
index 8f7353c..4f9ffb8 100644
--- a/src/page/index/router/index.js
+++ b/src/page/index/router/index.js
@@ -20,7 +20,7 @@ const routes = [
 		component: Home,
 		meta: {
 			title: "大板栗的玩具屋", // 标题
-			keepAlive: true, // 是否保持活跃
+			keepAlive: false, // 是否保持活跃
 		},
 	},
 	{
@@ -29,7 +29,7 @@ const routes = [
 		component: Home,
 		meta: {
 			title: "大板栗的玩具屋", // 标题
-			keepAlive: true, // 是否保持活跃
+			keepAlive: false, // 是否保持活跃
 		},
 	},
 	{
@@ -38,7 +38,7 @@ const routes = [
 		component: Color,
 		meta: {
 			title: "鉴色", // 标题
-			keepAlive: true, // 是否保持活跃
+			keepAlive: false, // 是否保持活跃
 		},
 	},
 	// {