From 24d78f8378d07e79c1526306090f92a98aa9dbc6 Mon Sep 17 00:00:00 2001
From: rucky <scl22@qq.com>
Date: Tue, 19 Oct 2021 18:43:25 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0=20ar=20demo?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/css/calendar.css    |   5 -
 src/assets/css/reset.less      |   8 +-
 src/assets/layout/1024.js      |  48 ++++--
 src/components/ar/index.vue    | 293 +++++++++++++++++++++++++++++++++
 src/components/color/index.vue | 209 ++++++++++++++---------
 src/page/index/AR/index.vue    |  40 +++++
 src/page/index/Home/index.vue  |  36 ++--
 src/page/index/main.js         |   2 +-
 src/page/index/router/index.js |  12 +-
 9 files changed, 543 insertions(+), 110 deletions(-)
 delete mode 100644 src/assets/css/calendar.css
 create mode 100644 src/components/ar/index.vue
 create mode 100644 src/page/index/AR/index.vue

diff --git a/src/assets/css/calendar.css b/src/assets/css/calendar.css
deleted file mode 100644
index edd0cab..0000000
--- a/src/assets/css/calendar.css
+++ /dev/null
@@ -1,5 +0,0 @@
-/*!
- * @nutui/nutui v2.2.15 - calendar.css, 50dc4ceb84a2a1ae06bb, Wed Mar 03 2021 15:54:35 GMT+0800 (中国标准时间)
- * (c) 2017-2020 JDC
- * Released under the MIT License.
- */@-webkit-keyframes nutSlideUpIn{0%{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0);visibility:visible}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes nutSlideUpIn{0%{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0);visibility:visible}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@-webkit-keyframes nutSlideUpOut{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{visibility:hidden;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}@keyframes nutSlideUpOut{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{visibility:hidden;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}.nutSlideUp-enter-active,.nutSlideUp-leave-active,.nutSlideUpIn,.nutSlideUpOut{-webkit-animation-duration:.25s;animation-duration:.25s;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-timing-function:cubic-bezier(.445,.05,.55,.95);animation-timing-function:cubic-bezier(.445,.05,.55,.95)}.nutSlideUp-enter-active,.nutSlideUpIn{-webkit-animation-name:nutSlideUpIn;animation-name:nutSlideUpIn}.nutSlideUp-leave-active,.nutSlideUpOut{-webkit-animation-name:nutSlideUpOut;animation-name:nutSlideUpOut}@-webkit-keyframes nutSlideRightIn{0%{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0);visibility:visible}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@-webkit-keyframes nutSlideRightOut{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{visibility:hidden;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}.nutSlideRight-enter-active,.nutSlideRight-leave-active,.nutSlideRightIn,.nutSlideRightOut{-webkit-animation-duration:.25s;animation-duration:.25s;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-timing-function:cubic-bezier(.55,.085,.68,.53);animation-timing-function:cubic-bezier(.55,.085,.68,.53)}.nutSlideRight-enter-active,.nutSlideRightIn{-webkit-animation-name:nutSlideRightIn;animation-name:nutSlideRightIn}.nutSlideRight-leave-active,.nutSlideRightOut{-webkit-animation-name:nutSlideRightOut;animation-name:nutSlideRightOut}.nut-calendar{position:fixed;bottom:0;height:100%;font-size:14px;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;padding-top:72px;overflow:hidden;z-index:1000001}.nut-calendar,.nut-calendar-control{top:0;left:0;width:100%;background-color:#fff}.nut-calendar-control{position:absolute;height:70px;text-align:center;z-index:1}.nut-calendar-control .nut-calendar-cancel-btn,.nut-calendar-control .nut-calendar-confirm-btn{width:60px;color:#287de1;position:absolute;top:0;line-height:40px}.nut-calendar-control .nut-calendar-confirm-btn{right:0}.nut-calendar-control .nut-calendar-cancel-btn{left:0}.nut-calendar-control .nut-calendar-title{margin:0 60px;line-height:40px;overflow:hidden;-o-text-overflow:ellipsis;text-overflow:ellipsis;white-space:nowrap}.nut-calendar-control .nut-calendar-week{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;height:30px;text-align:center;line-height:30px}.nut-calendar-control .nut-calendar-week span{-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1}.nut-calendar-control .nut-calendar-week span:first-child,.nut-calendar-control .nut-calendar-week span:last-child{color:#287de1}.nut-calendar-months{width:100%;-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1}.nut-calendar-months .nut-calendar-months-panel{padding-bottom:10px;position:relative;width:100%;height:auto}.nut-calendar-months .nut-calendar-loading-tip{height:50px;line-height:50px;text-align:center;position:absolute;top:-50px;left:0;right:0;color:#848484;font-size:12px}.nut-calendar-months .nut-calendar-month-title{height:30px;line-height:30px;text-align:center;background-color:#f6f6f6}.nut-calendar-months .nut-calendar-month-con{overflow:hidden}.nut-calendar-months .nut-calendar-month-con .nut-calendar-month-day{float:left;width:14.28%;height:56px;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column}.nut-calendar-months .nut-calendar-month-con .nut-calendar-month-day-active{background-color:#287de1;color:#fff}.nut-calendar-months .nut-calendar-month-con .nut-calendar-month-day-disabled,.nut-calendar-months .nut-calendar-month-con .nut-calendar-month-day-disabled span{color:#dadada}.nut-calendar-months .nut-calendar-month-con .nut-calendar-month-day-choose{background-color:#7e9abbdb;color:#fff}.nut-calendar-months .nut-calendar-month-con .nut-calendar-month-day span{padding:3px 0}.nut-calendar-months .nut-calendar-month-con .nut-calendar-month-day .nut-calendar-day-tip{font-size:12px}
\ No newline at end of file
diff --git a/src/assets/css/reset.less b/src/assets/css/reset.less
index ab5f3ef..f257b68 100644
--- a/src/assets/css/reset.less
+++ b/src/assets/css/reset.less
@@ -3,7 +3,9 @@
    默认设置
  -------------------*/
 *{
-    padding:0; margin:0; box-sizing:border-box; -webkit-box-sizing:border-box;/* -webkit-user-select: none;-moz-user-select: none; */   /*touch-action: none; */
+    padding:0; margin:0; box-sizing:border-box; -webkit-box-sizing:border-box;
+	/* -webkit-user-select: none;-moz-user-select: none; */   
+	// touch-action: none;
     // -webkit-transform: translate3d(0, 0, 0);
     // -moz-transform: translate3d(0, 0, 0);
     // -ms-transform: translate3d(0, 0, 0);
@@ -108,8 +110,8 @@ html,body{
 		.loop((@i+1));//执行某个需要循环的方法
 		@realIndex: @i+1;
 		@aniname : ~'leaf@{realIndex}';
-		@delaytime: @i*0.05+0.1;
-		@duration: @i*0.1*0.5;
+		@delaytime: @i*0.025+0.1;
+		@duration: @i*0.1*0.25;
 		@durationStr: ~'@{duration}s';
 		@delaytimeStr: ~'@{delaytime}s';
 		@rotate: @i*10-10;
diff --git a/src/assets/layout/1024.js b/src/assets/layout/1024.js
index 2e945d0..71035f2 100644
--- a/src/assets/layout/1024.js
+++ b/src/assets/layout/1024.js
@@ -1,17 +1,17 @@
 export default {
     origin: [
-        [1, 0, 0, 0, 1, 1, 1, 0, 0, 0, 0, 0, 1, 1, 1, 1, 0, 0, 0, 0, 0, 1, 1, 1, 0, 0, 1, 1, 1, 0, 0],
-        [0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 1, 1, 1, 0, 0],
-        [1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 1, 0, 0],
-        [1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 1, 0, 0, 1, 1, 1, 1, 1, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 1, 0, 0],
-        [1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 1, 0, 0, 1, 1, 1, 1, 1, 1, 0, 0, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0],
-        [1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 1, 0, 0, 1, 1, 1, 1, 1, 0, 0, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0],
-        [1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 1, 0, 0, 1, 1, 1, 1, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0],
-        [1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 1, 0, 0, 1, 1, 1, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0],
-        [1, 1, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 0, 0],
-        [1, 1, 0, 0, 1, 1, 1, 0, 0, 0, 0, 0, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 0, 0],
-    ],
-    game: [
+        [1, 1, 1, 0, 0, 0, 1, 1, 1, 1, 0, 0, 0, 0, 0, 1, 1, 1, 1, 0, 0, 0, 0, 0, 1, 1, 1, 0, 0, 1, 1, 1, 0, 0, 1, 1,],
+        [1, 1, 0, 0, 0, 0, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 1, 1, 1, 0, 0, 1, 1,],
+        [1, 1, 1, 1, 0, 0, 1, 1, 1, 0, 0, 1, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 1, 0, 0, 1, 1,],
+        [1, 1, 1, 1, 0, 0, 1, 1, 1, 0, 0, 1, 1, 1, 0, 0, 1, 1, 1, 1, 1, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 1, 0, 0, 1, 1,],
+        [1, 1, 1, 1, 0, 0, 1, 1, 1, 0, 0, 1, 1, 1, 0, 0, 1, 1, 1, 1, 1, 1, 0, 0, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 1, 1,],
+        [1, 1, 1, 1, 0, 0, 1, 1, 1, 0, 0, 1, 1, 1, 0, 0, 1, 1, 1, 1, 1, 0, 0, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 1, 1,],
+        [1, 1, 1, 1, 0, 0, 1, 1, 1, 0, 0, 1, 1, 1, 0, 0, 1, 1, 1, 1, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 1, 1,],
+        [1, 1, 1, 1, 0, 0, 1, 1, 1, 0, 0, 1, 1, 1, 0, 0, 1, 1, 1, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 1, 1,],
+        [1, 1, 1, 1, 0, 0, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 0, 0, 1, 1,],
+        [1, 1, 1, 1, 0, 0, 1, 1, 1, 1, 0, 0, 0, 0, 0, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 0, 0, 1, 1,],
+        [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,],
+        [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,],
         [1, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 0, 0, 0, 1, 1, 1, 1, 0, 0, 1, 1, 1, 1, 1, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0,],
         [0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 0, 0, 0, 0, 0, 1, 1, 1, 0, 0, 0, 1, 1, 1, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0,],
         [0, 0, 1, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 1, 0, 0, 1, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 1, 0, 0, 1, 1, 1, 1, 1,],
@@ -23,4 +23,28 @@ export default {
         [0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 1, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 1, 1, 1, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0,],
         [1, 0, 0, 0, 0, 0, 1, 1, 1, 0, 0, 1, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 1, 1, 1, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0,],
     ],
+    ready: [
+        [0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 0, 0, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 1, 1, 1, 0, 0, 1, 1, 1, 1, 0, 0,],
+        [0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 0, 0, 0, 0, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 1, 1, 1, 1, 0, 0,],
+        [0, 0, 1, 1, 1, 0, 0, 1, 0, 0, 1, 1, 1, 1, 1, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1,],
+        [0, 0, 1, 1, 0, 0, 0, 1, 0, 0, 1, 1, 1, 1, 1, 1, 0, 0, 1, 1, 1, 1, 0, 0, 1, 0, 0, 1, 1, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1,],
+        [0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 1, 1, 1, 1, 0, 0, 1, 0, 0, 1, 1, 1, 1, 0, 0, 1, 1, 1, 0, 0, 0, 0, 1, 1,],
+        [0, 0, 0, 0, 0, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 1, 1, 1, 1, 0, 0, 1, 1, 1, 1, 0, 0, 1, 1, 1,],
+        [0, 0, 1, 0, 0, 1, 1, 1, 0, 0, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 1, 1, 1, 1, 0, 0, 1, 1, 1, 1, 0, 0, 1, 1, 1,],
+        [0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 1, 1, 1, 1, 0, 0, 1, 1, 1, 1, 0, 0, 1, 0, 0, 1, 1, 1, 1, 0, 0, 1, 1, 1, 1, 0, 0, 1, 1, 1,],
+        [0, 0, 1, 1, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 1, 1, 1, 1, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 0, 0, 1, 1, 1,],
+        [0, 0, 1, 1, 1, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 1, 1, 1, 1, 0, 0, 1, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 0, 0, 1, 1, 1,],
+        [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,],
+        [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,],
+        [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,],
+        [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,],
+        [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 1, 1, 1, 1, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,],
+        [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 1, 1, 1, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,],
+        [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,],
+        [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,],
+        [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,],
+        [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,],
+        [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,],
+        [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,],
+    ],
 }
\ No newline at end of file
diff --git a/src/components/ar/index.vue b/src/components/ar/index.vue
new file mode 100644
index 0000000..f3db2ba
--- /dev/null
+++ b/src/components/ar/index.vue
@@ -0,0 +1,293 @@
+<template>
+    <div class="c-shader" ref="container"></div>
+</template>
+
+<script>
+import gsap from "gsap";
+import * as THREE from "three";
+import * as Stats from "stats.js";
+
+import colorVertex from "@/assets/shader/color_vertex.glsl";
+import colorFrag from "@/assets/shader/color_fragment.glsl";
+import pos1024 from "@/assets/layout/1024.js";
+import { TubePainter } from "three/examples/jsm/misc/TubePainter.js";
+import { ARButton } from "three/examples//jsm/webxr/ARButton.js";
+
+import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
+import { EffectComposer } from "three/examples/jsm/postprocessing/EffectComposer.js";
+import { RenderPass } from "three/examples/jsm/postprocessing/RenderPass.js";
+import { ShaderPass } from "three/examples/jsm/postprocessing/ShaderPass.js";
+import { UnrealBloomPass } from "three/examples/jsm/postprocessing/UnrealBloomPass.js";
+
+export default {
+    name: "color",
+    props: {
+        msg: String,
+    },
+    data() {
+        return {
+            remaining: 50,
+            container: null,
+            camera: null,
+            scene: null,
+            renderer: null,
+            mouse: new THREE.Vector2(),
+            raycaster: new THREE.Raycaster(),
+            cursor: new THREE.Vector3(),
+        };
+    },
+    created() {},
+    mounted() {
+        this.initStage();
+        // this.addAnimation();
+    },
+    methods: {
+        initStage() {
+            //基础参数
+            this.container = this.$refs.container;
+            this.camera = new THREE.PerspectiveCamera(
+                70,
+                window.innerWidth / window.innerHeight,
+                0.01,
+                20
+            );
+            this.scene = new THREE.Scene();
+
+            // 定义 webglrender
+            this.renderer = new THREE.WebGLRenderer({
+                antialias: true,
+                alpha: true,
+            });
+            this.renderer.setPixelRatio(window.devicePixelRatio);
+            this.renderer.setSize(window.innerWidth, window.innerHeight);
+            this.renderer.xr.enabled = true;
+            if (!document.getElementById("webgl")) {
+                this.renderer.domElement.id = "webgl";
+                this.container.appendChild(this.renderer.domElement);
+            }
+            document.body.appendChild(ARButton.createButton(this.renderer));
+
+            // 定义操控
+
+            // 添加全局环境光
+            const light = new THREE.HemisphereLight(0xffffff, 0xbbbbff, 1);
+            light.position.set(0, 1, 0);
+            this.scene.add(light);
+
+            this.painter = new TubePainter();
+            this.painter.setSize(0.4);
+            this.painter.mesh.material.side = THREE.DoubleSide;
+            this.scene.add(this.painter.mesh);
+
+            function onSelectEnd() {
+                this.userData.isSelecting = false;
+            }
+            function onSelectStart() {
+                this.userData.isSelecting = true;
+                this.userData.skipFrames = 2;
+            }
+
+            this.controller = this.renderer.xr.getController(0);
+            this.controller.addEventListener("selectstart", onSelectStart);
+            this.controller.addEventListener("selectend", onSelectEnd);
+            this.controller.userData.skipFrames = 0;
+            this.scene.add(this.controller);
+
+            // 循环动画
+            this.animate();
+            // 自动缩放
+            window.addEventListener("resize", this.onWindowResize);
+            this.onWindowResize();
+        },
+        handleController(controller) {
+            const userData = controller.userData;
+
+            this.cursor.set(0, 0, -0.2).applyMatrix4(controller.matrixWorld);
+
+            if (userData.isSelecting === true) {
+                if (userData.skipFrames >= 0) {
+                    // TODO(mrdoob) Revisit this
+
+                    userData.skipFrames--;
+
+                    this.painter.moveTo(this.cursor);
+                } else {
+                    this.painter.lineTo(this.cursor);
+                    this.painter.update();
+                }
+            }
+        },
+        onWindowResize(event) {
+            const width = window.innerWidth;
+            const height = window.innerHeight;
+
+            this.camera.aspect = width / height;
+            this.camera.updateProjectionMatrix();
+
+            this.renderer.setSize(width, height);
+        },
+        animate() {
+            this.renderer.setAnimationLoop(this.render);
+            // requestAnimationFrame(this.animate);
+            // this.render();
+        },
+        render() {
+            this.handleController(this.controller);
+
+            this.renderer.render(this.scene, this.camera);
+        },
+        addAnimation() {
+            // 自旋转
+            gsap.to(this.group.rotation, {
+                y: -Math.PI * 2,
+                x: 0.1,
+                duration: 5,
+                // yoyo: true,
+                // repeat: -1,
+                onUpdate: () => {
+                    // this.renderer.toneMappingExposure = Math.pow(
+                    //     this.params.exposure,
+                    //     4.0
+                    // );
+                    // this.render();
+                    // console.log(this.params.scene);
+                },
+            });
+            // 球体自动
+            this.group.children.map((item, index) => {
+                gsap.to(item.scale, {
+                    x: "+=.5",
+                    y: "+=.5",
+                    z: "+=.5",
+                    stagger: 0.01,
+                    duration: 1,
+                    ease: "none",
+                    yoyoEase: "none",
+                    yoyo: true,
+                    repeat: 10,
+                });
+
+                let op = item.position;
+                gsap.fromTo(
+                    item.position,
+                    {
+                        x: () => {
+                            return Math.random() * 100 - 50;
+                        },
+                        y: () => {
+                            return Math.random() * 100 - 50;
+                        },
+                        z: () => {
+                            return Math.random() * 100 - 20;
+                        },
+                    },
+                    {
+                        x: op.x,
+                        y: op.y,
+                        z: op.z,
+                        duration: 5,
+                        onUpdate: () => {
+                            // if (index == 1) this.render();
+                        },
+                    }
+                );
+            });
+
+            setTimeout(() => {
+                let iii = 0;
+                for (let ii = 0; ii < 2; ii++) {
+                    pos1024.ready.forEach((item, index) => {
+                        item.forEach((t, i) => {
+                            if (t == 0) {
+                                let position = {};
+                                position.x = i * 10 - (item.length / 2) * 10;
+                                position.y =
+                                    -index * 10 +
+                                    (pos1024.ready.length / 2) * 10;
+                                position.z = ii * 10;
+                                gsap.to(this.group.children[iii].position, {
+                                    x: position.x,
+                                    y: position.y,
+                                    z: position.z,
+                                    duration: 1,
+                                });
+                                iii++;
+                            }
+                        });
+                    });
+                }
+
+                this.group.children.forEach((item, index) => {
+                    if (index >= iii) {
+                        gsap.to(item.position, {
+                            x: 10000,
+                            y: 10000,
+                            z: 10000,
+                        });
+                        // gsap.to(item.scale, { x: 0, y: 0, z: 0 });
+                    } else {
+                        gsap.to(item.position, {
+                            x: Math.random() * 1000 - 500,
+                            y: Math.random() * 1000 - 500,
+                            z: Math.random() * 1000,
+                            duration: 2,
+                            delay: 4,
+                        });
+                        gsap.to(item.scale, {
+                            x: 0,
+                            y: 0,
+                            z: 0,
+                            duration: 2.5,
+                            delay: 4,
+                        });
+                    }
+                });
+            }, 6000);
+            // for (let ii = 0; ii < 2; ii++) {
+
+            // }
+
+            if (window.deviceInfo.device !== "PC") {
+                gsap.to(this.camera.position, {
+                    z: 1200,
+                    delay: 1,
+                });
+                gsap.to(this.camera.position, {
+                    z: 1400,
+                    delay: 6.5,
+                });
+            }
+
+            // 光闪烁
+            // 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);
+            //     },
+            // });
+        },
+    },
+};
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped lang="less">
+.c-shader {
+    width: 100vw;
+    height: 100vh;
+    position: relative;
+    z-index: 0;
+    .select-btn {
+        // background-color: #fff;
+        .paCenterBottom(2%,50%,auto,10);
+    }
+}
+</style>
diff --git a/src/components/color/index.vue b/src/components/color/index.vue
index 5d61cd9..ea45e93 100644
--- a/src/components/color/index.vue
+++ b/src/components/color/index.vue
@@ -31,7 +31,7 @@ export default {
             renderer: null,
             mouse: new THREE.Vector2(),
             raycaster: new THREE.Raycaster(),
-            gui: new GUI(),
+            // gui: new GUI(),
 
             ENTIRE_SCENE: 0,
             BLOOM_SCENE: 1,
@@ -68,7 +68,10 @@ export default {
             this.renderer.setPixelRatio(window.devicePixelRatio);
             this.renderer.setSize(window.innerWidth, window.innerHeight);
             this.renderer.toneMapping = THREE.ReinhardToneMapping;
-            this.container.appendChild(this.renderer.domElement);
+            if (!document.getElementById("webgl")) {
+                this.renderer.domElement.id = "webgl";
+                this.container.appendChild(this.renderer.domElement);
+            }
 
             // 定义相机
             this.camera = new THREE.PerspectiveCamera(
@@ -77,7 +80,11 @@ export default {
                 1,
                 2000
             );
-            this.camera.position.set(0, 0, 500);
+            this.camera.position.set(
+                0,
+                0,
+                window.deviceInfo.device == "PC" ? 500 : 1000
+            );
             this.camera.lookAt(0, 0, 0);
 
             // 定义操控
@@ -87,7 +94,7 @@ export default {
             );
             this.controls.maxPolarAngle = Math.PI * 0.5;
             this.controls.minDistance = 1;
-            this.controls.maxDistance = 500;
+            this.controls.maxDistance = 1500;
             this.controls.addEventListener("change", this.render);
 
             // 添加全局环境光
@@ -133,61 +140,67 @@ export default {
             // 添加点击事件
             window.addEventListener("pointerdown", this.onPointerDown);
 
-            this.gui
-                .add(this.params, "scene", [
-                    "Scene with Glow",
-                    "Glow only",
-                    "Scene only",
-                ])
-                .onChange((value) => {
-                    switch (value) {
-                        case "Scene with Glow":
-                            this.bloomComposer.renderToScreen = false;
-                            break;
-                        case "Glow only":
-                            this.bloomComposer.renderToScreen = true;
-                            break;
-                        case "Scene only":
-                            // nothing to do
-                            break;
-                    }
+            // this.gui
+            //     .add(this.params, "scene", [
+            //         "Scene with Glow",
+            //         "Glow only",
+            //         "Scene only",
+            //     ])
+            //     .onChange((value) => {
+            //         switch (value) {
+            //             case "Scene with Glow":
+            //                 this.bloomComposer.renderToScreen = false;
+            //                 break;
+            //             case "Glow only":
+            //                 this.bloomComposer.renderToScreen = true;
+            //                 break;
+            //             case "Scene only":
+            //                 // nothing to do
+            //                 break;
+            //         }
 
-                    this.render();
-                });
+            //         this.render();
+            //     });
 
-            this.folder = this.gui.addFolder("Bloom Parameters");
+            // this.folder = this.gui.addFolder("Bloom Parameters");
 
-            this.folder
-                .add(this.params, "exposure", 0.1, 2)
-                .onChange((value) => {
-                    this.renderer.toneMappingExposure = Math.pow(value, 4.0);
-                    this.render();
-                });
+            // this.folder
+            //     .add(this.params, "exposure", 0.1, 2)
+            //     .onChange((value) => {
+            //         this.renderer.toneMappingExposure = Math.pow(value, 4.0);
+            //         this.render();
+            //     });
 
-            this.folder
-                .add(this.params, "bloomThreshold", 0.0, 1.0)
-                .onChange((value) => {
-                    this.bloomPass.threshold = Number(value);
-                    this.render();
-                });
+            // this.folder
+            //     .add(this.params, "bloomThreshold", 0.0, 1.0)
+            //     .onChange((value) => {
+            //         this.bloomPass.threshold = Number(value);
+            //         this.render();
+            //     });
 
-            this.folder
-                .add(this.params, "bloomStrength", 0.0, 10.0)
-                .onChange((value) => {
-                    this.bloomPass.strength = Number(value);
-                    this.render();
-                });
+            // this.folder
+            //     .add(this.params, "bloomStrength", 0.0, 10.0)
+            //     .onChange((value) => {
+            //         this.bloomPass.strength = Number(value);
+            //         this.render();
+            //     });
 
-            this.folder
-                .add(this.params, "bloomRadius", 0.0, 1.0)
-                .step(0.01)
-                .onChange((value) => {
-                    this.bloomPass.radius = Number(value);
-                    this.render();
-                });
+            // this.folder
+            //     .add(this.params, "bloomRadius", 0.0, 1.0)
+            //     .step(0.01)
+            //     .onChange((value) => {
+            //         this.bloomPass.radius = Number(value);
+            //         this.render();
+            //     });
 
             // 设置场景
             this.setupScene();
+            // 循环动画
+            this.animate();
+            // 自动缩放
+
+            window.addEventListener("resize", this.onWindowResize);
+            this.onWindowResize();
         },
         onPointerDown(event) {
             this.mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
@@ -295,8 +308,8 @@ export default {
             }
         },
         animate() {
-            // requestAnimationFrame(this.animate);
-            // this.render();
+            requestAnimationFrame(this.animate);
+            this.render();
         },
         render() {
             switch (this.params.scene) {
@@ -344,6 +357,7 @@ export default {
             // 自旋转
             gsap.to(this.group.rotation, {
                 y: -Math.PI * 2,
+                x: 0.1,
                 duration: 5,
                 // yoyo: true,
                 // repeat: -1,
@@ -358,6 +372,18 @@ export default {
             });
             // 球体自动
             this.group.children.map((item, index) => {
+                gsap.to(item.scale, {
+                    x: "+=.5",
+                    y: "+=.5",
+                    z: "+=.5",
+                    stagger: 0.01,
+                    duration: 1,
+                    ease: "none",
+                    yoyoEase: "none",
+                    yoyo: true,
+                    repeat: 10,
+                });
+
                 let op = item.position;
                 gsap.fromTo(
                     item.position,
@@ -378,39 +404,59 @@ export default {
                         z: op.z,
                         duration: 5,
                         onUpdate: () => {
-                            if (index == 1) this.render();
+                            // if (index == 1) this.render();
                         },
                     }
                 );
             });
 
-            let iii = 0;
             setTimeout(() => {
-                pos1024.game.forEach((item, index) => {
-                    item.forEach((t, i) => {
-                        if (t == 0) {
-                            let position = {};
-                            position.x = i * 10 - (item.length / 2) * 10;
-                            position.y =
-                                -index * 10 + (pos1024.game.length / 2) * 10;
-                            position.z = 0;
-                            gsap.to(this.group.children[iii].position, {
-                                x: position.x,
-                                y: position.y,
-                                z: position.z,
-                                duration: 1,
-                                onUpdate: () => {
-                                    if (i == 0) this.render();
-                                },
-                            });
-                            iii++;
-                        }
+                let iii = 0;
+                for (let ii = 0; ii < 2; ii++) {
+                    pos1024.ready.forEach((item, index) => {
+                        item.forEach((t, i) => {
+                            if (t == 0) {
+                                let position = {};
+                                position.x = i * 10 - (item.length / 2) * 10;
+                                position.y =
+                                    -index * 10 +
+                                    (pos1024.ready.length / 2) * 10;
+                                position.z = ii * 10;
+                                gsap.to(this.group.children[iii].position, {
+                                    x: position.x,
+                                    y: position.y,
+                                    z: position.z,
+                                    duration: 1,
+                                });
+                                iii++;
+                            }
+                        });
                     });
-                });
+                }
 
                 this.group.children.forEach((item, index) => {
-                    if (index > iii) {
-                        gsap.to(item.scale, { x: 0, y: 0, z: 0 });
+                    if (index >= iii) {
+                        gsap.to(item.position, {
+                            x: 10000,
+                            y: 10000,
+                            z: 10000,
+                        });
+                        // gsap.to(item.scale, { x: 0, y: 0, z: 0 });
+                    } else {
+                        gsap.to(item.position, {
+                            x: Math.random() * 1000 - 500,
+                            y: Math.random() * 1000 - 500,
+                            z: Math.random() * 1000,
+                            duration: 2,
+                            delay: 4,
+                        });
+                        gsap.to(item.scale, {
+                            x: 0,
+                            y: 0,
+                            z: 0,
+                            duration: 2.5,
+                            delay: 4,
+                        });
                     }
                 });
             }, 6000);
@@ -418,6 +464,17 @@ export default {
 
             // }
 
+            if (window.deviceInfo.device !== "PC") {
+                gsap.to(this.camera.position, {
+                    z: 1200,
+                    delay: 1,
+                });
+                gsap.to(this.camera.position, {
+                    z: 1400,
+                    delay: 6.5,
+                });
+            }
+
             // 光闪烁
             // gsap.to(this.params, {
             //     exposure: 1.1,
diff --git a/src/page/index/AR/index.vue b/src/page/index/AR/index.vue
new file mode 100644
index 0000000..179e111
--- /dev/null
+++ b/src/page/index/AR/index.vue
@@ -0,0 +1,40 @@
+<!--
+ * @Author: your name
+ * @Date: 2020-08-28 15:20:15
+ * @LastEditTime: 2020-10-10 17:19:06
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /xfhd-vue-scaffold/src/page/index/Home/Index.vue
+-->
+<template>
+    <div class="color">
+        <AR></AR>
+    </div>
+</template>
+<script>
+// @ is an alias to /src
+import AR from "@/components/ar/index.vue";
+
+export default {
+    name: "ar",
+    components: { AR },
+    mounted() {},
+    methods: {
+        showTips() {
+            this.$weui.topTips("正在努力开发中……敬请期待", {
+                duration: 1500,
+                className: "custom-classname",
+                callback: function () {
+                    // console.log('close');
+                },
+            });
+        },
+    },
+};
+</script>
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped lang="less">
+.color {
+    min-height: 100vh;
+}
+</style>
\ No newline at end of file
diff --git a/src/page/index/Home/index.vue b/src/page/index/Home/index.vue
index 1cb1e5c..5e73dfa 100644
--- a/src/page/index/Home/index.vue
+++ b/src/page/index/Home/index.vue
@@ -19,23 +19,27 @@
                 <p class="page__desc">have fun！</p>
             </div>
             <div class="weui-grids" style="margin-top: 100px">
-                <div style="opacity: 0.5" @click="jump(1)" class="weui-grid">
-                    <div class="weui-grid__icon">
-                        <span class="iconfont">&#xe614;</span>
-                    </div>
-                    <p class="weui-grid__label">鉴色</p>
-                </div>
-                <a
-                    href="#"
+                <div
                     style="opacity: 0.5"
-                    @click="showTips"
-                    class="weui-grid"
+                    @click="jump(1)"
+                    class="weui-grid link"
                 >
                     <div class="weui-grid__icon">
                         <span class="iconfont">&#xe614;</span>
                     </div>
-                    <p class="weui-grid__label">预留</p>
-                </a>
+                    <p class="weui-grid__label">Color</p>
+                </div>
+                <div
+                    href="#"
+                    style="opacity: 0.5"
+                    @click="jump(2)"
+                    class="weui-grid link"
+                >
+                    <div class="weui-grid__icon">
+                        <span class="iconfont">&#xe614;</span>
+                    </div>
+                    <p class="weui-grid__label">AR Paint</p>
+                </div>
                 <a
                     href="#"
                     style="opacity: 0.5"
@@ -111,6 +115,11 @@ export default {
                     name: "Color",
                     params: {},
                 });
+            } else if (id == 2) {
+                this.$router.push({
+                    name: "AR",
+                    params: {},
+                });
             }
         },
         showTips() {
@@ -134,6 +143,9 @@ export default {
         .paLayout(0,0,100%,100%,101);
         pointer-events: none;
     }
+    .link {
+        cursor: pointer;
+    }
     .dialog {
         .paLayout(0,0,100%,50%,102);
         color: #fff;
diff --git a/src/page/index/main.js b/src/page/index/main.js
index fba33d5..3d3c4cc 100644
--- a/src/page/index/main.js
+++ b/src/page/index/main.js
@@ -122,7 +122,7 @@ new Vue({
 gsap.to("#loadingContainer", {
   autoAlpha: 0,
   duration: 0.65,
-  delay: 3.2,
+  delay: 2,
   onComplete: () => {
     document.getElementById('loadingContainer').remove();
   }
diff --git a/src/page/index/router/index.js b/src/page/index/router/index.js
index 4f9ffb8..7ec8652 100644
--- a/src/page/index/router/index.js
+++ b/src/page/index/router/index.js
@@ -10,6 +10,7 @@ import Vue from 'vue'
 import VueRouter from 'vue-router'
 import Home from '../Home/index.vue'
 import Color from '../Color/index.vue'
+import AR from '../AR/index.vue'
 
 Vue.use(VueRouter)
 
@@ -37,7 +38,16 @@ const routes = [
 		name: "Color",
 		component: Color,
 		meta: {
-			title: "鉴色", // 标题
+			title: "Color", // 标题
+			keepAlive: false, // 是否保持活跃
+		},
+	},
+	{
+		path: "/ar",
+		name: "AR",
+		component: AR,
+		meta: {
+			title: "AR Paint", // 标题
 			keepAlive: false, // 是否保持活跃
 		},
 	},