kubbo/kengee-data-screen
1
0
Fork 0
Code Pull Requests Actions Packages Projects Releases Wiki Activity

重新鼓捣地图

Browse Source
This commit is contained in:
aixianling
2024-07-04 17:58:23 +08:00
parent 335d35a16f
commit 586dd1bfb7
1 changed files with 77 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

129
src/views/AppThreeMap.vue
View File

@@ -16,6 +16,7 @@ export default {
const {$waitFor, THREE, $loadScript} = window
return $waitFor(THREE).then(() => Promise.all([
`http://10.0.97.209/presource/datascreen/js/three/js/controls/OrbitControls.js`,
// `http://10.0.97.209/presource/datascreen/js/renderers/CSS3DRenderer.js`,
].map(e => $loadScript('js', e))))
},
initMap() {
@@ -23,6 +24,7 @@ export default {
const rootEl = this.$el
const root = this
const scale = 4
const transform = (o, n, t) => new TWEEN.Tween(o).to(n, t).start();
class GeoMap {
constructor() {
@@ -33,9 +35,10 @@ export default {
this.controls = null; // 控制器
this.mapGroup = []; // 组
this.meshList = []; // 接受鼠标事件对象
this.selectObject = null; // 当前选中对象
this.selectedObject = null; // 当前选中对象
this.loopIndex = 0; // 循环标记
this.cameraPath = null; // 相机运动轨迹
this.mouse = new THREE.Vector2();
}
/**
@@ -302,7 +305,7 @@ export default {
this.renderer = new THREE.WebGLRenderer({antialias: true});
this.renderer.setPixelRatio(window.devicePixelRatio * 1);
this.renderer.sortObjects = true; // 渲染顺序
this.renderer.setClearColor('#212121');
this.renderer.setClearColor(0xffffff, 0);
this.renderer.setSize(rootEl.offsetWidth, rootEl.offsetHeight);
rootEl.appendChild(this.renderer.domElement);
@@ -337,67 +340,89 @@ export default {
* */
bindMouseEvent() {
let that = this;
const that = this, _this = this;
const raycaster = new THREE.Raycaster();
function onMouseMove(event) {
const x = (event.clientX / rootEl.offsetWidth) * 2 - 1; //标准设备横坐标
const y = -(event.clientY / rootEl.offsetHeight) * 2 + 1; //标准设备纵坐标
const standardVector = new THREE.Vector3(x, y, 0.5); //标准设备坐标
//标准设备坐标转世界坐标
const worldVector = standardVector.unproject(that.camera);
//射线投射方向单位向量(worldVector坐标减相机位置坐标)
const ray = worldVector.sub(that.camera.position).normalize();
//创建射线投射器对象
let raycaster = new THREE.Raycaster(that.camera.position, ray);
//返回射线选中的对象
let intersects = raycaster.intersectObjects(that.meshList);
if (intersects.length) {
if (intersects[0].object.parent && intersects[0].object.parent._groupType === 'areaBlock') {
if (that.selectObject !== intersects[0].object.parent) {
if (that.selectObject) {
transiform(that.selectObject.position, {
x: that.selectObject.position.x,
y: that.selectObject.position.y,
z: 0
}, 100);
transiform(intersects[0].object.parent.position, {
x: intersects[0].object.parent.position.x,
y: intersects[0].object.parent.position.y,
z: 0.8
}, 100);
that.selectObject = intersects[0].object.parent;
} else {
transiform(intersects[0].object.parent.position, {
x: intersects[0].object.parent.position.x,
y: intersects[0].object.parent.position.y,
z: 0.8
}, 100);
that.selectObject = intersects[0].object.parent;
}
const {top, left, width, height} = rootEl.getBoundingClientRect();
// const clientX = event.clientX - left
// const clientY = event.clientY - top
that.mouse.x = (event.clientX / width) * 2 - 1; //标准设备横坐标
that.mouse.y = -(event.clientY / height) * 2 + 1; //标准设备纵坐标
// const standardVector = new THREE.Vector3(x, y, 0.5); //标准设备坐标
// //标准设备坐标转世界坐标
// const worldVector = standardVector.unproject(that.camera);
// //射线投射方向单位向量(worldVector坐标减相机位置坐标)
// const ray = worldVector.sub(that.camera.position).normalize();
// //创建射线投射器对象
// let raycaster = new THREE.Raycaster(that.camera.position, ray);
// //返回射线选中的对象
// let intersects = raycaster.intersectObjects(that.meshList);
// if (intersects.length) {
// if (intersects[0].object.parent && intersects[0].object.parent._groupType === 'areaBlock') {
// if (that.selectObject !== intersects[0].object.parent) {
// if (that.selectObject) {
// transiform(that.selectObject.position, {
// x: that.selectObject.position.x,
// y: that.selectObject.position.y,
// z: 0
// }, 100);
// transiform(intersects[0].object.parent.position, {
// x: intersects[0].object.parent.position.x,
// y: intersects[0].object.parent.position.y,
// z: 0.8
// }, 100);
// that.selectObject = intersects[0].object.parent;
// } else {
// transiform(intersects[0].object.parent.position, {
// x: intersects[0].object.parent.position.x,
// y: intersects[0].object.parent.position.y,
// z: 0.8
// }, 100);
// that.selectObject = intersects[0].object.parent;
// }
// }
// }
// }
}
function onPointerMove() {
if (_this.selectedObject) {
_this.selectedObject.material.color.set(0xffffff);
_this.selectedObject = null;
}
if (raycaster) {
const intersects = raycaster.intersectObject(_this.markers);
// console.log('select group', intersects)
if (intersects.length > 0) {
const res = intersects.filter(function (res) {
return res && res.object;
})[intersects.length - 1];
if (res && res.object) {
_this.selectedObject = res.object;
_this.selectedObject.material.color.set('#f00');
}
}
}
}
function transiform(o, n, t) {
new TWEEN.Tween(o).to(n, t).start();
}
const onClick = evt => {
// 计算鼠标位置
const mouseX = (evt.clientX / window.innerWidth) * 2 - 1;
const mouseY = -(evt.clientY / window.innerHeight) * 2 + 1;
// 创建一个射线投射器
const raycaster = new THREE.Raycaster();
raycaster.setFromCamera(new THREE.Vector2(mouseX, mouseY), this.camera);
const marker = this.markers.find(e => raycaster.intersectObject(e).length > 0)
const {$glob} = window
this.$storeBoard.search.storeCode = marker.data?.storeCode
$glob.group = '9f299712-5549-413b-a93b-7c3e3b5bfadb'
raycaster.setFromCamera(this.mouse, this.camera);
console.log(raycaster.intersectObject(this.markers, true))
const marker = this.markers.find(e => raycaster.intersectObject(e, true).length > 0)
if (marker) {
console.log("选取的点:", marker)
const {$glob} = window
root.$storeBoard.search.storeCode = marker.data?.storeCode
$glob.group = '9f299712-5549-413b-a93b-7c3e3b5bfadb'
}
}
window.addEventListener('mousemove', onMouseMove, false);
window.addEventListener('click', onClick, false);
// rootEl.addEventListener('pointermove', onPointerMove);
rootEl.addEventListener('click', onClick);
}
makeGround() {