From c02820c3c8ad6ee09fe46169f58b092990448d1e Mon Sep 17 00:00:00 2001
From: rucky <scl22@qq.com>
Date: Fri, 11 Feb 2022 18:14:20 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E7=94=BB=E6=9D=BF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                     |   1 +
 src/components/ar/hit.vue        | 560 ++++++++++++++++---------------
 src/components/ar/index.vue      | 430 ++++++++++++------------
 src/page/index/Drawing/index.vue | 100 ++++++
 src/page/index/Home/index.vue    |  12 +-
 src/page/index/router/index.js   |  11 +-
 6 files changed, 625 insertions(+), 489 deletions(-)
 create mode 100644 src/page/index/Drawing/index.vue

diff --git a/package.json b/package.json
index 826ad00..357149e 100644
--- a/package.json
+++ b/package.json
@@ -62,6 +62,7 @@
     "deploy-cli-service": "^1.2.0",
     "eslint": "^6.7.2",
     "eslint-plugin-vue": "^6.2.2",
+    "fabric": "^5.0.0",
     "glslify": "^7.1.1",
     "handtrackjs": "^0.1.5",
     "jsmpeg": "^1.0.0",
diff --git a/src/components/ar/hit.vue b/src/components/ar/hit.vue
index 6eab736..aba7bdd 100644
--- a/src/components/ar/hit.vue
+++ b/src/components/ar/hit.vue
@@ -1,12 +1,12 @@
 <template>
-    <div class="c-shader" ref="container">
-        <div class="camra-data">
-            camera.position<br />
-            x:{{ camera ? camera.position.x : "" }} <br />
-            y:{{ camera ? camera.position.y : "" }} <br />
-            z:{{ camera ? camera.position.z : "" }} <br />
-        </div>
-    </div>
+	<div class="c-shader" ref="container">
+		<div class="camra-data">
+			camera.position<br />
+			x:{{ camera ? camera.position.x : "" }} <br />
+			y:{{ camera ? camera.position.y : "" }} <br />
+			z:{{ camera ? camera.position.z : "" }} <br />
+		</div>
+	</div>
 </template>
 
 <script>
@@ -20,306 +20,316 @@ import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";
 import { DRACOLoader } from "three/examples/jsm/loaders/DRACOLoader.js";
 
 export default {
-    name: "color",
-    props: {
-        msg: String,
-    },
-    data() {
-        return {
-            remaining: 50,
-            container: null,
-            camera: null,
-            scene: null,
-            renderer: null,
-            reticle: null,
-            cursor: new THREE.Vector3(),
-            hitTestSource: null,
-            hitTestSourceRequested: false,
-        };
-    },
-    created() {},
-    mounted() {
-        this.initStage();
+	name: "color",
+	props: {
+		msg: String,
+	},
+	data() {
+		return {
+			remaining: 50,
+			container: null,
+			camera: null,
+			scene: null,
+			renderer: null,
+			reticle: null,
+			cursor: new THREE.Vector3(),
+			hitTestSource: null,
+			hitTestSourceRequested: false,
+		};
+	},
+	created() {},
+	mounted() {
+		if (window.deviceInfo.system == "IOS") {
+			alert("您当前系统不支持该AR特性");
+			this.$router.replace({
+				name: "Home",
+				params: {},
+			});
+			return false;
+		} else if (window.deviceInfo.app == "WX") {
+			alert("您当前浏览器不支持,请在大于v81版chrome浏览器中打开预览");
+		}
+		this.initStage();
 
-        // 循环动画
-        this.animate();
-        // this.addAnimation();
-    },
-    methods: {
-        initStage() {
-            //基础参数
-            this.container = this.$refs.container;
-            this.camera = new THREE.PerspectiveCamera(
-                70,
-                window.innerWidth / window.innerHeight,
-                0.01,
-                5
-            );
-            this.scene = new THREE.Scene();
+		// 循环动画
+		this.animate();
+		// this.addAnimation();
+	},
+	methods: {
+		initStage() {
+			//基础参数
+			this.container = this.$refs.container;
+			this.camera = new THREE.PerspectiveCamera(
+				70,
+				window.innerWidth / window.innerHeight,
+				0.01,
+				5
+			);
+			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, {
-                    requiredFeatures: ["hit-test"],
-                })
-            );
+			// 定义 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, {
+					requiredFeatures: ["hit-test"],
+				})
+			);
 
-            // 定义操控
+			// 定义操控
 
-            // 添加全局环境光
-            const light = new THREE.HemisphereLight(0xffffff, 0xbbbbff, 1);
-            light.position.set(0.5, 1, 0.25);
-            this.scene.add(light);
+			// 添加全局环境光
+			const light = new THREE.HemisphereLight(0xffffff, 0xbbbbff, 1);
+			light.position.set(0.5, 1, 0.25);
+			this.scene.add(light);
 
-            this.painter = new TubePainter();
-            this.painter.setSize(0.4);
-            // this.painter.mesh.material = new THREE.MeshLambertMaterial({
-            // color: 0x0f19662,
-            // });
-            this.painter.mesh.material.side = THREE.DoubleSide;
-            this.scene.add(this.painter.mesh);
+			this.painter = new TubePainter();
+			this.painter.setSize(0.4);
+			// this.painter.mesh.material = new THREE.MeshLambertMaterial({
+			// color: 0x0f19662,
+			// });
+			this.painter.mesh.material.side = THREE.DoubleSide;
+			this.scene.add(this.painter.mesh);
 
-            console.log(this.painter.mesh.material);
+			console.log(this.painter.mesh.material);
 
-            setInterval(() => {
-                this.painter.mesh.material.color.set(0xffffff * Math.random());
-            }, 1000);
+			setInterval(() => {
+				this.painter.mesh.material.color.set(0xffffff * Math.random());
+			}, 1000);
 
-            // this.addPumpkin();
+			// this.addPumpkin();
 
-            let that = this;
-            function onSelectEnd() {
-                this.userData.isSelecting = false;
-            }
-            function onSelectStart() {
-                that.startTime = new Date().getTime();
-                this.userData.isSelecting = true;
-                this.userData.skipFrames = 2;
-            }
+			let that = this;
+			function onSelectEnd() {
+				this.userData.isSelecting = false;
+			}
+			function onSelectStart() {
+				that.startTime = new Date().getTime();
+				this.userData.isSelecting = true;
+				this.userData.skipFrames = 2;
+			}
 
-            this.controller = this.renderer.xr.getController(0);
-            this.controller.addEventListener("select", () => {
-                let moved = new Date().getTime() - that.startTime > 165;
-                if (!moved) {
-                    this.addPumpkin();
-                }
-            });
-            this.controller.addEventListener("selectstart", onSelectStart);
-            this.controller.addEventListener("selectend", onSelectEnd);
-            this.controller.userData.skipFrames = 0;
-            this.scene.add(this.controller);
+			this.controller = this.renderer.xr.getController(0);
+			this.controller.addEventListener("select", () => {
+				let moved = new Date().getTime() - that.startTime > 165;
+				if (!moved) {
+					this.addPumpkin();
+				}
+			});
+			this.controller.addEventListener("selectstart", onSelectStart);
+			this.controller.addEventListener("selectend", onSelectEnd);
+			this.controller.userData.skipFrames = 0;
+			this.scene.add(this.controller);
 
-            this.reticle = new THREE.Mesh(
-                new THREE.RingGeometry(0.15, 0.2, 32).rotateX(-Math.PI / 2),
-                new THREE.MeshBasicMaterial()
-            );
-            this.reticle.matrixAutoUpdate = false;
-            this.reticle.visible = false;
-            this.scene.add(this.reticle);
-            // 自动缩放
-            window.addEventListener("resize", this.onWindowResize);
-            // this.onWindowResize();
-        },
-        addACyli() {
-            if (this.reticle.visible) {
-                const material = new THREE.MeshPhongMaterial({
-                    color: 0xffffff * Math.random(),
-                });
-                const geometry = new THREE.CylinderGeometry(
-                    0.1,
-                    0.1,
-                    0.2,
-                    32
-                ).translate(0, 0.1, 0);
-                const mesh = new THREE.Mesh(geometry, material);
-                mesh.position.setFromMatrixPosition(this.reticle.matrix);
-                mesh.scale.y = Math.random() * 2 + 1;
-                this.scene.add(mesh);
-            }
-        },
-        // 添加南瓜
-        addPumpkin() {
-            // const dracoLoader = new DRACOLoader();
-            // dracoLoader.setDecoderPath("./");
-            // dracoLoader.setDecoderConfig({ type: "js" });
-            const loader = new GLTFLoader();
-            // loader.setDRACOLoader(dracoLoader);
-            loader.load(require("@/assets/model/pumpkin.gltf"), (gltf) => {
-                console.log(gltf);
-                gltf.scene.scale.set(0.1, 0.1, 0.1);
-                // gltf.scene.rotation.y = Math.PI;
+			this.reticle = new THREE.Mesh(
+				new THREE.RingGeometry(0.15, 0.2, 32).rotateX(-Math.PI / 2),
+				new THREE.MeshBasicMaterial()
+			);
+			this.reticle.matrixAutoUpdate = false;
+			this.reticle.visible = false;
+			this.scene.add(this.reticle);
+			// 自动缩放
+			window.addEventListener("resize", this.onWindowResize);
+			// this.onWindowResize();
+		},
+		addACyli() {
+			if (this.reticle.visible) {
+				const material = new THREE.MeshPhongMaterial({
+					color: 0xffffff * Math.random(),
+				});
+				const geometry = new THREE.CylinderGeometry(
+					0.1,
+					0.1,
+					0.2,
+					32
+				).translate(0, 0.1, 0);
+				const mesh = new THREE.Mesh(geometry, material);
+				mesh.position.setFromMatrixPosition(this.reticle.matrix);
+				mesh.scale.y = Math.random() * 2 + 1;
+				this.scene.add(mesh);
+			}
+		},
+		// 添加南瓜
+		addPumpkin() {
+			// const dracoLoader = new DRACOLoader();
+			// dracoLoader.setDecoderPath("./");
+			// dracoLoader.setDecoderConfig({ type: "js" });
+			const loader = new GLTFLoader();
+			// loader.setDRACOLoader(dracoLoader);
+			loader.load(require("@/assets/model/pumpkin.gltf"), (gltf) => {
+				console.log(gltf);
+				gltf.scene.scale.set(0.1, 0.1, 0.1);
+				// gltf.scene.rotation.y = Math.PI;
 
-                gltf.scene.position.setFromMatrixPosition(this.reticle.matrix);
-                // console.log(gltf.scene);
-                this.scene.add(gltf.scene);
-                gsap.to(gltf.scene.rotation, {
-                    y: `+=${Math.PI * 2}`,
-                    duration: 10,
-                });
-            });
-        },
-        handleController(controller) {
-            const userData = controller.userData;
+				gltf.scene.position.setFromMatrixPosition(this.reticle.matrix);
+				// console.log(gltf.scene);
+				this.scene.add(gltf.scene);
+				gsap.to(gltf.scene.rotation, {
+					y: `+=${Math.PI * 2}`,
+					duration: 10,
+				});
+			});
+		},
+		handleController(controller) {
+			const userData = controller.userData;
 
-            this.cursor
-                .set(0, 0, -0.2)
-                .applyMatrix4(this.controller.matrixWorld);
+			this.cursor
+				.set(0, 0, -0.2)
+				.applyMatrix4(this.controller.matrixWorld);
 
-            if (userData.isSelecting === true) {
-                if (userData.skipFrames >= 0) {
-                    // TODO(mrdoob) Revisit this
+			if (userData.isSelecting === true) {
+				if (userData.skipFrames >= 0) {
+					// TODO(mrdoob) Revisit this
 
-                    userData.skipFrames--;
+					userData.skipFrames--;
 
-                    this.painter.moveTo(this.cursor);
-                } else {
-                    this.painter.lineTo(this.cursor);
-                    this.painter.update();
-                }
-            }
-        },
-        addCubes(controller) {
-            this.group = new THREE.Group();
-            // this.group.position.set(0, 0.1, 0);
-            for (let i = 0; i < 10; i++) {
-                const material = new THREE.MeshPhongMaterial({
-                    color: 0x2399d3,
-                });
-                const geometry = new THREE.CylinderGeometry(
-                    0.1,
-                    0.1,
-                    0.2,
-                    32
-                ).translate(0, 0.1, 0); //new THREE.BoxGeometry(1, 1, 1);
-                const cube = new THREE.Mesh(geometry, material);
-                cube.position.x = Math.random() * 4 - 2;
-                cube.position.y = Math.random() * 4 - 2;
-                cube.position.z = Math.random() * 4 - 2;
-                cube.scale.set(0.5, 0.5, 0.5);
-                // if (this.cursor)
-                //     cube.position.setFromMatrixPosition(this.cursor.matrix);
+					this.painter.moveTo(this.cursor);
+				} else {
+					this.painter.lineTo(this.cursor);
+					this.painter.update();
+				}
+			}
+		},
+		addCubes(controller) {
+			this.group = new THREE.Group();
+			// this.group.position.set(0, 0.1, 0);
+			for (let i = 0; i < 10; i++) {
+				const material = new THREE.MeshPhongMaterial({
+					color: 0x2399d3,
+				});
+				const geometry = new THREE.CylinderGeometry(
+					0.1,
+					0.1,
+					0.2,
+					32
+				).translate(0, 0.1, 0); //new THREE.BoxGeometry(1, 1, 1);
+				const cube = new THREE.Mesh(geometry, material);
+				cube.position.x = Math.random() * 4 - 2;
+				cube.position.y = Math.random() * 4 - 2;
+				cube.position.z = Math.random() * 4 - 2;
+				cube.scale.set(0.5, 0.5, 0.5);
+				// if (this.cursor)
+				//     cube.position.setFromMatrixPosition(this.cursor.matrix);
 
-                // cube.applyMatrix4(this.controller.matrixWorld);
+				// cube.applyMatrix4(this.controller.matrixWorld);
 
-                this.scene.add(cube);
-            }
-            // this.group.applyMatrix4(controller.matrixWorld);
-            // this.scene.add(this.group);
+				this.scene.add(cube);
+			}
+			// this.group.applyMatrix4(controller.matrixWorld);
+			// this.scene.add(this.group);
 
-            // setInterval(() => {
-            //     console.log(this.camera.position);
-            //     console.log(this.painter.mesh.position, 123);
-            // }, 5000);
-        },
-        onWindowResize(event) {
-            const width = window.innerWidth;
-            const height = window.innerHeight;
+			// setInterval(() => {
+			//     console.log(this.camera.position);
+			//     console.log(this.painter.mesh.position, 123);
+			// }, 5000);
+		},
+		onWindowResize(event) {
+			const width = window.innerWidth;
+			const height = window.innerHeight;
 
-            this.camera.aspect = width / height;
-            this.camera.updateProjectionMatrix();
+			this.camera.aspect = width / height;
+			this.camera.updateProjectionMatrix();
 
-            this.renderer.setSize(width, height);
-        },
-        animate() {
-            this.renderer.setAnimationLoop(this.render);
-        },
-        render(timestamp, frame) {
-            this.handleController(this.controller);
-            if (frame) {
-                const referenceSpace = this.renderer.xr.getReferenceSpace();
-                const session = this.renderer.xr.getSession();
+			this.renderer.setSize(width, height);
+		},
+		animate() {
+			this.renderer.setAnimationLoop(this.render);
+		},
+		render(timestamp, frame) {
+			this.handleController(this.controller);
+			if (frame) {
+				const referenceSpace = this.renderer.xr.getReferenceSpace();
+				const session = this.renderer.xr.getSession();
 
-                if (this.hitTestSourceRequested === false) {
-                    session
-                        .requestReferenceSpace("viewer")
-                        .then((referenceSpace) => {
-                            session
-                                .requestHitTestSource({ space: referenceSpace })
-                                .then((source) => {
-                                    this.hitTestSource = source;
-                                });
-                        });
+				if (this.hitTestSourceRequested === false) {
+					session
+						.requestReferenceSpace("viewer")
+						.then((referenceSpace) => {
+							session
+								.requestHitTestSource({ space: referenceSpace })
+								.then((source) => {
+									this.hitTestSource = source;
+								});
+						});
 
-                    session.addEventListener("end", () => {
-                        this.hitTestSourceRequested = false;
-                        this.hitTestSource = null;
-                    });
+					session.addEventListener("end", () => {
+						this.hitTestSourceRequested = false;
+						this.hitTestSource = null;
+					});
 
-                    this.hitTestSourceRequested = true;
-                }
+					this.hitTestSourceRequested = true;
+				}
 
-                if (this.hitTestSource) {
-                    const hitTestResults = frame.getHitTestResults(
-                        this.hitTestSource
-                    );
+				if (this.hitTestSource) {
+					const hitTestResults = frame.getHitTestResults(
+						this.hitTestSource
+					);
 
-                    if (hitTestResults.length) {
-                        const hit = hitTestResults[0];
+					if (hitTestResults.length) {
+						const hit = hitTestResults[0];
 
-                        this.reticle.visible = true;
-                        this.reticle.matrix.fromArray(
-                            hit.getPose(referenceSpace).transform.matrix
-                        );
-                    } else {
-                        this.reticle.visible = false;
-                    }
-                }
-            }
+						this.reticle.visible = true;
+						this.reticle.matrix.fromArray(
+							hit.getPose(referenceSpace).transform.matrix
+						);
+					} else {
+						this.reticle.visible = false;
+					}
+				}
+			}
 
-            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.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);
+				},
+			});
+		},
+	},
 };
 </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;
-    .camra-data {
-        display: none;
-        .paLayout(0, 0, 150px, 80px, 10);
-        background: rgba(255, 255, 255, 0.75);
-        border-radius: 0 0 10px 0;
-        color: #333;
-        text-align: center;
-        line-height: 20px;
-    }
-    .select-btn {
-        // background-color: #fff;
-        .paCenterBottom(2%,50%,auto,10);
-    }
+	width: 100vw;
+	height: 100vh;
+	position: relative;
+	z-index: 0;
+	.camra-data {
+		display: none;
+		.paLayout(0, 0, 150px, 80px, 10);
+		background: rgba(255, 255, 255, 0.75);
+		border-radius: 0 0 10px 0;
+		color: #333;
+		text-align: center;
+		line-height: 20px;
+	}
+	.select-btn {
+		// background-color: #fff;
+		.paCenterBottom(2%,50%,auto,10);
+	}
 }
 </style>
diff --git a/src/components/ar/index.vue b/src/components/ar/index.vue
index 4217e85..a0c2937 100644
--- a/src/components/ar/index.vue
+++ b/src/components/ar/index.vue
@@ -1,12 +1,12 @@
 <template>
-    <div class="c-shader" ref="container">
-        <div class="camra-data">
-            camera.position<br />
-            x:{{ camera ? camera.position.x : "" }} <br />
-            y:{{ camera ? camera.position.y : "" }} <br />
-            z:{{ camera ? camera.position.z : "" }} <br />
-        </div>
-    </div>
+	<div class="c-shader" ref="container">
+		<div class="camra-data">
+			camera.position<br />
+			x:{{ camera ? camera.position.x : "" }} <br />
+			y:{{ camera ? camera.position.y : "" }} <br />
+			z:{{ camera ? camera.position.z : "" }} <br />
+		</div>
+	</div>
 </template>
 
 <script>
@@ -18,235 +18,245 @@ import { TubePainter } from "three/examples/jsm/misc/TubePainter.js";
 import { ARButton } from "three/examples//jsm/webxr/ARButton.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.animate();
-        // 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();
+	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() {
+		if (window.deviceInfo.system == "IOS") {
+			alert("您当前系统不支持该AR特性");
+			this.$router.replace({
+				name: "Home",
+				params: {},
+			});
+			return false;
+		} else if (window.deviceInfo.app == "WX") {
+			alert("您当前浏览器不支持,请在大于v81版chrome浏览器中打开预览");
+		}
+		this.initStage();
+		// 循环动画
+		this.animate();
+		// 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, {
-                    requiredFeatures: ["hit-test"],
-                })
-            );
+			// 定义 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, {
+					requiredFeatures: ["hit-test"],
+				})
+			);
 
-            // 定义操控
+			// 定义操控
 
-            // 添加全局环境光
-            const light = new THREE.HemisphereLight(0xffffff, 0xbbbbff, 1);
-            light.position.set(0, 1, 0);
-            this.scene.add(light);
+			// 添加全局环境光
+			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 = new THREE.MeshLambertMaterial({
-            // color: 0x0189cbe,
-            // });
-            // this.painter.mesh.material.side = THREE.DoubleSide;
-            // this.scene.add(this.painter.mesh);
+			// this.painter = new TubePainter();
+			// this.painter.setSize(0.4);
+			// this.painter.mesh.material = new THREE.MeshLambertMaterial({
+			// color: 0x0189cbe,
+			// });
+			// 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;
-            }
+			function onSelectEnd() {
+				this.userData.isSelecting = false;
+			}
+			function onSelectStart() {
+				this.userData.isSelecting = true;
+				this.userData.skipFrames = 2;
+			}
 
-            let that = this;
-            function onSelect() {
-                that.addACyli();
-            }
+			let that = this;
+			function onSelect() {
+				that.addACyli();
+			}
 
-            // that.addACyli();
+			// that.addACyli();
 
-            this.controller = this.renderer.xr.getController(0);
-            this.controller.addEventListener("select", onSelect);
-            // this.controller.addEventListener("selectstart", onSelectStart);
-            // this.controller.addEventListener("selectend", onSelectEnd);
-            this.controller.userData.skipFrames = 0;
-            this.scene.add(this.controller);
+			this.controller = this.renderer.xr.getController(0);
+			this.controller.addEventListener("select", onSelect);
+			// this.controller.addEventListener("selectstart", onSelectStart);
+			// this.controller.addEventListener("selectend", onSelectEnd);
+			this.controller.userData.skipFrames = 0;
+			this.scene.add(this.controller);
 
-            // 自动缩放
-            window.addEventListener("resize", this.onWindowResize);
-            // this.onWindowResize();
-        },
-        addACyli() {
-            const material = new THREE.MeshPhongMaterial({
-                color: 0xffffff * Math.random(),
-            });
-            const geometry = new THREE.CylinderGeometry(1, 1, 2, 32);
-            const mesh = new THREE.Mesh(geometry, material);
-            mesh.position.set(0, 0, -10);
-            this.scene.add(mesh);
-        },
-        addCubes(controller) {
-            this.group = new THREE.Group();
-            // this.group.position.set(0, 0.1, 0);
-            for (let i = 0; i < 10; i++) {
-                const material = new THREE.MeshPhongMaterial({
-                    color: 0x2399d3,
-                });
-                const geometry = new THREE.CylinderGeometry(
-                    0.1,
-                    0.1,
-                    0.2,
-                    32
-                ).translate(0, 0.1, 0); //new THREE.BoxGeometry(1, 1, 1);
-                const cube = new THREE.Mesh(geometry, material);
-                cube.position.x = Math.random() * 4 - 2;
-                cube.position.y = Math.random() * 4 - 2;
-                cube.position.z = Math.random() * 4 - 2;
-                cube.scale.set(0.5, 0.5, 0.5);
-                // if (this.cursor)
-                //     cube.position.setFromMatrixPosition(this.cursor.matrix);
+			// 自动缩放
+			window.addEventListener("resize", this.onWindowResize);
+			// this.onWindowResize();
+		},
+		addACyli() {
+			const material = new THREE.MeshPhongMaterial({
+				color: 0xffffff * Math.random(),
+			});
+			const geometry = new THREE.CylinderGeometry(1, 1, 2, 32);
+			const mesh = new THREE.Mesh(geometry, material);
+			mesh.position.set(0, 0, -10);
+			this.scene.add(mesh);
+		},
+		addCubes(controller) {
+			this.group = new THREE.Group();
+			// this.group.position.set(0, 0.1, 0);
+			for (let i = 0; i < 10; i++) {
+				const material = new THREE.MeshPhongMaterial({
+					color: 0x2399d3,
+				});
+				const geometry = new THREE.CylinderGeometry(
+					0.1,
+					0.1,
+					0.2,
+					32
+				).translate(0, 0.1, 0); //new THREE.BoxGeometry(1, 1, 1);
+				const cube = new THREE.Mesh(geometry, material);
+				cube.position.x = Math.random() * 4 - 2;
+				cube.position.y = Math.random() * 4 - 2;
+				cube.position.z = Math.random() * 4 - 2;
+				cube.scale.set(0.5, 0.5, 0.5);
+				// if (this.cursor)
+				//     cube.position.setFromMatrixPosition(this.cursor.matrix);
 
-                // cube.applyMatrix4(this.controller.matrixWorld);
+				// cube.applyMatrix4(this.controller.matrixWorld);
 
-                this.scene.add(cube);
-            }
-            // this.group.applyMatrix4(controller.matrixWorld);
-            // this.scene.add(this.group);
+				this.scene.add(cube);
+			}
+			// this.group.applyMatrix4(controller.matrixWorld);
+			// this.scene.add(this.group);
 
-            // setInterval(() => {
-            //     console.log(this.camera.position);
-            //     console.log(this.painter.mesh.position, 123);
-            // }, 5000);
-        },
-        handleController(controller) {
-            const userData = controller.userData;
+			// setInterval(() => {
+			//     console.log(this.camera.position);
+			//     console.log(this.painter.mesh.position, 123);
+			// }, 5000);
+		},
+		handleController(controller) {
+			const userData = controller.userData;
 
-            this.cursor
-                .set(0, 0, -0.2)
-                .applyMatrix4(this.controller.matrixWorld);
+			this.cursor
+				.set(0, 0, -0.2)
+				.applyMatrix4(this.controller.matrixWorld);
 
-            // if (!this.group) {
-            //     this.addCubes(controller);
-            // }
+			// if (!this.group) {
+			//     this.addCubes(controller);
+			// }
 
-            // this.group.position
-            //     .set(
-            //         this.camera.position.x,
-            //         this.camera.position.y,
-            //         this.camera.position.z
-            //     )
-            //     .applyMatrix4(controller.matrixWorld);
+			// this.group.position
+			//     .set(
+			//         this.camera.position.x,
+			//         this.camera.position.y,
+			//         this.camera.position.z
+			//     )
+			//     .applyMatrix4(controller.matrixWorld);
 
-            // console.log(this.cursor);
+			// console.log(this.cursor);
 
-            if (userData.isSelecting === true) {
-                if (userData.skipFrames >= 0) {
-                    // TODO(mrdoob) Revisit this
+			if (userData.isSelecting === true) {
+				if (userData.skipFrames >= 0) {
+					// TODO(mrdoob) Revisit this
 
-                    userData.skipFrames--;
+					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.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.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.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.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);
+				},
+			});
+		},
+	},
 };
 </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;
-    .camra-data {
-        .paLayout(0,0,150px,80px,10);
-        background: rgba(255, 255, 255, 0.75);
-        border-radius: 0 0 10px 0;
-        color: #333;
-        text-align: center;
-        line-height: 20px;
-    }
-    .select-btn {
-        // background-color: #fff;
-        .paCenterBottom(2%,50%,auto,10);
-    }
+	width: 100vw;
+	height: 100vh;
+	position: relative;
+	z-index: 0;
+	.camra-data {
+		.paLayout(0,0,150px,80px,10);
+		background: rgba(255, 255, 255, 0.75);
+		border-radius: 0 0 10px 0;
+		color: #333;
+		text-align: center;
+		line-height: 20px;
+	}
+	.select-btn {
+		// background-color: #fff;
+		.paCenterBottom(2%,50%,auto,10);
+	}
 }
 </style>
diff --git a/src/page/index/Drawing/index.vue b/src/page/index/Drawing/index.vue
new file mode 100644
index 0000000..9c3ec43
--- /dev/null
+++ b/src/page/index/Drawing/index.vue
@@ -0,0 +1,100 @@
+
+<template>
+	<div class="drawing">
+		<canvas id="canvas" ref="canvas"></canvas>
+
+		<button id="add" class="add" @click="Add">Add</button>
+	</div>
+</template>
+<script>
+// @ is an alias to /src
+import { fabric } from "fabric";
+export default {
+	name: "Curve",
+	components: {},
+	data() {
+		return {
+			deleteIcon:
+				"data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3E%3Csvg version='1.1' id='Ebene_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='595.275px' height='595.275px' viewBox='200 215 230 470' xml:space='preserve'%3E%3Ccircle style='fill:%23F44336;' cx='299.76' cy='439.067' r='218.516'/%3E%3Cg%3E%3Crect x='267.162' y='307.978' transform='matrix(0.7071 -0.7071 0.7071 0.7071 -222.6202 340.6915)' style='fill:white;' width='65.545' height='262.18'/%3E%3Crect x='266.988' y='308.153' transform='matrix(0.7071 0.7071 -0.7071 0.7071 398.3889 -83.3116)' style='fill:white;' width='65.544' height='262.179'/%3E%3C/g%3E%3C/svg%3E",
+		};
+	},
+	mounted() {
+		this.init();
+	},
+	methods: {
+		init() {
+			fabric.Object.prototype.transparentCorners = false;
+			fabric.Object.prototype.cornerColor = "rgba(90,175,119,0.75)";
+			fabric.Object.prototype.cornerStyle = "circle";
+
+			var img = document.createElement("img");
+			img.src = this.deleteIcon;
+			// create fabric canvas
+			this.$refs.canvas.width = window.innerWidth;
+			this.$refs.canvas.height = window.innerHeight;
+			var canvas = (this.canvas = new fabric.Canvas("canvas"));
+
+			this.Add();
+
+			function deleteObject(eventData, transform) {
+				var target = transform.target;
+				var canvas = target.canvas;
+				canvas.remove(target);
+				canvas.requestRenderAll();
+			}
+
+			function renderIcon(ctx, left, top, styleOverride, fabricObject) {
+				var size = this.cornerSize;
+				ctx.save();
+				ctx.translate(left, top);
+				ctx.rotate(fabric.util.degreesToRadians(fabricObject.angle));
+				ctx.drawImage(img, -size / 2, -size / 2, size, size);
+				ctx.restore();
+			}
+
+			// 添加自定义控制
+			fabric.Object.prototype.controls.deleteControl = new fabric.Control(
+				{
+					x: 0.5,
+					y: -0.5,
+					offsetY: 16,
+					cursorStyle: "pointer",
+					mouseUpHandler: deleteObject,
+					render: renderIcon,
+					cornerSize: 24,
+				}
+			);
+		},
+		Add() {
+			let rect = new fabric.Rect({
+				left: 100,
+				top: 50,
+				fill: "yellow",
+				width: 200,
+				height: 100,
+				objectCaching: false,
+				stroke: "lightgreen",
+				strokeWidth: 4,
+			});
+
+			this.canvas.add(rect);
+			this.canvas.setActiveObject(rect);
+		},
+	},
+};
+</script>
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped lang="less">
+.drawing {
+	.prLayout(100%,100%);
+	overflow: hidden;
+	color: #fff;
+	background-color: #cda2bf;
+	.add {
+		.paCenterBottom(30px,100px,100px,10);
+		border-radius: 50%;
+		background: #cda2bf;
+		box-shadow: 20px 20px 60px #ae8aa2, -20px -20px 60px #ecbadc;
+	}
+}
+</style>
\ No newline at end of file
diff --git a/src/page/index/Home/index.vue b/src/page/index/Home/index.vue
index 9733a01..5479f48 100644
--- a/src/page/index/Home/index.vue
+++ b/src/page/index/Home/index.vue
@@ -8,7 +8,7 @@
 -->
 <template>
 	<div class="home">
-		<Shader class="shader"></Shader>
+		<!-- <Shader class="shader"></Shader> -->
 		<div class="overlay"></div>
 		<div
 			class="page grid js_show dialog"
@@ -45,12 +45,12 @@
 <script>
 // @ 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 {
 	name: "Index",
 	components: {
-		Shader,
+		// Shader,
 	},
 	data() {
 		return {
@@ -98,6 +98,12 @@ export default {
 					name: "三维文字曲线运动",
 					active: false,
 				},
+				{
+					fontIconCode: "&#xe606;",
+					target: "Drawing",
+					name: "画板",
+					active: false,
+				},
 			],
 		};
 	},
diff --git a/src/page/index/router/index.js b/src/page/index/router/index.js
index 9be07ae..6272a25 100644
--- a/src/page/index/router/index.js
+++ b/src/page/index/router/index.js
@@ -16,6 +16,7 @@ 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'
+import Drawing from '../Drawing/index.vue'
 
 
 
@@ -103,7 +104,15 @@ const routes = [
 			keepAlive: false, // 是否保持活跃
 		},
 	},
-
+	{
+		path: "/drawing",
+		name: "Drawing",
+		component: Drawing,
+		meta: {
+			title: "Drawing Board", // 标题
+			keepAlive: false, // 是否保持活跃
+		},
+	},
 
 	// {
 	//   path: "/example",