From ad36d7964d99f69ce299a33130920bdf3a5a1197 Mon Sep 17 00:00:00 2001
From: ZhangXianQiang <1135831638@qq.com>
Date: 星期四, 18 四月 2024 10:08:48 +0800
Subject: [PATCH] feat:添加射线检测
---
src/views/screen/components/screen-map-three/experience/world/map.js | 66 +++++++++++++++++++++++++++++++--
1 files changed, 62 insertions(+), 4 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 ab8c988..00cc026 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,14 +4,21 @@
import textureMapImage from '@/assets/map/texture/gz-map.jpg';
import textureMapFxImage from '@/assets/map/texture/gz-map-fx.jpg';
+import { BufferGeometryUtils } from 'three/examples/jsm/utils/BufferGeometryUtils.js';
+
+import gsap from 'gsap';
// 鍦板浘娣卞害
const MAP_DEPTH = 0.2;
const projection = d3.geoMercator().center([104.779307, 29.33924]).translate([0, 0, 0]);
+
+const raycaster = new THREE.Raycaster();
+
export default class Map {
constructor(experience) {
this.experience = experience;
this.scene = this.experience.scene;
+ this.camera = this.experience.camera;
this.material = null;
this.textureLoader = new THREE.TextureLoader();
this.setTexture();
@@ -59,7 +66,6 @@
// 澶氫釜鎯呭喌
// console.log(feature.geometry.type);
if (feature.geometry.type === "MultiPolygon") {
- console.log(feature.geometry.coordinates);
feature.geometry.coordinates.forEach((coordinate) => {
coordinate.forEach((rows) => {
const line = this.drawBoundary(rows);
@@ -79,14 +85,19 @@
province.add(mesh);
});
}
+ // 鍚堝苟鎴愪竴涓猰esh
+ // const mergedGeometry = BufferGeometryUtils.mergeGeometries(province.children);
+
this.map.add(province);
});
this.map.position.set(1, 1, -1.5);
this.map.scale.set(10, 10, 10);
this.map.rotation.set(THREE.MathUtils.degToRad(-90), 0, THREE.MathUtils.degToRad(20));
- this.container = new THREE.Object3D();
- this.container.add(this.map);
- this.scene.add(this.container);
+ // this.container = new THREE.Object3D();
+ // this.container.add(this.map);
+ this.scene.add(this.map);
+ console.log(this.map);
+ this.setMouseEvent();
}
/**
@@ -136,4 +147,51 @@
this.sideMaterial,
]);
}
+
+
+ setMouseEvent() {
+ this.mouseEvent = this.handleEvent.bind(this);
+ // this.experience.canvas.addEventListener("mousemove", this.throttle(this.mouseEvent,100));
+ this.experience.canvas.addEventListener("mousemove", this.mouseEvent);
+ }
+
+ removeMouseEvent() {
+ this.experience.canvas.removeEventListener("mousemove", this.mouseEvent);
+ }
+
+ handleEvent(e) {
+ // console.log(this);
+ // return;
+ if (this.map) {
+ const mouse = new THREE.Vector2();
+ mouse.x = (e.clientX / window.innerWidth) * 2 - 1;
+ mouse.y = -(e.clientY / window.innerHeight) * 2 + 1;
+ raycaster.setFromCamera(mouse, this.camera.instance);
+ const intersects = raycaster.intersectObjects(this.map.children, true);
+ if (intersects.length) {
+ intersects.forEach((item) => {
+ if (item.object)
+ if (item.object.meshName === 'province') {
+ console.log(item.object);
+ this.animation(item.object);
+ }
+ });
+ }
+ }
+ }
+
+ throttle(callback, delay) {
+ let lastCall = 0;
+ return function () {
+ let now = new Date().getTime();
+ if (now - lastCall >= delay) {
+ lastCall = now;
+ callback.apply(null, arguments);
+ }
+ };
+ }
+
+ animation(mesh) {
+ console.log(mesh);
+ }
}
\ No newline at end of file
--
Gitblit v1.8.0