From 1edfee5cc92ade87c31c3dd0a88f3bc6b48db568 Mon Sep 17 00:00:00 2001
From: ZhangXianQiang <1135831638@qq.com>
Date: 星期四, 18 四月 2024 17:12:16 +0800
Subject: [PATCH] feat:入场动画
---
src/views/screen/components/screen-map-three/experience/world/map.js | 46 ++++++++++++----------------------------------
1 files changed, 12 insertions(+), 34 deletions(-)
diff --git a/src/views/screen/components/screen-map-three/experience/world/map.js b/src/views/screen/components/screen-map-three/experience/world/map.js
index d11c80b..2d2a299 100644
--- a/src/views/screen/components/screen-map-three/experience/world/map.js
+++ b/src/views/screen/components/screen-map-three/experience/world/map.js
@@ -4,9 +4,9 @@
import textureMapImage from '@/assets/map/texture/gz-map.jpg';
import textureMapFxImage from '@/assets/map/texture/gz-map-fx.jpg';
-import { mergeGeometries } from 'three/examples/jsm/utils/BufferGeometryUtils.js';
import gsap from 'gsap';
+
// 鍦板浘娣卞害
const MAP_DEPTH = 0.2;
@@ -23,7 +23,9 @@
this.textureLoader = new THREE.TextureLoader();
this.setTexture();
this.operationData(mapData);
- this.setLineHelper();
+ setTimeout(() => {
+ this.enterAnimation();
+ }, 500);
}
setTexture() {
const textureMap = this.textureLoader.load(textureMapImage);
@@ -88,16 +90,14 @@
this.provinceMeshList.push(mesh);
});
}
- // 鍚堝苟mesh
- // const mergedGeometry = mergeGeometries(province.children,true);
province.isHover = false;
this.map.add(province);
});
this.map.position.set(1, 1, -1.5);
- this.map.scale.set(10, 10, 10);
+ this.map.scale.set(10, 10, 1);
this.map.rotation.set(THREE.MathUtils.degToRad(-90), 0, THREE.MathUtils.degToRad(20));
this.scene.add(this.map);
- console.log(this.map);
+
this.setMouseEvent();
}
@@ -152,7 +152,6 @@
setMouseEvent() {
this.mouseEvent = this.handleEvent.bind(this);
- // this.experience.canvas.addEventListener("mousemove", this.throttle(this.mouseEvent,100));
this.experience.canvas.addEventListener("mousemove", this.mouseEvent);
}
@@ -232,32 +231,11 @@
})
}
- setLineHelper() {
- const material = new THREE.LineBasicMaterial({
- color: 0x0000ff
- });
-
- const points = [];
- points.push(new THREE.Vector3(0, 0, 0));
- points.push(new THREE.Vector3(0, 0, 0));
-
- const geometry = new THREE.BufferGeometry().setFromPoints(points);
-
- this.lineHelper = new THREE.Line(geometry, material);
- console.log(this.lineHelper);
- this.scene.add(this.lineHelper);
- }
-
- updateLine(raycaster) {
- let pointArray = new Float32Array([
- raycaster.ray.origin.x,
- raycaster.ray.origin.y,
- raycaster.ray.origin.z,
- raycaster.ray.direction.x,
- raycaster.ray.direction.y,
- raycaster.ray.direction.z,
- ])
- this.lineHelper.geometry.attributes.position.array = pointArray;
- this.lineHelper.geometry.attributes.position.needsUpdate = true;
+ enterAnimation() {
+ gsap.to(this.map.scale, {
+ z: 10,
+ duration: 0.6,
+ ease: 'power1.out'
+ })
}
}
\ No newline at end of file
--
Gitblit v1.8.0