From f1545677c3f254a618ef3141e5e8994766ec8dc5 Mon Sep 17 00:00:00 2001
From: rucky <scl22@qq.com>
Date: Tue, 28 Dec 2021 19:24:55 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E6=88=90=E6=89=8B=E5=8A=BF=E4=BD=8D?=
 =?UTF-8?q?=E7=BD=AE=E8=AF=86=E5=88=AB=20=E7=AD=89=E5=BE=85=E6=A0=A1?=
 =?UTF-8?q?=E5=87=86=E5=9D=90=E6=A0=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/color/index.vue     | 882 ++++++++++++++---------------
 src/page/index/HandTrack/index.vue | 134 +++--
 2 files changed, 543 insertions(+), 473 deletions(-)

diff --git a/src/components/color/index.vue b/src/components/color/index.vue
index ea45e93..1b1a772 100644
--- a/src/components/color/index.vue
+++ b/src/components/color/index.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="c-shader" ref="container"></div>
+	<div class="c-shader" ref="container"></div>
 </template>
 
 <script>
@@ -18,493 +18,493 @@ 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(),
-            // gui: new GUI(),
+	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(),
+			// gui: new GUI(),
 
-            ENTIRE_SCENE: 0,
-            BLOOM_SCENE: 1,
-            materials: {},
-            params: {
-                exposure: 1,
-                bloomStrength: 5,
-                bloomThreshold: 0,
-                bloomRadius: 0,
-                scene: "Scene with Glow",
-            },
-        };
-    },
-    created() {},
-    mounted() {
-        this.initStage();
-        this.addAnimation();
-    },
-    methods: {
-        initStage() {
-            //基础参数
-            this.container = this.$refs.container;
-            this.camera = new THREE.Camera();
-            this.camera.position.z = 1;
-            this.scene = new THREE.Scene();
+			ENTIRE_SCENE: 0,
+			BLOOM_SCENE: 1,
+			materials: {},
+			params: {
+				exposure: 1,
+				bloomStrength: 5,
+				bloomThreshold: 0,
+				bloomRadius: 0,
+				scene: "Scene with Glow",
+			},
+		};
+	},
+	created() {},
+	mounted() {
+		this.initStage();
+		this.addAnimation();
+	},
+	methods: {
+		initStage() {
+			//基础参数
+			this.container = this.$refs.container;
+			this.camera = new THREE.Camera();
+			this.camera.position.z = 1;
+			this.scene = new THREE.Scene();
 
-            this.bloomLayer = new THREE.Layers();
-            this.bloomLayer.set(this.BLOOM_SCENE);
+			this.bloomLayer = new THREE.Layers();
+			this.bloomLayer.set(this.BLOOM_SCENE);
 
-            this.darkMaterial = new THREE.MeshBasicMaterial({ color: "black" });
+			this.darkMaterial = new THREE.MeshBasicMaterial({ color: "black" });
 
-            // 定义 webglrender
-            this.renderer = new THREE.WebGLRenderer({ antialias: true });
-            this.renderer.setPixelRatio(window.devicePixelRatio);
-            this.renderer.setSize(window.innerWidth, window.innerHeight);
-            this.renderer.toneMapping = THREE.ReinhardToneMapping;
-            if (!document.getElementById("webgl")) {
-                this.renderer.domElement.id = "webgl";
-                this.container.appendChild(this.renderer.domElement);
-            }
+			// 定义 webglrender
+			this.renderer = new THREE.WebGLRenderer({ antialias: true });
+			this.renderer.setPixelRatio(window.devicePixelRatio);
+			this.renderer.setSize(window.innerWidth, window.innerHeight);
+			this.renderer.toneMapping = THREE.ReinhardToneMapping;
+			if (!document.getElementById("webgl")) {
+				this.renderer.domElement.id = "webgl";
+				this.container.appendChild(this.renderer.domElement);
+			}
 
-            // 定义相机
-            this.camera = new THREE.PerspectiveCamera(
-                40,
-                window.innerWidth / window.innerHeight,
-                1,
-                2000
-            );
-            this.camera.position.set(
-                0,
-                0,
-                window.deviceInfo.device == "PC" ? 500 : 1000
-            );
-            this.camera.lookAt(0, 0, 0);
+			// 定义相机
+			this.camera = new THREE.PerspectiveCamera(
+				40,
+				window.innerWidth / window.innerHeight,
+				1,
+				2000
+			);
+			this.camera.position.set(
+				0,
+				0,
+				window.deviceInfo.device == "PC" ? 500 : 1000
+			);
+			this.camera.lookAt(0, 0, 0);
 
-            // 定义操控
-            this.controls = new OrbitControls(
-                this.camera,
-                this.renderer.domElement
-            );
-            this.controls.maxPolarAngle = Math.PI * 0.5;
-            this.controls.minDistance = 1;
-            this.controls.maxDistance = 1500;
-            this.controls.addEventListener("change", this.render);
+			// 定义操控
+			this.controls = new OrbitControls(
+				this.camera,
+				this.renderer.domElement
+			);
+			this.controls.maxPolarAngle = Math.PI * 0.5;
+			this.controls.minDistance = 1;
+			this.controls.maxDistance = 1500;
+			this.controls.addEventListener("change", this.render);
 
-            // 添加全局环境光
-            this.scene.add(new THREE.AmbientLight(0x404040));
+			// 添加全局环境光
+			this.scene.add(new THREE.AmbientLight(0x404040));
 
-            this.renderScene = new RenderPass(this.scene, this.camera);
+			this.renderScene = new RenderPass(this.scene, this.camera);
 
-            this.bloomPass = new UnrealBloomPass(
-                new THREE.Vector2(window.innerWidth, window.innerHeight),
-                1.5,
-                0.4,
-                0.85
-            );
-            this.bloomPass.threshold = this.params.bloomThreshold;
-            this.bloomPass.strength = this.params.bloomStrength;
-            this.bloomPass.radius = this.params.bloomRadius;
+			this.bloomPass = new UnrealBloomPass(
+				new THREE.Vector2(window.innerWidth, window.innerHeight),
+				1.5,
+				0.4,
+				0.85
+			);
+			this.bloomPass.threshold = this.params.bloomThreshold;
+			this.bloomPass.strength = this.params.bloomStrength;
+			this.bloomPass.radius = this.params.bloomRadius;
 
-            this.bloomComposer = new EffectComposer(this.renderer);
-            this.bloomComposer.renderToScreen = false;
-            this.bloomComposer.addPass(this.renderScene);
-            this.bloomComposer.addPass(this.bloomPass);
+			this.bloomComposer = new EffectComposer(this.renderer);
+			this.bloomComposer.renderToScreen = false;
+			this.bloomComposer.addPass(this.renderScene);
+			this.bloomComposer.addPass(this.bloomPass);
 
-            this.finalPass = new ShaderPass(
-                new THREE.ShaderMaterial({
-                    uniforms: {
-                        baseTexture: { value: null },
-                        bloomTexture: {
-                            value: this.bloomComposer.renderTarget2.texture,
-                        },
-                    },
-                    vertexShader: colorVertex,
-                    fragmentShader: colorFrag,
-                    defines: {},
-                }),
-                "baseTexture"
-            );
-            this.finalPass.needsSwap = true;
+			this.finalPass = new ShaderPass(
+				new THREE.ShaderMaterial({
+					uniforms: {
+						baseTexture: { value: null },
+						bloomTexture: {
+							value: this.bloomComposer.renderTarget2.texture,
+						},
+					},
+					vertexShader: colorVertex,
+					fragmentShader: colorFrag,
+					defines: {},
+				}),
+				"baseTexture"
+			);
+			this.finalPass.needsSwap = true;
 
-            this.finalComposer = new EffectComposer(this.renderer);
-            this.finalComposer.addPass(this.renderScene);
-            this.finalComposer.addPass(this.finalPass);
+			this.finalComposer = new EffectComposer(this.renderer);
+			this.finalComposer.addPass(this.renderScene);
+			this.finalComposer.addPass(this.finalPass);
 
-            // 添加点击事件
-            window.addEventListener("pointerdown", this.onPointerDown);
+			// 添加点击事件
+			window.addEventListener("pointerdown", this.onPointerDown);
 
-            // this.gui
-            //     .add(this.params, "scene", [
-            //         "Scene with Glow",
-            //         "Glow only",
-            //         "Scene only",
-            //     ])
-            //     .onChange((value) => {
-            //         switch (value) {
-            //             case "Scene with Glow":
-            //                 this.bloomComposer.renderToScreen = false;
-            //                 break;
-            //             case "Glow only":
-            //                 this.bloomComposer.renderToScreen = true;
-            //                 break;
-            //             case "Scene only":
-            //                 // nothing to do
-            //                 break;
-            //         }
+			// this.gui
+			//     .add(this.params, "scene", [
+			//         "Scene with Glow",
+			//         "Glow only",
+			//         "Scene only",
+			//     ])
+			//     .onChange((value) => {
+			//         switch (value) {
+			//             case "Scene with Glow":
+			//                 this.bloomComposer.renderToScreen = false;
+			//                 break;
+			//             case "Glow only":
+			//                 this.bloomComposer.renderToScreen = true;
+			//                 break;
+			//             case "Scene only":
+			//                 // nothing to do
+			//                 break;
+			//         }
 
-            //         this.render();
-            //     });
+			//         this.render();
+			//     });
 
-            // this.folder = this.gui.addFolder("Bloom Parameters");
+			// this.folder = this.gui.addFolder("Bloom Parameters");
 
-            // this.folder
-            //     .add(this.params, "exposure", 0.1, 2)
-            //     .onChange((value) => {
-            //         this.renderer.toneMappingExposure = Math.pow(value, 4.0);
-            //         this.render();
-            //     });
+			// this.folder
+			//     .add(this.params, "exposure", 0.1, 2)
+			//     .onChange((value) => {
+			//         this.renderer.toneMappingExposure = Math.pow(value, 4.0);
+			//         this.render();
+			//     });
 
-            // this.folder
-            //     .add(this.params, "bloomThreshold", 0.0, 1.0)
-            //     .onChange((value) => {
-            //         this.bloomPass.threshold = Number(value);
-            //         this.render();
-            //     });
+			// this.folder
+			//     .add(this.params, "bloomThreshold", 0.0, 1.0)
+			//     .onChange((value) => {
+			//         this.bloomPass.threshold = Number(value);
+			//         this.render();
+			//     });
 
-            // this.folder
-            //     .add(this.params, "bloomStrength", 0.0, 10.0)
-            //     .onChange((value) => {
-            //         this.bloomPass.strength = Number(value);
-            //         this.render();
-            //     });
+			// this.folder
+			//     .add(this.params, "bloomStrength", 0.0, 10.0)
+			//     .onChange((value) => {
+			//         this.bloomPass.strength = Number(value);
+			//         this.render();
+			//     });
 
-            // this.folder
-            //     .add(this.params, "bloomRadius", 0.0, 1.0)
-            //     .step(0.01)
-            //     .onChange((value) => {
-            //         this.bloomPass.radius = Number(value);
-            //         this.render();
-            //     });
+			// this.folder
+			//     .add(this.params, "bloomRadius", 0.0, 1.0)
+			//     .step(0.01)
+			//     .onChange((value) => {
+			//         this.bloomPass.radius = Number(value);
+			//         this.render();
+			//     });
 
-            // 设置场景
-            this.setupScene();
-            // 循环动画
-            this.animate();
-            // 自动缩放
+			// 设置场景
+			this.setupScene();
+			// 循环动画
+			this.animate();
+			// 自动缩放
 
-            window.addEventListener("resize", this.onWindowResize);
-            this.onWindowResize();
-        },
-        onPointerDown(event) {
-            this.mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
-            this.mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
+			window.addEventListener("resize", this.onWindowResize);
+			this.onWindowResize();
+		},
+		onPointerDown(event) {
+			this.mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
+			this.mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
 
-            this.raycaster.setFromCamera(this.mouse, this.camera);
-            this.intersects = this.raycaster.intersectObjects(
-                this.group.children,
-                false
-            );
-            if (this.intersects.length > 0) {
-                const object = this.intersects[0].object;
-                gsap.to(object.scale, {
-                    x: 0,
-                    y: 0,
-                    z: 0,
-                    onUpdate: () => {
-                        this.render();
-                    },
-                });
-                object.layers.toggle(this.BLOOM_SCENE);
-                this.render();
-            }
-        },
-        onWindowResize(event) {
-            const width = window.innerWidth;
-            const height = window.innerHeight;
+			this.raycaster.setFromCamera(this.mouse, this.camera);
+			this.intersects = this.raycaster.intersectObjects(
+				this.group.children,
+				false
+			);
+			if (this.intersects.length > 0) {
+				const object = this.intersects[0].object;
+				gsap.to(object.scale, {
+					x: 0,
+					y: 0,
+					z: 0,
+					onUpdate: () => {
+						this.render();
+					},
+				});
+				object.layers.toggle(this.BLOOM_SCENE);
+				this.render();
+			}
+		},
+		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);
+			this.renderer.setSize(width, height);
 
-            this.bloomComposer.setSize(width, height);
-            this.finalComposer.setSize(width, height);
+			this.bloomComposer.setSize(width, height);
+			this.finalComposer.setSize(width, height);
 
-            this.render();
-        },
-        setupScene() {
-            this.scene.traverse(this.disposeMaterial);
-            this.scene.children.length = 0;
+			this.render();
+		},
+		setupScene() {
+			this.scene.traverse(this.disposeMaterial);
+			this.scene.children.length = 0;
 
-            const geometry = new THREE.IcosahedronGeometry(1, 15);
-            this.group = new THREE.Group();
-            for (let ii = 0; ii < 2; ii++) {
-                pos1024.origin.forEach((item, index) => {
-                    item.forEach((t, i) => {
-                        if (t == 0) {
-                            const color = new THREE.Color();
-                            color.setHSL(
-                                Math.random(),
-                                0.7,
-                                Math.random() * 0.2 + 0.05
-                            );
-                            const material = new THREE.MeshBasicMaterial({
-                                color: color,
-                            });
-                            const sphere = new THREE.Mesh(geometry, material);
+			const geometry = new THREE.IcosahedronGeometry(1, 15);
+			this.group = new THREE.Group();
+			for (let ii = 0; ii < 2; ii++) {
+				pos1024.origin.forEach((item, index) => {
+					item.forEach((t, i) => {
+						if (t == 0) {
+							const color = new THREE.Color();
+							color.setHSL(
+								Math.random(),
+								0.7,
+								Math.random() * 0.2 + 0.05
+							);
+							const material = new THREE.MeshBasicMaterial({
+								color: color,
+							});
+							const sphere = new THREE.Mesh(geometry, material);
 
-                            sphere.position.x = i * 10 - (item.length / 2) * 10;
-                            sphere.position.y =
-                                -index * 10 + (pos1024.origin.length / 2) * 10;
-                            sphere.position.z = ii * 5;
-                            // sphere.position
-                            //     .normalize()
-                            //     .multiplyScalar(Math.random() * 4.0 + 2);
-                            sphere.scale.setScalar(Math.random() * 4 + 3);
-                            this.scene.add(sphere);
+							sphere.position.x = i * 10 - (item.length / 2) * 10;
+							sphere.position.y =
+								-index * 10 + (pos1024.origin.length / 2) * 10;
+							sphere.position.z = ii * 5;
+							// sphere.position
+							//     .normalize()
+							//     .multiplyScalar(Math.random() * 4.0 + 2);
+							sphere.scale.setScalar(Math.random() * 4 + 3);
+							this.scene.add(sphere);
 
-                            // if (Math.random() < 0.25)
-                            sphere.layers.enable(this.BLOOM_SCENE);
+							// if (Math.random() < 0.25)
+							sphere.layers.enable(this.BLOOM_SCENE);
 
-                            this.group.add(sphere);
-                        }
-                    });
-                });
-            }
+							this.group.add(sphere);
+						}
+					});
+				});
+			}
 
-            // for (let i = 0; i < this.remaining; i++) {
-            //     const color = new THREE.Color();
-            //     color.setHSL(Math.random(), 0.7, Math.random() * 0.2 + 0.05);
+			// for (let i = 0; i < this.remaining; i++) {
+			//     const color = new THREE.Color();
+			//     color.setHSL(Math.random(), 0.7, Math.random() * 0.2 + 0.05);
 
-            //     const material = new THREE.MeshBasicMaterial({ color: color });
-            //     const sphere = new THREE.Mesh(geometry, material);
-            //     sphere.position.x = Math.random() * 30 - 15;
-            //     sphere.position.y = Math.random() * 30 - 15;
-            //     sphere.position.z = Math.random() * 30 - 15;
-            //     sphere.position
-            //         .normalize()
-            //         .multiplyScalar(Math.random() * 5.0 + 2.5);
-            //     sphere.scale.setScalar(Math.random() * Math.random() + 0.5);
-            //     this.scene.add(sphere);
+			//     const material = new THREE.MeshBasicMaterial({ color: color });
+			//     const sphere = new THREE.Mesh(geometry, material);
+			//     sphere.position.x = Math.random() * 30 - 15;
+			//     sphere.position.y = Math.random() * 30 - 15;
+			//     sphere.position.z = Math.random() * 30 - 15;
+			//     sphere.position
+			//         .normalize()
+			//         .multiplyScalar(Math.random() * 5.0 + 2.5);
+			//     sphere.scale.setScalar(Math.random() * Math.random() + 0.5);
+			//     this.scene.add(sphere);
 
-            //     // if (Math.random() < 0.25)
-            //     sphere.layers.enable(this.BLOOM_SCENE);
+			//     // if (Math.random() < 0.25)
+			//     sphere.layers.enable(this.BLOOM_SCENE);
 
-            //     this.group.add(sphere);
-            // }
-            this.scene.add(this.group);
-            this.render();
-        },
-        disposeMaterial(obj) {
-            if (obj.material) {
-                obj.material.dispose();
-            }
-        },
-        animate() {
-            requestAnimationFrame(this.animate);
-            this.render();
-        },
-        render() {
-            switch (this.params.scene) {
-                case "Scene only":
-                    this.renderer.render(this.scene, this.camera);
-                    break;
-                case "Glow only":
-                    this.renderBloom(false);
-                    break;
-                case "Scene with Glow":
-                default:
-                    // render scene with bloom
-                    this.renderBloom(true);
+			//     this.group.add(sphere);
+			// }
+			this.scene.add(this.group);
+			this.render();
+		},
+		disposeMaterial(obj) {
+			if (obj.material) {
+				obj.material.dispose();
+			}
+		},
+		animate() {
+			requestAnimationFrame(this.animate);
+			this.render();
+		},
+		render() {
+			switch (this.params.scene) {
+				case "Scene only":
+					this.renderer.render(this.scene, this.camera);
+					break;
+				case "Glow only":
+					this.renderBloom(false);
+					break;
+				case "Scene with Glow":
+				default:
+					// render scene with bloom
+					this.renderBloom(true);
 
-                    // render the entire scene, then render bloom scene on top
-                    this.finalComposer.render();
-                    break;
-            }
-            // this.renderer.render(this.scene, this.camera);
-        },
-        renderBloom(mask) {
-            if (mask === true) {
-                this.scene.traverse(this.darkenNonBloomed);
-                this.bloomComposer.render();
-                this.scene.traverse(this.restoreMaterial);
-            } else {
-                this.camera.layers.set(this.BLOOM_SCENE);
-                this.bloomComposer.render();
-                this.camera.layers.set(this.ENTIRE_SCENE);
-            }
-        },
-        darkenNonBloomed(obj) {
-            if (obj.isMesh && this.bloomLayer.test(obj.layers) === false) {
-                this.materials[obj.uuid] = obj.material;
-                obj.material = this.darkMaterial;
-            }
-        },
-        restoreMaterial(obj) {
-            if (this.materials[obj.uuid]) {
-                obj.material = this.materials[obj.uuid];
-                delete this.materials[obj.uuid];
-            }
-        },
-        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,
-                });
+					// render the entire scene, then render bloom scene on top
+					this.finalComposer.render();
+					break;
+			}
+			// this.renderer.render(this.scene, this.camera);
+		},
+		renderBloom(mask) {
+			if (mask === true) {
+				this.scene.traverse(this.darkenNonBloomed);
+				this.bloomComposer.render();
+				this.scene.traverse(this.restoreMaterial);
+			} else {
+				this.camera.layers.set(this.BLOOM_SCENE);
+				this.bloomComposer.render();
+				this.camera.layers.set(this.ENTIRE_SCENE);
+			}
+		},
+		darkenNonBloomed(obj) {
+			if (obj.isMesh && this.bloomLayer.test(obj.layers) === false) {
+				this.materials[obj.uuid] = obj.material;
+				obj.material = this.darkMaterial;
+			}
+		},
+		restoreMaterial(obj) {
+			if (this.materials[obj.uuid]) {
+				obj.material = this.materials[obj.uuid];
+				delete this.materials[obj.uuid];
+			}
+		},
+		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();
-                        },
-                    }
-                );
-            });
+				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++;
-                            }
-                        });
-                    });
-                }
+			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++) {
+				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,
-                });
-            }
+			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);
-            //     },
-            // });
-        },
-    },
+			// 光闪烁
+			// 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);
-    }
+	width: 100vw;
+	height: 100vh;
+	position: relative;
+	z-index: 0;
+	.select-btn {
+		// background-color: #fff;
+		.paCenterBottom(2%,50%,auto,10);
+	}
 }
 </style>
diff --git a/src/page/index/HandTrack/index.vue b/src/page/index/HandTrack/index.vue
index 2ee0383..85a997c 100644
--- a/src/page/index/HandTrack/index.vue
+++ b/src/page/index/HandTrack/index.vue
@@ -41,7 +41,7 @@
 		</div>
 
 		<!-- canvas -->
-		<canvas class="canvas" ref="canvas"></canvas>
+		<div class="canvas-container" ref="container"></div>
 
 		<!-- hand -->
 		<div
@@ -88,10 +88,22 @@ export default {
 		this.video = this.$refs.myVideo;
 		this.canvas = this.$refs.canvas;
 
-		this.initTHREELayer();
 		this.checkUserDeviceSuitable();
 	},
 	methods: {
+		// 获取ios版本号
+		getIOSVersion() {
+			let str = navigator.userAgent.toLowerCase();
+			let ver = str.match(/cpu iphone os (.*?) like mac os/);
+			if (!ver) {
+				console.log("请在Ios系统中打开");
+			} else {
+				console.log(
+					"你当前的Ios系统版本为：" + ver[1].replace(/_/g, ".")
+				);
+				return ver[1].replace(/_/g, ".");
+			}
+		},
 		// 检测用户手机是否兼容
 		// > 14.3 ios ok
 		checkUserDeviceSuitable() {
@@ -271,14 +283,17 @@ export default {
 
 			this.videoRealSize = handledSize;
 
+			// 初始化three
+			this.initTHREELayer();
+
 			console.log("Got stream with constraints:", constraints);
 			console.log(`Using video device: ${videoTracks[0].label}`);
 			console.log("Got stream size:", videoTracks);
 			console.log("Got stream size:", streamSize);
 			console.log(
 				"Got streamHandled size:",
-				window.innerHeight
-				// handledSize
+				window.innerHeight,
+				handledSize
 			);
 
 			this.video.srcObject = stream;
@@ -296,10 +311,6 @@ export default {
 		responseVideoAndCanvas(size) {
 			this.video.width = window.innerWidth;
 			this.video.height = window.innerHeight;
-			// init canvcas
-			this.ctx = this.canvas.getContext("2d");
-			this.canvas.width = window.innerWidth;
-			this.canvas.height = window.innerHeight;
 		},
 		// 获得stream大小
 		GetStreamDimensions(stream) {
@@ -396,7 +407,7 @@ export default {
 					cursorPos = this.ExponentialCoordinateAverage(
 						this.ComputeCursorPositionFromCoordinates(e.coordinates)
 					);
-					console.log(cursorPos);
+					// console.log(cursorPos);
 				}
 
 				// console.log(e.type);
@@ -425,19 +436,6 @@ export default {
 				}
 			});
 		},
-		// 获取ios版本号
-		getIOSVersion() {
-			let str = navigator.userAgent.toLowerCase();
-			let ver = str.match(/cpu iphone os (.*?) like mac os/);
-			if (!ver) {
-				console.log("请在Ios系统中打开");
-			} else {
-				console.log(
-					"你当前的Ios系统版本为：" + ver[1].replace(/_/g, ".")
-				);
-				return ver[1].replace(/_/g, ".");
-			}
-		},
 		// 计算坐标值平均数
 		ExponentialMovingAverage(value, alpha) {
 			if (this.curValue_ === undefined || this.curValue_ === null) {
@@ -482,21 +480,40 @@ export default {
 		},
 		// init THREELayer
 		initTHREELayer() {
-			this.camera_ = new THREE.OrthographicCamera(
-				0,
-				this.videoRealSize.width,
-				0,
-				this.videoRealSize.height,
-				0,
+			this.container = this.$refs.container;
+			this.camera_ = new THREE.PerspectiveCamera(
+				45,
+				window.innerWidth / window.innerHeight,
+				0.1,
 				1000
 			);
+
+			// const distance =
+			// 	this.videoRealSize.height /
+			// 	(2 * Math.tan((this.camera_.fov * Math.PI) / 360));
+			// this.camera_.up.set(0, -1, 0);
+			// this.camera_.position.set(
+			// 	this.videoRealSize.width / 2,
+			// 	this.videoRealSize.height / 2,
+			// 	-distance
+			// );
+			// this.camera_.lookAt(
+			// 	this.videoRealSize.width,
+			// 	this.videoRealSize.height / 2,
+			// 	0
+			// );
+
+			this.camera_.position.set(0, 0, 1000);
+			this.camera_.lookAt(0, 0, 0);
+
+			this.scene_ = new THREE.Scene();
+
 			this.renderer_ = new THREE.WebGLRenderer({
 				alpha: true,
 				powerPreference: "high-performance",
 				failIfMajorPerformanceCaveat: false,
 				antialias: true,
 			});
-			this.renderer_.domElement = this.canvas;
 			this.renderer_.debug.checkShaderErrors = false;
 			this.renderer_.setSize(
 				this.videoRealSize.width,
@@ -505,12 +522,60 @@ export default {
 			this.renderer_.setPixelRatio(window.devicePixelRatio);
 			this.renderer_.setClearColor(0x000000, 0.0);
 			this.renderer_.autoClear = true;
-			this.scene_ = new THREE.Scene();
+			this.renderer_.domElement.id = "canvas";
+			this.container.appendChild(this.renderer_.domElement);
+			this.renderer_.domElement.width = this.video.width;
+			this.renderer_.domElement.height = this.video.height;
+
+			// this.animate();
+			this.onWindowResize();
+			window.addEventListener(
+				"resize",
+				() => {
+					this.onWindowResize();
+				},
+				false
+			);
+		},
+		onWindowResize(event) {
+			this.camera_.aspect = window.innerWidth / window.innerHeight;
+			this.camera_.updateProjectionMatrix();
+			this.renderer_.setSize(window.innerWidth, window.innerHeight);
+		},
+		addTestBall() {
+			//light
+			var light = new THREE.DirectionalLight(0xffffff);
+			var light2 = new THREE.DirectionalLight(0xffffff);
+			light.position.set(200, 0, 200);
+			light2.position.set(-200, 0, 200);
+			this.scene_.add(light);
+
+			this.group3D = new THREE.Object3D();
+			//放入些mesh做实验
+			var material = new THREE.MeshLambertMaterial({
+				color: "#2194ce",
+			});
+			// var cubeGeometry = new THREE.CubeGeometry(100, 100, 100);
+			var geo2 = new THREE.SphereGeometry(40, 40, 40);
+			for (var i = 0; i < 50; i++) {
+				var spr = new THREE.Mesh(geo2, material);
+				spr.position.set(
+					Math.random() * 800 - 400,
+					Math.random() * 800 - 400,
+					Math.random() * 800 - 400
+				);
+				this.group3D.add(spr);
+			}
+
+			this.scene_.add(this.group3D);
+
+			this.ambientLight = new THREE.AmbientLight(0x8a7e7e, 0.2);
+			this.scene_.add(this.ambientLight);
 		},
 		// draw pointer
 		drawPoint(x, y) {
 			if (!this.meshAdded) {
-				this.geo_ = new THREE.RingGeometry(0, 8, 30);
+				this.geo_ = new THREE.RingGeometry(0, 10, 32);
 				this.mat_ = new THREE.MeshBasicMaterial({
 					color: "red",
 					side: THREE.DoubleSide,
@@ -518,12 +583,17 @@ export default {
 				this.mesh_ = new THREE.Mesh(this.geo_, this.mat_);
 				this.scene_.add(this.mesh_);
 				this.meshAdded = true;
+				console.log("three mesh added");
 			}
 
 			this.mesh_.position.x = x * this.videoRealSize.width;
 			this.mesh_.position.y = y * this.videoRealSize.height;
 			this.mesh_.position.z = 0;
 		},
+		animate() {
+			requestAnimationFrame(this.animate);
+			this.Render();
+		},
 		// THREE canvas render
 		Render() {
 			this.renderer_.render(this.scene_, this.camera_);
@@ -604,7 +674,7 @@ export default {
 			}
 		}
 	}
-	.canvas {
+	.canvas-container {
 		.paLayout(50%,50%,auto,100%,100);
 		transform: translate(-50%, -50%);
 		pointer-events: none;