更新 ar demo
This commit is contained in:
rucky
parent
cafa19f6fd
commit
24d78f8378
File diff suppressed because one or more lines are too long
@ -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);
|
// -webkit-transform: translate3d(0, 0, 0);
|
||||||
// -moz-transform: translate3d(0, 0, 0);
|
// -moz-transform: translate3d(0, 0, 0);
|
||||||
// -ms-transform: translate3d(0, 0, 0);
|
// -ms-transform: translate3d(0, 0, 0);
|
||||||
@ -108,8 +110,8 @@ html,body{
|
|||||||
.loop((@i+1));//执行某个需要循环的方法
|
.loop((@i+1));//执行某个需要循环的方法
|
||||||
@realIndex: @i+1;
|
@realIndex: @i+1;
|
||||||
@aniname : ~'leaf@{realIndex}';
|
@aniname : ~'leaf@{realIndex}';
|
||||||
@delaytime: @i*0.05+0.1;
|
@delaytime: @i*0.025+0.1;
|
||||||
@duration: @i*0.1*0.5;
|
@duration: @i*0.1*0.25;
|
||||||
@durationStr: ~'@{duration}s';
|
@durationStr: ~'@{duration}s';
|
||||||
@delaytimeStr: ~'@{delaytime}s';
|
@delaytimeStr: ~'@{delaytime}s';
|
||||||
@rotate: @i*10-10;
|
@rotate: @i*10-10;
|
||||||
|
|||||||
@ -1,17 +1,17 @@
|
|||||||
export default {
|
export default {
|
||||||
origin: [
|
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],
|
[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,],
|
||||||
[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, 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, 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, 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, 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, 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, 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, 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, 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, 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, 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, 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, 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, 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, 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, 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, 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],
|
[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,],
|
||||||
game: [
|
[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 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,],
|
[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, 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,],
|
[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,],
|
[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,],
|
[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,],
|
||||||
|
],
|
||||||
}
|
}
|
||||||
293
src/components/ar/index.vue
Normal file
293
src/components/ar/index.vue
Normal file
@ -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>
|
||||||
@ -31,7 +31,7 @@ export default {
|
|||||||
renderer: null,
|
renderer: null,
|
||||||
mouse: new THREE.Vector2(),
|
mouse: new THREE.Vector2(),
|
||||||
raycaster: new THREE.Raycaster(),
|
raycaster: new THREE.Raycaster(),
|
||||||
gui: new GUI(),
|
// gui: new GUI(),
|
||||||
|
|
||||||
ENTIRE_SCENE: 0,
|
ENTIRE_SCENE: 0,
|
||||||
BLOOM_SCENE: 1,
|
BLOOM_SCENE: 1,
|
||||||
@ -68,7 +68,10 @@ export default {
|
|||||||
this.renderer.setPixelRatio(window.devicePixelRatio);
|
this.renderer.setPixelRatio(window.devicePixelRatio);
|
||||||
this.renderer.setSize(window.innerWidth, window.innerHeight);
|
this.renderer.setSize(window.innerWidth, window.innerHeight);
|
||||||
this.renderer.toneMapping = THREE.ReinhardToneMapping;
|
this.renderer.toneMapping = THREE.ReinhardToneMapping;
|
||||||
|
if (!document.getElementById("webgl")) {
|
||||||
|
this.renderer.domElement.id = "webgl";
|
||||||
this.container.appendChild(this.renderer.domElement);
|
this.container.appendChild(this.renderer.domElement);
|
||||||
|
}
|
||||||
|
|
||||||
// 定义相机
|
// 定义相机
|
||||||
this.camera = new THREE.PerspectiveCamera(
|
this.camera = new THREE.PerspectiveCamera(
|
||||||
@ -77,7 +80,11 @@ export default {
|
|||||||
1,
|
1,
|
||||||
2000
|
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);
|
this.camera.lookAt(0, 0, 0);
|
||||||
|
|
||||||
// 定义操控
|
// 定义操控
|
||||||
@ -87,7 +94,7 @@ export default {
|
|||||||
);
|
);
|
||||||
this.controls.maxPolarAngle = Math.PI * 0.5;
|
this.controls.maxPolarAngle = Math.PI * 0.5;
|
||||||
this.controls.minDistance = 1;
|
this.controls.minDistance = 1;
|
||||||
this.controls.maxDistance = 500;
|
this.controls.maxDistance = 1500;
|
||||||
this.controls.addEventListener("change", this.render);
|
this.controls.addEventListener("change", this.render);
|
||||||
|
|
||||||
// 添加全局环境光
|
// 添加全局环境光
|
||||||
@ -133,61 +140,67 @@ export default {
|
|||||||
// 添加点击事件
|
// 添加点击事件
|
||||||
window.addEventListener("pointerdown", this.onPointerDown);
|
window.addEventListener("pointerdown", this.onPointerDown);
|
||||||
|
|
||||||
this.gui
|
// this.gui
|
||||||
.add(this.params, "scene", [
|
// .add(this.params, "scene", [
|
||||||
"Scene with Glow",
|
// "Scene with Glow",
|
||||||
"Glow only",
|
// "Glow only",
|
||||||
"Scene only",
|
// "Scene only",
|
||||||
])
|
// ])
|
||||||
.onChange((value) => {
|
// .onChange((value) => {
|
||||||
switch (value) {
|
// switch (value) {
|
||||||
case "Scene with Glow":
|
// case "Scene with Glow":
|
||||||
this.bloomComposer.renderToScreen = false;
|
// this.bloomComposer.renderToScreen = false;
|
||||||
break;
|
// break;
|
||||||
case "Glow only":
|
// case "Glow only":
|
||||||
this.bloomComposer.renderToScreen = true;
|
// this.bloomComposer.renderToScreen = true;
|
||||||
break;
|
// break;
|
||||||
case "Scene only":
|
// case "Scene only":
|
||||||
// nothing to do
|
// // nothing to do
|
||||||
break;
|
// break;
|
||||||
}
|
// }
|
||||||
|
|
||||||
this.render();
|
// this.render();
|
||||||
});
|
// });
|
||||||
|
|
||||||
this.folder = this.gui.addFolder("Bloom Parameters");
|
// this.folder = this.gui.addFolder("Bloom Parameters");
|
||||||
|
|
||||||
this.folder
|
// this.folder
|
||||||
.add(this.params, "exposure", 0.1, 2)
|
// .add(this.params, "exposure", 0.1, 2)
|
||||||
.onChange((value) => {
|
// .onChange((value) => {
|
||||||
this.renderer.toneMappingExposure = Math.pow(value, 4.0);
|
// this.renderer.toneMappingExposure = Math.pow(value, 4.0);
|
||||||
this.render();
|
// this.render();
|
||||||
});
|
// });
|
||||||
|
|
||||||
this.folder
|
// this.folder
|
||||||
.add(this.params, "bloomThreshold", 0.0, 1.0)
|
// .add(this.params, "bloomThreshold", 0.0, 1.0)
|
||||||
.onChange((value) => {
|
// .onChange((value) => {
|
||||||
this.bloomPass.threshold = Number(value);
|
// this.bloomPass.threshold = Number(value);
|
||||||
this.render();
|
// this.render();
|
||||||
});
|
// });
|
||||||
|
|
||||||
this.folder
|
// this.folder
|
||||||
.add(this.params, "bloomStrength", 0.0, 10.0)
|
// .add(this.params, "bloomStrength", 0.0, 10.0)
|
||||||
.onChange((value) => {
|
// .onChange((value) => {
|
||||||
this.bloomPass.strength = Number(value);
|
// this.bloomPass.strength = Number(value);
|
||||||
this.render();
|
// this.render();
|
||||||
});
|
// });
|
||||||
|
|
||||||
this.folder
|
// this.folder
|
||||||
.add(this.params, "bloomRadius", 0.0, 1.0)
|
// .add(this.params, "bloomRadius", 0.0, 1.0)
|
||||||
.step(0.01)
|
// .step(0.01)
|
||||||
.onChange((value) => {
|
// .onChange((value) => {
|
||||||
this.bloomPass.radius = Number(value);
|
// this.bloomPass.radius = Number(value);
|
||||||
this.render();
|
// this.render();
|
||||||
});
|
// });
|
||||||
|
|
||||||
// 设置场景
|
// 设置场景
|
||||||
this.setupScene();
|
this.setupScene();
|
||||||
|
// 循环动画
|
||||||
|
this.animate();
|
||||||
|
// 自动缩放
|
||||||
|
|
||||||
|
window.addEventListener("resize", this.onWindowResize);
|
||||||
|
this.onWindowResize();
|
||||||
},
|
},
|
||||||
onPointerDown(event) {
|
onPointerDown(event) {
|
||||||
this.mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
|
this.mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
|
||||||
@ -295,8 +308,8 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
animate() {
|
animate() {
|
||||||
// requestAnimationFrame(this.animate);
|
requestAnimationFrame(this.animate);
|
||||||
// this.render();
|
this.render();
|
||||||
},
|
},
|
||||||
render() {
|
render() {
|
||||||
switch (this.params.scene) {
|
switch (this.params.scene) {
|
||||||
@ -344,6 +357,7 @@ export default {
|
|||||||
// 自旋转
|
// 自旋转
|
||||||
gsap.to(this.group.rotation, {
|
gsap.to(this.group.rotation, {
|
||||||
y: -Math.PI * 2,
|
y: -Math.PI * 2,
|
||||||
|
x: 0.1,
|
||||||
duration: 5,
|
duration: 5,
|
||||||
// yoyo: true,
|
// yoyo: true,
|
||||||
// repeat: -1,
|
// repeat: -1,
|
||||||
@ -358,6 +372,18 @@ export default {
|
|||||||
});
|
});
|
||||||
// 球体自动
|
// 球体自动
|
||||||
this.group.children.map((item, index) => {
|
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;
|
let op = item.position;
|
||||||
gsap.fromTo(
|
gsap.fromTo(
|
||||||
item.position,
|
item.position,
|
||||||
@ -378,39 +404,59 @@ export default {
|
|||||||
z: op.z,
|
z: op.z,
|
||||||
duration: 5,
|
duration: 5,
|
||||||
onUpdate: () => {
|
onUpdate: () => {
|
||||||
if (index == 1) this.render();
|
// if (index == 1) this.render();
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
|
||||||
let iii = 0;
|
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
pos1024.game.forEach((item, index) => {
|
let iii = 0;
|
||||||
|
for (let ii = 0; ii < 2; ii++) {
|
||||||
|
pos1024.ready.forEach((item, index) => {
|
||||||
item.forEach((t, i) => {
|
item.forEach((t, i) => {
|
||||||
if (t == 0) {
|
if (t == 0) {
|
||||||
let position = {};
|
let position = {};
|
||||||
position.x = i * 10 - (item.length / 2) * 10;
|
position.x = i * 10 - (item.length / 2) * 10;
|
||||||
position.y =
|
position.y =
|
||||||
-index * 10 + (pos1024.game.length / 2) * 10;
|
-index * 10 +
|
||||||
position.z = 0;
|
(pos1024.ready.length / 2) * 10;
|
||||||
|
position.z = ii * 10;
|
||||||
gsap.to(this.group.children[iii].position, {
|
gsap.to(this.group.children[iii].position, {
|
||||||
x: position.x,
|
x: position.x,
|
||||||
y: position.y,
|
y: position.y,
|
||||||
z: position.z,
|
z: position.z,
|
||||||
duration: 1,
|
duration: 1,
|
||||||
onUpdate: () => {
|
|
||||||
if (i == 0) this.render();
|
|
||||||
},
|
|
||||||
});
|
});
|
||||||
iii++;
|
iii++;
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
}
|
||||||
|
|
||||||
this.group.children.forEach((item, index) => {
|
this.group.children.forEach((item, index) => {
|
||||||
if (index > iii) {
|
if (index >= iii) {
|
||||||
gsap.to(item.scale, { x: 0, y: 0, z: 0 });
|
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);
|
}, 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, {
|
// gsap.to(this.params, {
|
||||||
// exposure: 1.1,
|
// exposure: 1.1,
|
||||||
|
|||||||
40
src/page/index/AR/index.vue
Normal file
40
src/page/index/AR/index.vue
Normal file
@ -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>
|
||||||
@ -19,23 +19,27 @@
|
|||||||
<p class="page__desc">have fun！</p>
|
<p class="page__desc">have fun！</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="weui-grids" style="margin-top: 100px">
|
<div class="weui-grids" style="margin-top: 100px">
|
||||||
<div style="opacity: 0.5" @click="jump(1)" class="weui-grid">
|
<div
|
||||||
<div class="weui-grid__icon">
|
|
||||||
<span class="iconfont"></span>
|
|
||||||
</div>
|
|
||||||
<p class="weui-grid__label">鉴色</p>
|
|
||||||
</div>
|
|
||||||
<a
|
|
||||||
href="#"
|
|
||||||
style="opacity: 0.5"
|
style="opacity: 0.5"
|
||||||
@click="showTips"
|
@click="jump(1)"
|
||||||
class="weui-grid"
|
class="weui-grid link"
|
||||||
>
|
>
|
||||||
<div class="weui-grid__icon">
|
<div class="weui-grid__icon">
|
||||||
<span class="iconfont"></span>
|
<span class="iconfont"></span>
|
||||||
</div>
|
</div>
|
||||||
<p class="weui-grid__label">预留</p>
|
<p class="weui-grid__label">Color</p>
|
||||||
</a>
|
</div>
|
||||||
|
<div
|
||||||
|
href="#"
|
||||||
|
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>
|
||||||
<a
|
<a
|
||||||
href="#"
|
href="#"
|
||||||
style="opacity: 0.5"
|
style="opacity: 0.5"
|
||||||
@ -111,6 +115,11 @@ export default {
|
|||||||
name: "Color",
|
name: "Color",
|
||||||
params: {},
|
params: {},
|
||||||
});
|
});
|
||||||
|
} else if (id == 2) {
|
||||||
|
this.$router.push({
|
||||||
|
name: "AR",
|
||||||
|
params: {},
|
||||||
|
});
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
showTips() {
|
showTips() {
|
||||||
@ -134,6 +143,9 @@ export default {
|
|||||||
.paLayout(0,0,100%,100%,101);
|
.paLayout(0,0,100%,100%,101);
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
|
.link {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
.dialog {
|
.dialog {
|
||||||
.paLayout(0,0,100%,50%,102);
|
.paLayout(0,0,100%,50%,102);
|
||||||
color: #fff;
|
color: #fff;
|
||||||
|
|||||||
@ -122,7 +122,7 @@ new Vue({
|
|||||||
gsap.to("#loadingContainer", {
|
gsap.to("#loadingContainer", {
|
||||||
autoAlpha: 0,
|
autoAlpha: 0,
|
||||||
duration: 0.65,
|
duration: 0.65,
|
||||||
delay: 3.2,
|
delay: 2,
|
||||||
onComplete: () => {
|
onComplete: () => {
|
||||||
document.getElementById('loadingContainer').remove();
|
document.getElementById('loadingContainer').remove();
|
||||||
}
|
}
|
||||||
|
|||||||
@ -10,6 +10,7 @@ import Vue from 'vue'
|
|||||||
import VueRouter from 'vue-router'
|
import VueRouter from 'vue-router'
|
||||||
import Home from '../Home/index.vue'
|
import Home from '../Home/index.vue'
|
||||||
import Color from '../Color/index.vue'
|
import Color from '../Color/index.vue'
|
||||||
|
import AR from '../AR/index.vue'
|
||||||
|
|
||||||
Vue.use(VueRouter)
|
Vue.use(VueRouter)
|
||||||
|
|
||||||
@ -37,7 +38,16 @@ const routes = [
|
|||||||
name: "Color",
|
name: "Color",
|
||||||
component: Color,
|
component: Color,
|
||||||
meta: {
|
meta: {
|
||||||
title: "鉴色", // 标题
|
title: "Color", // 标题
|
||||||
|
keepAlive: false, // 是否保持活跃
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: "/ar",
|
||||||
|
name: "AR",
|
||||||
|
component: AR,
|
||||||
|
meta: {
|
||||||
|
title: "AR Paint", // 标题
|
||||||
keepAlive: false, // 是否保持活跃
|
keepAlive: false, // 是否保持活跃
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user