添加curve demo ，更新首页皮肤
This commit is contained in:
rucky
parent
f48e036827
commit
48c64b858b
@ -132,12 +132,12 @@
|
||||
// }
|
||||
@font-face {
|
||||
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_9s4gs0eqeya.eot?t=1640942389955#iefix') format('embedded-opentype'), /* IE6-IE8 */
|
||||
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_9s4gs0eqeya.ttf?t=1640942389955') format('truetype'),
|
||||
url('//at.alicdn.com/t/font_3110299_9s4gs0eqeya.svg?t=1640942389955#iconfont') format('svg');
|
||||
src: url('//at.alicdn.com/t/font_3110299_p182w4um9w.eot?t=1644309691314'); /* IE9 */
|
||||
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('//at.alicdn.com/t/font_3110299_p182w4um9w.woff?t=1644309691314') format('woff'),
|
||||
url('//at.alicdn.com/t/font_3110299_p182w4um9w.ttf?t=1644309691314') format('truetype'),
|
||||
url('//at.alicdn.com/t/font_3110299_p182w4um9w.svg?t=1644309691314#iconfont') format('svg');
|
||||
}
|
||||
.iconfont {
|
||||
font-family: "iconfont" !important;
|
||||
|
||||
@ -25,21 +25,16 @@ ul, ol { list-style:none;}
|
||||
img, fieldset { border:0; max-width: 100%;}
|
||||
|
||||
html{
|
||||
background-color: #0c0718;
|
||||
background-color: #e3e7e8;
|
||||
width: 100%;
|
||||
margin: auto;
|
||||
overflow-x: hidden;
|
||||
body{
|
||||
// max-width: 750px;
|
||||
overflow-x: hidden;
|
||||
background: #0c0718;
|
||||
background: #e3e7e8;
|
||||
}
|
||||
}
|
||||
.active-dot{
|
||||
background: #3c3c3c;
|
||||
opacity: .5;
|
||||
}
|
||||
|
||||
html,body{
|
||||
// height: auto!important;
|
||||
}
|
||||
@ -57,7 +52,8 @@ html,body{
|
||||
flex-direction: column;
|
||||
align-items: 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%) ;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -65,7 +61,7 @@ html,body{
|
||||
justify-content: center;
|
||||
|
||||
.leaf{
|
||||
fill: #9A4DFF;
|
||||
fill: #c49ce2;
|
||||
}
|
||||
|
||||
@keyframes hide {
|
||||
@ -104,6 +100,15 @@ html,body{
|
||||
.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;
|
||||
.loop(@i)when(@i<36){//递归调用 达到循环的目的
|
||||
@ -133,6 +138,7 @@ html,body{
|
||||
});
|
||||
|
||||
#leaf@{realIndex} {
|
||||
fill: hsla(360 * (@i+110)/150, 0.8 , 1 * (@i+30)/80, 0.85);
|
||||
animation: @aniname @durationStr ease @delaytimeStr both;
|
||||
}
|
||||
}
|
||||
@ -168,12 +174,13 @@ html,body{
|
||||
animation: rotateCon 5s linear infinite;
|
||||
}
|
||||
p{
|
||||
color: #fff;
|
||||
color: rgba(0,0,0,0.8);
|
||||
text-align: center;
|
||||
animation: hide .5s ease 3s both;
|
||||
}
|
||||
#svg{
|
||||
animation: hide .5s ease 3s both;
|
||||
filter: blur(5px);
|
||||
// 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>
|
||||
<div class="home">
|
||||
<Shader></Shader>
|
||||
<Shader class="shader"></Shader>
|
||||
<div class="overlay"></div>
|
||||
<div class="page grid js_show dialog">
|
||||
<div class="page__hd">
|
||||
<div
|
||||
class="page grid js_show dialog"
|
||||
@mousedown="touchstart"
|
||||
@mouseout="touchend"
|
||||
>
|
||||
<div class="page__hd" ref="header">
|
||||
<h1 class="page__title" style="font-size: 20px">
|
||||
大板栗的玩具屋
|
||||
Benlee's Toy
|
||||
</h1>
|
||||
<p class="page__desc" style="font-size: 18px">玩具列表</p>
|
||||
<p class="page__desc">have fun！</p>
|
||||
<p class="page__desc" style="font-size: 18px">Toy list</p>
|
||||
</div>
|
||||
<div class="weui-grids" style="margin-top: 100px">
|
||||
<div class="weui-grids" ref="list">
|
||||
<div
|
||||
style="opacity: 0.5"
|
||||
@click="jump(1)"
|
||||
@click="jump(item, $event)"
|
||||
class="weui-grid link"
|
||||
:class="item.active ? 'active' : ''"
|
||||
v-for="(item, index) in menuList"
|
||||
:key="index"
|
||||
>
|
||||
<div class="weui-grid__icon">
|
||||
<span class="iconfont"></span>
|
||||
<span
|
||||
class="iconfont"
|
||||
v-html="item.fontIconCode"
|
||||
></span>
|
||||
</div>
|
||||
<p class="weui-grid__label">Color</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>
|
||||
<p class="weui-grid__label">{{ item.name }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="shadow" ref="shadow" :class="shown ? 'shown' : ''"></div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
// @ is an alias to /src
|
||||
import { gsap } from "gsap";
|
||||
import Shader from "@/components/shader/index.vue";
|
||||
|
||||
export default {
|
||||
@ -88,6 +52,55 @@ export default {
|
||||
components: {
|
||||
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() {
|
||||
// this.$weui.toast('即将跳转至项目列表页', {
|
||||
// duration: 3500,
|
||||
@ -96,42 +109,70 @@ export default {
|
||||
// setTimeout(() => {
|
||||
// location.href = './project-list.html'
|
||||
// }, 3500);
|
||||
this.initShow();
|
||||
},
|
||||
watch: {
|
||||
$route: {
|
||||
handler(to, from) {
|
||||
console.log(to.path, from.path);
|
||||
},
|
||||
deep: true,
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
// 跳转
|
||||
jump(id) {
|
||||
// 第一个游戏
|
||||
if (id == 1) {
|
||||
this.$router.push({
|
||||
name: "Color",
|
||||
params: {},
|
||||
});
|
||||
} else if (id == 2) {
|
||||
this.$router.push({
|
||||
name: "AR",
|
||||
params: {},
|
||||
});
|
||||
} else if (id == 3) {
|
||||
this.$router.push({
|
||||
name: "ARHit",
|
||||
params: {},
|
||||
});
|
||||
} else if (id == 4) {
|
||||
this.$router.push({
|
||||
name: "Camera",
|
||||
params: {},
|
||||
});
|
||||
} else if (id == 5) {
|
||||
this.$router.push({
|
||||
name: "HandTrack",
|
||||
});
|
||||
} else if (id == 6) {
|
||||
this.$router.push({
|
||||
name: "Video",
|
||||
});
|
||||
}
|
||||
initShow() {
|
||||
gsap.timeline({
|
||||
delay: 2,
|
||||
})
|
||||
.fromTo(
|
||||
this.$refs.shadow,
|
||||
{ scale: 0, top: "45%", rotation: 0 },
|
||||
{ scale: 10, top: "8%", rotation: 0 }
|
||||
)
|
||||
.fromTo(
|
||||
this.$refs.shadow,
|
||||
{ scale: 10 },
|
||||
{
|
||||
scale: 1,
|
||||
onComplete: () => {
|
||||
this.shown = true;
|
||||
},
|
||||
}
|
||||
)
|
||||
.fromTo(
|
||||
this.$refs.header,
|
||||
{ autoAlpha: 0, y: -20 },
|
||||
{ autoAlpha: 1, y: 0 },
|
||||
"-=.3"
|
||||
)
|
||||
.fromTo(
|
||||
this.$refs.list,
|
||||
{ autoAlpha: 0, y: -20 },
|
||||
{ autoAlpha: 1, y: 0 },
|
||||
"-=.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>
|
||||
@ -139,7 +180,15 @@ export default {
|
||||
<style scoped lang="less">
|
||||
.home {
|
||||
min-height: 100vh;
|
||||
background: #e3e7e8;
|
||||
color: #333;
|
||||
overflow: hidden;
|
||||
|
||||
.shader {
|
||||
visibility: hidden;
|
||||
}
|
||||
.overlay {
|
||||
visibility: hidden;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
.paLayout(0,0,100%,100%,101);
|
||||
pointer-events: none;
|
||||
@ -147,26 +196,99 @@ export default {
|
||||
.link {
|
||||
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 {
|
||||
.paLayout(0,0,100%,50%,102);
|
||||
color: #fff;
|
||||
.paLayout(0,150px,100%,auto,102);
|
||||
// color: #fff;
|
||||
.weui-grids {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
justify-content: start;
|
||||
flex-wrap: wrap;
|
||||
font-size: 30px;
|
||||
align-content: center;
|
||||
align-items: center;
|
||||
.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%;
|
||||
height: 150px;
|
||||
margin-top: 10px;
|
||||
height: auto;
|
||||
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 {
|
||||
font-size: 40px;
|
||||
}
|
||||
.weui-grid__label {
|
||||
line-height: 80px;
|
||||
height: 100px;
|
||||
line-height: 40px;
|
||||
padding: 0 25px;
|
||||
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;
|
||||
}
|
||||
.weui-grid__label {
|
||||
color: #fff;
|
||||
// color: #fff;
|
||||
}
|
||||
.weui-grid__icon {
|
||||
display: flex;
|
||||
@ -188,9 +310,20 @@ export default {
|
||||
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>
|
||||
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 HandTrack from '../HandTrack/index.vue'
|
||||
import Video from '../Video/index.vue'
|
||||
import Curve from '../modifier_curve/index.vue'
|
||||
|
||||
|
||||
|
||||
@ -93,6 +94,15 @@ const routes = [
|
||||
keepAlive: false, // 是否保持活跃
|
||||
},
|
||||
},
|
||||
{
|
||||
path: "/curve",
|
||||
name: "Curve",
|
||||
component: Curve,
|
||||
meta: {
|
||||
title: "modifer Curve", // 标题
|
||||
keepAlive: false, // 是否保持活跃
|
||||
},
|
||||
},
|
||||
|
||||
|
||||
// {
|
||||
|
||||
@ -99,24 +99,23 @@ module.exports = {
|
||||
})]
|
||||
|
||||
// 配置 copy plguins
|
||||
let copyImg = [
|
||||
let copyRes = [
|
||||
new CopyWebpackPlugin([
|
||||
// This is required so that yoha can load model files etc.
|
||||
{ from: 'node_modules/@handtracking.io/yoha/', to: 'yoha/' },
|
||||
// Required for github pages...
|
||||
{ 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,
|
||||
...tinyimg,
|
||||
...copyImg,
|
||||
...copyRes,
|
||||
];
|
||||
|
||||
config.module.rules.push(
|
||||
@ -141,7 +140,7 @@ module.exports = {
|
||||
{
|
||||
loader: 'file-loader', // 解决wasm加载问题
|
||||
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)?$/,
|
||||
use: [
|
||||
{
|
||||
loader: 'file-loader', // 解决glsl 加载问题
|
||||
loader: 'file-loader',
|
||||
options: {
|
||||
name: './static/model/[name].[ext]'
|
||||
name: './static/model/[name][hash:7].[ext]'
|
||||
}
|
||||
}
|
||||
]
|
||||
}, {
|
||||
},
|
||||
{
|
||||
test: /\.glsl$/,
|
||||
use: [{
|
||||
loader: 'webpack-glsl-loader', // 解决glsl 加载问题
|
||||
}]
|
||||
})
|
||||
}
|
||||
)
|
||||
|
||||
// 配置gzip压缩
|
||||
if (process.env.NODE_ENV === 'production') {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user