diff --git a/src/views/AppThreeMap.vue b/src/views/AppThreeMap.vue index 442927c..3addd8e 100644 --- a/src/views/AppThreeMap.vue +++ b/src/views/AppThreeMap.vue @@ -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() {