添加curve demo ，更新首页皮肤
This commit is contained in:
rucky
parent
f48e036827
commit
48c64b858b
@ -132,12 +132,12 @@
|
|||||||
// }
|
// }
|
||||||
@font-face {
|
@font-face {
|
||||||
font-family: 'iconfont'; /* Project id 3110299 */
|
font-family: 'iconfont'; /* Project id 3110299 */
|
||||||
src: url('//at.alicdn.com/t/font_3110299_9s4gs0eqeya.eot?t=1640942389955'); /* IE9 */
|
src: url('//at.alicdn.com/t/font_3110299_p182w4um9w.eot?t=1644309691314'); /* IE9 */
|
||||||
src: url('//at.alicdn.com/t/font_3110299_9s4gs0eqeya.eot?t=1640942389955#iefix') format('embedded-opentype'), /* IE6-IE8 */
|
src: url('//at.alicdn.com/t/font_3110299_p182w4um9w.eot?t=1644309691314#iefix') format('embedded-opentype'), /* IE6-IE8 */
|
||||||
url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2'),
|
url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2'),
|
||||||
url('//at.alicdn.com/t/font_3110299_9s4gs0eqeya.woff?t=1640942389955') format('woff'),
|
url('//at.alicdn.com/t/font_3110299_p182w4um9w.woff?t=1644309691314') format('woff'),
|
||||||
url('//at.alicdn.com/t/font_3110299_9s4gs0eqeya.ttf?t=1640942389955') format('truetype'),
|
url('//at.alicdn.com/t/font_3110299_p182w4um9w.ttf?t=1644309691314') format('truetype'),
|
||||||
url('//at.alicdn.com/t/font_3110299_9s4gs0eqeya.svg?t=1640942389955#iconfont') format('svg');
|
url('//at.alicdn.com/t/font_3110299_p182w4um9w.svg?t=1644309691314#iconfont') format('svg');
|
||||||
}
|
}
|
||||||
.iconfont {
|
.iconfont {
|
||||||
font-family: "iconfont" !important;
|
font-family: "iconfont" !important;
|
||||||
|
|||||||
@ -25,21 +25,16 @@ ul, ol { list-style:none;}
|
|||||||
img, fieldset { border:0; max-width: 100%;}
|
img, fieldset { border:0; max-width: 100%;}
|
||||||
|
|
||||||
html{
|
html{
|
||||||
background-color: #0c0718;
|
background-color: #e3e7e8;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin: auto;
|
margin: auto;
|
||||||
overflow-x: hidden;
|
overflow-x: hidden;
|
||||||
body{
|
body{
|
||||||
// max-width: 750px;
|
// max-width: 750px;
|
||||||
overflow-x: hidden;
|
overflow-x: hidden;
|
||||||
background: #0c0718;
|
background: #e3e7e8;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.active-dot{
|
|
||||||
background: #3c3c3c;
|
|
||||||
opacity: .5;
|
|
||||||
}
|
|
||||||
|
|
||||||
html,body{
|
html,body{
|
||||||
// height: auto!important;
|
// height: auto!important;
|
||||||
}
|
}
|
||||||
@ -57,7 +52,8 @@ html,body{
|
|||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
background-color: #0c0718;
|
// background-color: #0c0718;
|
||||||
|
background-color: #e3e7e8;
|
||||||
// background: -webkit-linear-gradient(top, #b7dbfa 0%, #82c3f8 15%, #63acf3 85%, #b7dbfa 100%) ;
|
// background: -webkit-linear-gradient(top, #b7dbfa 0%, #82c3f8 15%, #63acf3 85%, #b7dbfa 100%) ;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
@ -65,7 +61,7 @@ html,body{
|
|||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
|
||||||
.leaf{
|
.leaf{
|
||||||
fill: #9A4DFF;
|
fill: #c49ce2;
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes hide {
|
@keyframes hide {
|
||||||
@ -104,6 +100,15 @@ html,body{
|
|||||||
.keyframes(def,@name,@content);
|
.keyframes(def,@name,@content);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.makeRandom(@min: 0, @max: @min+1, @int: 0) {
|
||||||
|
.checkInt() {
|
||||||
|
@getNum: `Math.random() * (@{max} - @{min} + @{int})`;
|
||||||
|
@base: unit(`@{int} == 1 ? Math.floor(@{getNum}) : @{getNum}`);
|
||||||
|
}
|
||||||
|
.checkInt();
|
||||||
|
@randNum: @base + @min;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
@i:0;
|
@i:0;
|
||||||
.loop(@i)when(@i<36){//递归调用 达到循环的目的
|
.loop(@i)when(@i<36){//递归调用 达到循环的目的
|
||||||
@ -133,6 +138,7 @@ html,body{
|
|||||||
});
|
});
|
||||||
|
|
||||||
#leaf@{realIndex} {
|
#leaf@{realIndex} {
|
||||||
|
fill: hsla(360 * (@i+110)/150, 0.8 , 1 * (@i+30)/80, 0.85);
|
||||||
animation: @aniname @durationStr ease @delaytimeStr both;
|
animation: @aniname @durationStr ease @delaytimeStr both;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -168,12 +174,13 @@ html,body{
|
|||||||
animation: rotateCon 5s linear infinite;
|
animation: rotateCon 5s linear infinite;
|
||||||
}
|
}
|
||||||
p{
|
p{
|
||||||
color: #fff;
|
color: rgba(0,0,0,0.8);
|
||||||
text-align: center;
|
text-align: center;
|
||||||
animation: hide .5s ease 3s both;
|
animation: hide .5s ease 3s both;
|
||||||
}
|
}
|
||||||
#svg{
|
#svg{
|
||||||
animation: hide .5s ease 3s both;
|
animation: hide .5s ease 3s both;
|
||||||
|
filter: blur(5px);
|
||||||
// background-color: #edd;
|
// background-color: #edd;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
1
src/assets/font/fzcy.json
Normal file
1
src/assets/font/fzcy.json
Normal file
@ -0,0 +1 @@
|
|||||||
|
{"glyphs":{"互":{"ha":1389,"x_min":65,"x_max":1329,"o":"m 98 911 l 98 1074 l 1291 1074 l 1291 911 l 510 911 l 494 792 l 1183 792 l 1139 65 l 1329 65 l 1329 -87 l 65 -87 l 65 65 l 906 65 l 911 201 l 195 201 l 271 911 l 98 911 m 939 635 l 477 635 l 445 358 l 922 358 l 939 635 z "},"你":{"ha":1389,"x_min":65,"x_max":1324,"o":"m 179 -125 l 179 613 q 103 586 157 602 q 65 570 81 575 l 65 705 q 282 1112 222 819 l 505 1112 q 401 808 467 922 l 401 -125 l 179 -125 m 1004 776 l 1004 76 q 803 -119 1009 -125 l 640 -119 l 640 22 l 722 22 q 776 87 776 16 l 776 776 l 1004 776 m 445 792 q 591 1101 570 906 l 814 1101 q 808 1063 814 1090 q 798 1025 803 1042 l 1313 1025 l 1313 716 l 1101 716 l 1101 873 l 738 873 q 445 656 656 722 l 445 792 m 456 22 l 456 201 q 543 646 543 336 l 738 646 q 456 22 749 190 m 1324 27 q 1053 646 1036 190 l 1237 646 q 1324 201 1237 342 l 1324 27 z "},"信":{"ha":1389,"x_min":60,"x_max":1324,"o":"m 60 618 l 60 765 q 239 1107 195 857 l 461 1107 q 450 1069 461 1096 q 439 1025 445 1042 l 749 1025 l 749 1112 l 1009 1112 l 1009 1025 l 1324 1025 l 1324 873 l 434 873 l 434 993 q 396 895 423 955 q 380 863 385 873 l 380 -130 l 163 -130 l 163 656 q 60 618 119 635 m 467 -98 l 467 358 l 1270 358 l 1270 109 q 1074 -98 1275 -103 l 467 -98 m 477 662 l 477 803 l 1264 803 l 1264 662 l 477 662 m 477 439 l 477 586 l 1264 586 l 1264 439 l 477 439 m 684 206 l 684 43 l 993 43 q 1058 114 1058 43 l 1058 206 l 684 206 z "},"动":{"ha":1389,"x_min":60,"x_max":1308,"o":"m 60 570 l 60 722 l 673 722 l 673 570 l 439 570 q 266 184 385 336 q 472 195 380 184 q 429 374 461 250 q 412 439 418 418 l 581 439 q 673 109 635 288 q 770 803 770 293 l 684 803 l 684 955 l 770 955 l 770 1123 l 987 1123 l 987 1004 l 987 955 l 1302 955 l 1302 92 q 1107 -109 1308 -114 l 949 -109 l 949 33 l 1031 33 q 1085 92 1085 33 l 1085 803 l 982 803 q 906 217 977 401 q 646 -141 846 33 l 646 0 l 505 0 q 499 43 499 16 q 71 16 326 16 l 71 184 q 212 570 179 380 l 60 570 m 125 895 l 125 1047 l 635 1047 l 635 895 l 125 895 z "},"好":{"ha":1389,"x_min":54,"x_max":1335,"o":"m 54 798 l 54 949 l 119 949 l 119 1112 l 309 1112 l 309 949 l 407 949 l 407 1112 l 597 1112 l 597 949 l 651 949 l 651 798 l 597 798 l 597 548 q 477 130 597 293 q 640 22 543 71 l 640 -130 q 353 11 467 -60 q 71 -125 239 -60 l 71 22 q 233 130 168 71 q 119 548 119 282 l 119 798 l 54 798 m 635 429 l 635 586 l 879 586 l 879 722 q 1042 911 966 787 l 673 911 l 673 1069 l 1313 1069 l 1313 911 q 1118 684 1242 776 l 1118 586 l 1335 586 l 1335 429 l 1118 429 l 1118 92 q 890 -119 1134 -130 l 732 -119 l 732 22 l 798 22 q 879 98 884 16 l 879 429 l 635 429 m 358 282 q 407 543 407 391 l 407 798 l 309 798 l 309 543 q 358 282 309 374 z "},"蜂":{"ha":1389,"x_min":65,"x_max":1324,"o":"m 98 288 l 98 955 l 244 955 l 244 1123 l 407 1123 l 407 955 l 553 955 l 553 456 q 407 288 559 288 l 407 130 q 434 136 418 136 q 467 141 456 141 q 450 255 461 201 l 553 255 q 602 -81 586 130 l 483 -81 q 477 0 483 -38 q 65 -54 293 -43 l 65 103 q 244 114 163 103 l 244 288 l 98 288 m 602 391 l 602 521 l 836 521 l 836 575 l 1053 575 l 1053 521 l 1286 521 l 1286 391 l 1053 391 l 1053 336 l 1264 336 l 1264 206 l 1053 206 l 1053 152 l 1324 152 l 1324 16 l 1053 16 l 1053 -136 l 836 -136 l 836 16 l 597 16 l 597 152 l 836 152 l 836 206 l 618 206 l 618 336 l 836 336 l 836 391 l 602 391 m 1308 553 q 939 629 1085 575 q 575 553 792 581 l 575 673 q 770 722 689 700 q 656 841 689 787 q 575 830 618 830 l 575 933 q 760 1112 711 971 l 966 1112 q 955 1090 966 1107 q 944 1063 949 1074 l 1286 1063 l 1286 928 q 1101 722 1204 798 q 1308 678 1188 694 l 1308 553 m 1053 928 l 846 928 q 770 879 814 895 l 846 879 q 933 803 884 836 q 1053 928 1004 852 m 212 814 l 212 434 l 244 434 l 244 814 l 212 814 m 439 814 l 407 814 l 407 434 q 439 483 439 439 l 439 814 z "},"！":{"ha":1389,"x_min":146,"x_max":412,"o":"m 412 1069 l 385 250 l 174 250 l 146 1069 l 412 1069 m 412 -103 l 152 -103 l 152 146 l 412 146 l 412 -103 z "},"，":{"ha":1389,"x_min":87,"x_max":385,"o":"m 87 -190 l 87 -87 q 239 109 233 -27 l 109 109 l 109 374 l 374 374 l 374 146 q 87 -190 385 -114 z "}},"familyName":"FZZhengHeiS-EB-GB","ascender":1242,"descender":-467,"underlinePosition":-401,"underlineThickness":65,"boundingBox":{"yMin":-467,"xMin":-136,"yMax":1242,"xMax":1546},"resolution":1000,"original_font_information":{"format":0,"copyright":"Copyright(c) Beijing Founder Electronics Co.,Ltd.2010","fontFamily":"FZZhengHeiS-EB-GB","fontSubfamily":"Regular","uniqueID":"Founder:FZZhengHeiS-EB-GB\tRegular","fullName":"FZZhengHeiS-EB-GB","version":"1.00","postScriptName":"FZZDHJW--GB1-0","trademark":"By Beijing Founder Electronics Co.,Ltd. 北京北大方正电子有限公司"},"cssFontWeight":"normal","cssFontStyle":"normal"}
|
||||||
1281
src/assets/font/helvetiker_regular.typeface.json
Normal file
1281
src/assets/font/helvetiker_regular.typeface.json
Normal file
File diff suppressed because it is too large
Load Diff
@ -8,79 +8,43 @@
|
|||||||
-->
|
-->
|
||||||
<template>
|
<template>
|
||||||
<div class="home">
|
<div class="home">
|
||||||
<Shader></Shader>
|
<Shader class="shader"></Shader>
|
||||||
<div class="overlay"></div>
|
<div class="overlay"></div>
|
||||||
<div class="page grid js_show dialog">
|
<div
|
||||||
<div class="page__hd">
|
class="page grid js_show dialog"
|
||||||
|
@mousedown="touchstart"
|
||||||
|
@mouseout="touchend"
|
||||||
|
>
|
||||||
|
<div class="page__hd" ref="header">
|
||||||
<h1 class="page__title" style="font-size: 20px">
|
<h1 class="page__title" style="font-size: 20px">
|
||||||
大板栗的玩具屋
|
Benlee's Toy
|
||||||
</h1>
|
</h1>
|
||||||
<p class="page__desc" style="font-size: 18px">玩具列表</p>
|
<p class="page__desc" style="font-size: 18px">Toy list</p>
|
||||||
<p class="page__desc">have fun！</p>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="weui-grids" style="margin-top: 100px">
|
<div class="weui-grids" ref="list">
|
||||||
<div
|
<div
|
||||||
style="opacity: 0.5"
|
@click="jump(item, $event)"
|
||||||
@click="jump(1)"
|
|
||||||
class="weui-grid link"
|
class="weui-grid link"
|
||||||
|
:class="item.active ? 'active' : ''"
|
||||||
|
v-for="(item, index) in menuList"
|
||||||
|
:key="index"
|
||||||
>
|
>
|
||||||
<div class="weui-grid__icon">
|
<div class="weui-grid__icon">
|
||||||
<span class="iconfont"></span>
|
<span
|
||||||
|
class="iconfont"
|
||||||
|
v-html="item.fontIconCode"
|
||||||
|
></span>
|
||||||
</div>
|
</div>
|
||||||
<p class="weui-grid__label">Color</p>
|
<p class="weui-grid__label">{{ item.name }}</p>
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
style="opacity: 0.5"
|
|
||||||
@click="jump(2)"
|
|
||||||
class="weui-grid link"
|
|
||||||
>
|
|
||||||
<div class="weui-grid__icon">
|
|
||||||
<span class="iconfont"></span>
|
|
||||||
</div>
|
|
||||||
<p class="weui-grid__label">AR Paint</p>
|
|
||||||
</div>
|
|
||||||
<div style="opacity: 0.5" @click="jump(3)" class="weui-grid">
|
|
||||||
<div class="weui-grid__icon">
|
|
||||||
<span class="iconfont"></span>
|
|
||||||
</div>
|
|
||||||
<p class="weui-grid__label">AR HIT</p>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
style="opacity: 0.5"
|
|
||||||
@click="jump(4)"
|
|
||||||
class="weui-grid link"
|
|
||||||
>
|
|
||||||
<div class="weui-grid__icon">
|
|
||||||
<span class="iconfont"></span>
|
|
||||||
</div>
|
|
||||||
<p class="weui-grid__label">摄像机</p>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="weui-grid link"
|
|
||||||
style="opacity: 0.5"
|
|
||||||
@click="jump(5)"
|
|
||||||
>
|
|
||||||
<div class="weui-grid__icon">
|
|
||||||
<span class="iconfont"></span>
|
|
||||||
</div>
|
|
||||||
<p class="weui-grid__label">手势检测</p>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="weui-grid link"
|
|
||||||
style="opacity: 0.5"
|
|
||||||
@click="jump(6)"
|
|
||||||
>
|
|
||||||
<div class="weui-grid__icon">
|
|
||||||
<span class="iconfont"></span>
|
|
||||||
</div>
|
|
||||||
<p class="weui-grid__label">视频</p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="shadow" ref="shadow" :class="shown ? 'shown' : ''"></div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
// @ is an alias to /src
|
// @ is an alias to /src
|
||||||
|
import { gsap } from "gsap";
|
||||||
import Shader from "@/components/shader/index.vue";
|
import Shader from "@/components/shader/index.vue";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
@ -88,6 +52,55 @@ export default {
|
|||||||
components: {
|
components: {
|
||||||
Shader,
|
Shader,
|
||||||
},
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
shown: false,
|
||||||
|
menuList: [
|
||||||
|
{
|
||||||
|
fontIconCode: "",
|
||||||
|
target: "Color",
|
||||||
|
name: "三维空间色彩粒子",
|
||||||
|
active: false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
fontIconCode: "",
|
||||||
|
target: "AR",
|
||||||
|
name: "AR绘制",
|
||||||
|
active: false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
fontIconCode: "",
|
||||||
|
target: "ARHit",
|
||||||
|
name: "AR真实空间检测",
|
||||||
|
active: false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
fontIconCode: "",
|
||||||
|
target: "Camera",
|
||||||
|
name: "实时合成图片",
|
||||||
|
active: false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
fontIconCode: "",
|
||||||
|
target: "HandTrack",
|
||||||
|
name: "手势识别",
|
||||||
|
active: false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
fontIconCode: "",
|
||||||
|
target: "Video",
|
||||||
|
name: "视频播放ts",
|
||||||
|
active: false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
fontIconCode: "",
|
||||||
|
target: "Curve",
|
||||||
|
name: "三维文字曲线运动",
|
||||||
|
active: false,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
// this.$weui.toast('即将跳转至项目列表页', {
|
// this.$weui.toast('即将跳转至项目列表页', {
|
||||||
// duration: 3500,
|
// duration: 3500,
|
||||||
@ -96,42 +109,70 @@ export default {
|
|||||||
// setTimeout(() => {
|
// setTimeout(() => {
|
||||||
// location.href = './project-list.html'
|
// location.href = './project-list.html'
|
||||||
// }, 3500);
|
// }, 3500);
|
||||||
|
this.initShow();
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
$route: {
|
||||||
|
handler(to, from) {
|
||||||
|
console.log(to.path, from.path);
|
||||||
|
},
|
||||||
|
deep: true,
|
||||||
|
},
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
// 跳转
|
initShow() {
|
||||||
jump(id) {
|
gsap.timeline({
|
||||||
// 第一个游戏
|
delay: 2,
|
||||||
if (id == 1) {
|
})
|
||||||
this.$router.push({
|
.fromTo(
|
||||||
name: "Color",
|
this.$refs.shadow,
|
||||||
params: {},
|
{ scale: 0, top: "45%", rotation: 0 },
|
||||||
});
|
{ scale: 10, top: "8%", rotation: 0 }
|
||||||
} else if (id == 2) {
|
)
|
||||||
this.$router.push({
|
.fromTo(
|
||||||
name: "AR",
|
this.$refs.shadow,
|
||||||
params: {},
|
{ scale: 10 },
|
||||||
});
|
{
|
||||||
} else if (id == 3) {
|
scale: 1,
|
||||||
this.$router.push({
|
onComplete: () => {
|
||||||
name: "ARHit",
|
this.shown = true;
|
||||||
params: {},
|
},
|
||||||
});
|
}
|
||||||
} else if (id == 4) {
|
)
|
||||||
this.$router.push({
|
.fromTo(
|
||||||
name: "Camera",
|
this.$refs.header,
|
||||||
params: {},
|
{ autoAlpha: 0, y: -20 },
|
||||||
});
|
{ autoAlpha: 1, y: 0 },
|
||||||
} else if (id == 5) {
|
"-=.3"
|
||||||
this.$router.push({
|
)
|
||||||
name: "HandTrack",
|
.fromTo(
|
||||||
});
|
this.$refs.list,
|
||||||
} else if (id == 6) {
|
{ autoAlpha: 0, y: -20 },
|
||||||
this.$router.push({
|
{ autoAlpha: 1, y: 0 },
|
||||||
name: "Video",
|
"-=.2"
|
||||||
});
|
);
|
||||||
}
|
},
|
||||||
|
// 跳转
|
||||||
|
jump(item, event) {
|
||||||
|
// 第一个游戏
|
||||||
|
item.active = true;
|
||||||
|
this.$Utils.btnTouched(
|
||||||
|
event.currentTarget,
|
||||||
|
() => {
|
||||||
|
// this.$router.push({
|
||||||
|
// name: item.target,
|
||||||
|
// params: {},
|
||||||
|
// });
|
||||||
|
},
|
||||||
|
1.5
|
||||||
|
);
|
||||||
|
},
|
||||||
|
touchstart() {
|
||||||
|
gsap.to(this.$refs.shadow, { scale: 3 });
|
||||||
|
},
|
||||||
|
touchend() {
|
||||||
|
gsap.to(this.$refs.shadow, { scale: 1 });
|
||||||
},
|
},
|
||||||
showTips() {},
|
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
@ -139,7 +180,15 @@ export default {
|
|||||||
<style scoped lang="less">
|
<style scoped lang="less">
|
||||||
.home {
|
.home {
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
|
background: #e3e7e8;
|
||||||
|
color: #333;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
.shader {
|
||||||
|
visibility: hidden;
|
||||||
|
}
|
||||||
.overlay {
|
.overlay {
|
||||||
|
visibility: hidden;
|
||||||
background-color: rgba(0, 0, 0, 0.5);
|
background-color: rgba(0, 0, 0, 0.5);
|
||||||
.paLayout(0,0,100%,100%,101);
|
.paLayout(0,0,100%,100%,101);
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
@ -147,26 +196,99 @@ export default {
|
|||||||
.link {
|
.link {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
.shadow {
|
||||||
|
.paLayout(50%,80px,250px,250px,1);
|
||||||
|
margin-left: -125px;
|
||||||
|
border-radius: 100%;
|
||||||
|
box-shadow: 20px 20px 60px #03a9f4, -20px -20px 60px #f441a5,
|
||||||
|
20px -20px 60px #ffeb3b, -20px 20px 60px #03a9f4,
|
||||||
|
-50px -50px 100px #d3c1f8 inset, 50px 50px 100px #f441a5 inset,
|
||||||
|
-50px 50px 100px #ffeb3b inset, 50px -50px 100px #c2c6fd inset;
|
||||||
|
filter: blur(20px);
|
||||||
|
|
||||||
|
&.shown {
|
||||||
|
animation: rotation 5s linear infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
// box-shadow: 0px -20px 40px #b9d7fb, -13px -15px 40px #b8f1ee,
|
||||||
|
// 20px -4px 40px #c8f8ce, 18px 10px 40px #f0dbc0,
|
||||||
|
// 9px 18px 40px #f0c7cf, -6px 18px 40px #f5c5cb,
|
||||||
|
// -11px 18px 40px #f0c1ef, -22px -7px 40px #d3c1f8,
|
||||||
|
// -13px -17px 40px #c2c6fd, 0px 20px 40px #b9d7fb inset,
|
||||||
|
// 13px 15px 40px #b8f1ee inset, -20px 4px 40px #c8f8ce inset,
|
||||||
|
// -18px -10px 40px #f0dbc0 inset, -9px -18px 40px #f0c7cf inset,
|
||||||
|
// 6px -18px 40px #f5c5cb inset, 11px -18px 40px #f0c1ef inset,
|
||||||
|
// 22px 7px 40px #d3c1f8 inset, 13px 17px 40px #c2c6fd inset;
|
||||||
|
}
|
||||||
|
.page__hd {
|
||||||
|
padding: 30px 0 180px 0px !important;
|
||||||
|
h1,
|
||||||
|
p {
|
||||||
|
position: relative;
|
||||||
|
z-index: 10;
|
||||||
|
text-align: center;
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
.dialog {
|
.dialog {
|
||||||
.paLayout(0,0,100%,50%,102);
|
.paLayout(0,150px,100%,auto,102);
|
||||||
color: #fff;
|
// color: #fff;
|
||||||
.weui-grids {
|
.weui-grids {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
justify-content: center;
|
justify-content: start;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
font-size: 30px;
|
font-size: 30px;
|
||||||
|
align-content: center;
|
||||||
|
align-items: center;
|
||||||
.weui-grid {
|
.weui-grid {
|
||||||
display: inline-block;
|
opacity: 0.75;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-content: center;
|
||||||
|
align-items: center;
|
||||||
width: 33.33%;
|
width: 33.33%;
|
||||||
height: 150px;
|
height: auto;
|
||||||
margin-top: 10px;
|
margin-top: 30px;
|
||||||
|
.weui-grid__icon {
|
||||||
|
.prLayout(125px,125px);
|
||||||
|
border-radius: 100%;
|
||||||
|
// background: #e3e7e8;
|
||||||
|
background-image: linear-gradient(
|
||||||
|
145deg,
|
||||||
|
#f6f6f6 0%,
|
||||||
|
#cfcfcf 49.99%,
|
||||||
|
#cfcfcf 50%,
|
||||||
|
#f6f6f6 100%
|
||||||
|
);
|
||||||
|
background-position: 0 0;
|
||||||
|
background-size: 100% 200%;
|
||||||
|
box-shadow: 20px 20px 60px #c4c4c4, -20px -20px 60px #ffffff;
|
||||||
|
transition: all 0.25s ease-in-out;
|
||||||
|
-webkit-transition: all 0.25s ease-in-out;
|
||||||
|
&:hover {
|
||||||
|
background-position: 0 -100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
.iconfont {
|
.iconfont {
|
||||||
font-size: 40px;
|
font-size: 40px;
|
||||||
}
|
}
|
||||||
.weui-grid__label {
|
.weui-grid__label {
|
||||||
line-height: 80px;
|
height: 100px;
|
||||||
|
line-height: 40px;
|
||||||
|
padding: 0 25px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
overflow: hidden;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
&.active .weui-grid__icon {
|
||||||
|
background-position: 0 -100%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -177,7 +299,7 @@ export default {
|
|||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
.weui-grid__label {
|
.weui-grid__label {
|
||||||
color: #fff;
|
// color: #fff;
|
||||||
}
|
}
|
||||||
.weui-grid__icon {
|
.weui-grid__icon {
|
||||||
display: flex;
|
display: flex;
|
||||||
@ -188,9 +310,20 @@ export default {
|
|||||||
font-size: 30px;
|
font-size: 30px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.page__hd {
|
|
||||||
padding: 40px;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@keyframes rotation {
|
||||||
|
0% {
|
||||||
|
opacity: 1;
|
||||||
|
transform: rotate(0deg);
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
opacity: 0.5;
|
||||||
|
transform: rotate(180deg);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
opacity: 1;
|
||||||
|
transform: rotate(360deg);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
255
src/page/index/modifier_curve/index.vue
Normal file
255
src/page/index/modifier_curve/index.vue
Normal file
@ -0,0 +1,255 @@
|
|||||||
|
<!--
|
||||||
|
* @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="curve">
|
||||||
|
<canvas id="stage" ref="stage"></canvas>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
// @ is an alias to /src
|
||||||
|
import * as THREE from "three";
|
||||||
|
import { TransformControls } from "three/examples/jsm/controls/TransformControls.js";
|
||||||
|
import Stats from "three/examples/jsm/libs/stats.module.js";
|
||||||
|
import { Flow } from "three/examples/jsm/modifiers/CurveModifier.js";
|
||||||
|
import { FontLoader } from "three/examples/jsm/loaders/FontLoader.js";
|
||||||
|
import { TextGeometry } from "three/examples/jsm/geometries/TextGeometry.js";
|
||||||
|
import helvetikerRegular from "three/examples/fonts/helvetiker_regular.typeface.json";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "Curve",
|
||||||
|
components: {},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
ACTION_SELECT: 1,
|
||||||
|
ACTION_NONE: 0,
|
||||||
|
curveHandles: [],
|
||||||
|
mouse: new THREE.Vector2(),
|
||||||
|
stats: null,
|
||||||
|
scene: null,
|
||||||
|
camera: null,
|
||||||
|
renderer: null,
|
||||||
|
rayCaster: null,
|
||||||
|
control: null,
|
||||||
|
flow: null,
|
||||||
|
initialPoints: [
|
||||||
|
{ x: 1, y: 0, z: -1 },
|
||||||
|
{ x: 1, y: 0, z: 1 },
|
||||||
|
{ x: -1, y: 0, z: 1 },
|
||||||
|
{ x: -1, y: 0, z: -1 },
|
||||||
|
],
|
||||||
|
boxGeometry: new THREE.BoxGeometry(0.1, 0.1, 0.1),
|
||||||
|
boxMaterial: new THREE.MeshBasicMaterial({
|
||||||
|
transparent: true,
|
||||||
|
color: 0xffffff,
|
||||||
|
opacity: 0,
|
||||||
|
}),
|
||||||
|
};
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.action = this.ACTION_NONE;
|
||||||
|
|
||||||
|
// 初始化场景
|
||||||
|
this.initScene();
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 初始化画布
|
||||||
|
async initScene() {
|
||||||
|
this.scene = new THREE.Scene();
|
||||||
|
this.camera = new THREE.PerspectiveCamera(
|
||||||
|
40,
|
||||||
|
window.innerWidth / window.innerHeight,
|
||||||
|
1,
|
||||||
|
1000
|
||||||
|
);
|
||||||
|
this.camera.position.set(2, 1, 4);
|
||||||
|
this.camera.lookAt(this.scene.position);
|
||||||
|
|
||||||
|
// 循环四个方块加入scene
|
||||||
|
for (const handlePos of this.initialPoints) {
|
||||||
|
const handle = new THREE.Mesh(
|
||||||
|
this.boxGeometry,
|
||||||
|
this.boxMaterial
|
||||||
|
);
|
||||||
|
handle.position.copy(handlePos);
|
||||||
|
this.curveHandles.push(handle);
|
||||||
|
this.scene.add(handle);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 根据方块绘制贝塞尔曲线
|
||||||
|
this.curve = new THREE.CatmullRomCurve3(
|
||||||
|
this.curveHandles.map((handle) => handle.position)
|
||||||
|
);
|
||||||
|
this.curve.curveType = "centripetal";
|
||||||
|
this.curve.closed = true;
|
||||||
|
|
||||||
|
const points = this.curve.getPoints(50);
|
||||||
|
this.line = new THREE.LineLoop(
|
||||||
|
new THREE.BufferGeometry().setFromPoints(points),
|
||||||
|
new THREE.LineBasicMaterial({
|
||||||
|
transparent: true,
|
||||||
|
opacity: 0,
|
||||||
|
color: 0x00ff00,
|
||||||
|
})
|
||||||
|
);
|
||||||
|
this.scene.add(this.line);
|
||||||
|
|
||||||
|
// 环境加入灯光
|
||||||
|
this.initLight();
|
||||||
|
|
||||||
|
// 加载字体并创建3d文字
|
||||||
|
await this.laodFont();
|
||||||
|
|
||||||
|
// 初始化rennder
|
||||||
|
this.renderer = new THREE.WebGLRenderer({
|
||||||
|
canvas: this.$refs.stage,
|
||||||
|
alpha: true,
|
||||||
|
antialias: true,
|
||||||
|
});
|
||||||
|
this.renderer.setPixelRatio(window.devicePixelRatio);
|
||||||
|
this.renderer.setSize(window.innerWidth, window.innerHeight);
|
||||||
|
|
||||||
|
// 监测点击
|
||||||
|
this.renderer.domElement.addEventListener(
|
||||||
|
"pointerdown",
|
||||||
|
this.onPointerDown
|
||||||
|
);
|
||||||
|
|
||||||
|
//初始化 检测目标是否被点击
|
||||||
|
this.initRayCaster();
|
||||||
|
|
||||||
|
// 初始化监测表盘
|
||||||
|
this.stats = new Stats();
|
||||||
|
document.body.appendChild(this.stats.dom);
|
||||||
|
|
||||||
|
// 循环动画
|
||||||
|
this.animate();
|
||||||
|
|
||||||
|
// 适配视窗
|
||||||
|
window.addEventListener("resize", this.onWindowResize);
|
||||||
|
},
|
||||||
|
// 初始化灯光
|
||||||
|
initLight() {
|
||||||
|
const light = new THREE.DirectionalLight(0xffaa33);
|
||||||
|
light.position.set(-10, 10, 10);
|
||||||
|
light.intensity = 1.0;
|
||||||
|
this.scene.add(light);
|
||||||
|
|
||||||
|
const light2 = new THREE.AmbientLight(0x003973);
|
||||||
|
light2.intensity = 1.0;
|
||||||
|
this.scene.add(light2);
|
||||||
|
},
|
||||||
|
// 加载字体并创建3d文字
|
||||||
|
laodFont() {
|
||||||
|
return new Promise((reslove, reject) => {
|
||||||
|
const loader = new FontLoader();
|
||||||
|
loader.load(
|
||||||
|
"./static/font/fzcy.json", //helvetiker_regular.typeface
|
||||||
|
(font) => {
|
||||||
|
const geometry = new TextGeometry("你好，信蜂互动！", {
|
||||||
|
font: font,
|
||||||
|
size: 0.2,
|
||||||
|
height: 0.05,
|
||||||
|
curveSegments: 12,
|
||||||
|
bevelEnabled: true,
|
||||||
|
bevelThickness: 0.02,
|
||||||
|
bevelSize: 0.01,
|
||||||
|
bevelOffset: 0,
|
||||||
|
bevelSegments: 5,
|
||||||
|
});
|
||||||
|
|
||||||
|
// geometry.rotateX(Math.PI);
|
||||||
|
geometry.rotateZ(-Math.PI);
|
||||||
|
|
||||||
|
const material = new THREE.MeshStandardMaterial({
|
||||||
|
color: 0x99ff00,
|
||||||
|
});
|
||||||
|
|
||||||
|
const objectToCurve = new THREE.Mesh(
|
||||||
|
geometry,
|
||||||
|
material
|
||||||
|
);
|
||||||
|
|
||||||
|
this.flow = new Flow(objectToCurve);
|
||||||
|
this.flow.updateCurve(0, this.curve);
|
||||||
|
this.scene.add(this.flow.object3D);
|
||||||
|
|
||||||
|
reslove();
|
||||||
|
}
|
||||||
|
);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
// 检测目标是否被点击
|
||||||
|
initRayCaster() {
|
||||||
|
this.rayCaster = new THREE.Raycaster();
|
||||||
|
this.control = new TransformControls(
|
||||||
|
this.camera,
|
||||||
|
this.renderer.domElement
|
||||||
|
);
|
||||||
|
this.control.addEventListener("dragging-changed", (event) => {
|
||||||
|
if (!event.value) {
|
||||||
|
const points = this.curve.getPoints(50);
|
||||||
|
this.line.geometry.setFromPoints(points);
|
||||||
|
this.flow.updateCurve(0, this.curve);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
// 拖拽方块改变curve
|
||||||
|
onPointerDown(event) {
|
||||||
|
return false;
|
||||||
|
this.action = this.ACTION_SELECT;
|
||||||
|
this.mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
|
||||||
|
this.mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
|
||||||
|
},
|
||||||
|
// 适配视窗
|
||||||
|
onWindowResize() {
|
||||||
|
this.camera.aspect = window.innerWidth / window.innerHeight;
|
||||||
|
this.camera.updateProjectionMatrix();
|
||||||
|
this.renderer.setSize(window.innerWidth, window.innerHeight);
|
||||||
|
},
|
||||||
|
// 循环动画
|
||||||
|
animate() {
|
||||||
|
requestAnimationFrame(this.animate);
|
||||||
|
|
||||||
|
if (this.action === this.ACTION_SELECT) {
|
||||||
|
this.rayCaster.setFromCamera(this.mouse, this.camera);
|
||||||
|
this.action = this.ACTION_NONE;
|
||||||
|
const intersects = this.rayCaster.intersectObjects(
|
||||||
|
this.curveHandles,
|
||||||
|
false
|
||||||
|
);
|
||||||
|
if (intersects.length) {
|
||||||
|
const target = intersects[0].object;
|
||||||
|
this.control.attach(target);
|
||||||
|
this.scene.add(this.control);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.flow) {
|
||||||
|
this.flow.moveAlongCurve(0.001);
|
||||||
|
}
|
||||||
|
|
||||||
|
this.render();
|
||||||
|
},
|
||||||
|
// 绘制
|
||||||
|
render() {
|
||||||
|
this.renderer.render(this.scene, this.camera);
|
||||||
|
|
||||||
|
this.stats.update();
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||||||
|
<style scoped lang="less">
|
||||||
|
.curve {
|
||||||
|
.prLayout(100%,100%);
|
||||||
|
overflow: hidden;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -15,6 +15,7 @@ import ARHit from '../ARHit/index.vue'
|
|||||||
import Camera from '../Camera/index.vue'
|
import Camera from '../Camera/index.vue'
|
||||||
import HandTrack from '../HandTrack/index.vue'
|
import HandTrack from '../HandTrack/index.vue'
|
||||||
import Video from '../Video/index.vue'
|
import Video from '../Video/index.vue'
|
||||||
|
import Curve from '../modifier_curve/index.vue'
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@ -93,6 +94,15 @@ const routes = [
|
|||||||
keepAlive: false, // 是否保持活跃
|
keepAlive: false, // 是否保持活跃
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
path: "/curve",
|
||||||
|
name: "Curve",
|
||||||
|
component: Curve,
|
||||||
|
meta: {
|
||||||
|
title: "modifer Curve", // 标题
|
||||||
|
keepAlive: false, // 是否保持活跃
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
|
||||||
// {
|
// {
|
||||||
|
|||||||
@ -99,24 +99,23 @@ module.exports = {
|
|||||||
})]
|
})]
|
||||||
|
|
||||||
// 配置 copy plguins
|
// 配置 copy plguins
|
||||||
let copyImg = [
|
let copyRes = [
|
||||||
new CopyWebpackPlugin([
|
new CopyWebpackPlugin([
|
||||||
// This is required so that yoha can load model files etc.
|
// This is required so that yoha can load model files etc.
|
||||||
{ from: 'node_modules/@handtracking.io/yoha/', to: 'yoha/' },
|
{ from: 'node_modules/@handtracking.io/yoha/', to: 'yoha/' },
|
||||||
// Required for github pages...
|
// Required for github pages...
|
||||||
{ from: 'node_modules/coi-serviceworker/coi-serviceworker.min.js', to: './' },
|
{ from: 'node_modules/coi-serviceworker/coi-serviceworker.min.js', to: './' },
|
||||||
|
// Required for github pages...
|
||||||
|
{ from: 'src/assets/font/fzcy.json', to: './static/font/' },
|
||||||
])
|
])
|
||||||
]
|
]
|
||||||
|
|
||||||
|
|
||||||
|
config.plugins = [
|
||||||
|
...config.plugins,
|
||||||
|
|
||||||
|
|
||||||
config.plugins = [...config.plugins,
|
|
||||||
...pluginsDev,
|
...pluginsDev,
|
||||||
...tinyimg,
|
...tinyimg,
|
||||||
...copyImg,
|
...copyRes,
|
||||||
];
|
];
|
||||||
|
|
||||||
config.module.rules.push(
|
config.module.rules.push(
|
||||||
@ -141,7 +140,7 @@ module.exports = {
|
|||||||
{
|
{
|
||||||
loader: 'file-loader', // 解决wasm加载问题
|
loader: 'file-loader', // 解决wasm加载问题
|
||||||
options: {
|
options: {
|
||||||
name: './static/wasm/[name].[ext]'
|
name: './static/wasm/[name][hash:7].[ext]'
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
@ -151,18 +150,20 @@ module.exports = {
|
|||||||
test: /\.(stl|obj|fbx|mtl|glb|gltf)?$/,
|
test: /\.(stl|obj|fbx|mtl|glb|gltf)?$/,
|
||||||
use: [
|
use: [
|
||||||
{
|
{
|
||||||
loader: 'file-loader', // 解决glsl 加载问题
|
loader: 'file-loader',
|
||||||
options: {
|
options: {
|
||||||
name: './static/model/[name].[ext]'
|
name: './static/model/[name][hash:7].[ext]'
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}, {
|
},
|
||||||
|
{
|
||||||
test: /\.glsl$/,
|
test: /\.glsl$/,
|
||||||
use: [{
|
use: [{
|
||||||
loader: 'webpack-glsl-loader', // 解决glsl 加载问题
|
loader: 'webpack-glsl-loader', // 解决glsl 加载问题
|
||||||
}]
|
}]
|
||||||
})
|
}
|
||||||
|
)
|
||||||
|
|
||||||
// 配置gzip压缩
|
// 配置gzip压缩
|
||||||
if (process.env.NODE_ENV === 'production') {
|
if (process.env.NODE_ENV === 'production') {
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user