diff --git a/src/view/park/Point.js b/src/view/park/Point.js new file mode 100644 index 0000000..0e0a7fd --- /dev/null +++ b/src/view/park/Point.js @@ -0,0 +1,100 @@ +import * as THREE from 'three' +import gsap from 'gsap' + +export default class Point extends THREE.Object3D{ + #point + #linePoints + #line + #popover + #timeLine=gsap.timeline() + constructor (position,popover){ + super() + this.#linePoints=[ + [115*position.lan, 0.7, 115*position.lng], + [115*(position.lan -0.01), 6, 115*position.lng], + [115*(position.lan -0.2), 6, 115*position.lng], + ] + this.#popover=popover + this.refesh() + + this.#timeLine=gsap.timeline() + this.#timeLine.pause() + var line1={x:this.#linePoints[0][0],y:this.#linePoints[0][1]} + this.#timeLine.to(line1,{x:this.#linePoints[1][0],y:this.#linePoints[1][1], duration:0.3,onUpdate:()=>{ + this.#line.geometry.setAttribute("position",new THREE.Float32BufferAttribute([ + ...this.#linePoints[0], + line1.x,line1.y,this.#linePoints[1][2] + ],3)) + }}) + var line2={x:this.#linePoints[1][0]} + this.#timeLine.to(line2,{x:this.#linePoints[2][0], duration:0.7,onUpdate:()=>{ + this.#line.geometry.setAttribute("position",new THREE.Float32BufferAttribute([ + ...this.#linePoints[0], + ...this.#linePoints[1], + line2.x,this.#linePoints[2][1],this.#linePoints[2][2] + ],3)) + },onComplete:()=>{ + this.#popover.position.set(...this.#linePoints[2]) + this.#popover.visible=true + }}) + } + #update(){ + const geometry = new THREE.SphereGeometry( 0.7, 20, 20 ); + const material = new THREE.MeshPhysicalMaterial( { + clearcoat: 1.0, + clearcoatRoughness: 0.4, + metalness: 0.8, + roughness: 0.5, + color: 0x69E7FC, + emissive:0x24BBD4, + flatShading:false, + normalScale: new THREE.Vector2( 0.15, 0.15 ), + }); + this.#point=new THREE.Mesh(geometry, material) + this.#point.position.set(...this.#linePoints[0]) + this.add(this.#point)//添加模型 + //线 + var lineGeometry=new THREE.BufferGeometry() + // lineGeometry.setAttribute('position',new THREE.Float32BufferAttribute([ + // ...this.#linePoints[0], + // ...this.#linePoints[1], + // ...this.#linePoints[2], + // ],3)) + var lineMaterial=new THREE.LineBasicMaterial() + this.#line=new THREE.Line(lineGeometry,lineMaterial) + // this.#line.visible=false + this.add(this.#line) + } + refesh(){ + this.dispose() + this.#update() + } + dispose(){ + for(var {geometry,material} of this.children){ + geometry.dispose() + material.dispose() + } + while (this.children[0]){ + this.remove(this.children[0]) + } + } + async show(){ + await this.#timeLine.play() + } + hide(){ + this.#popover.visible=false + this.#timeLine.reverse(null, false) + } + out(){ + this.#point.scale.set(1,1,1) + } + hover(){ + this.#point.scale.set(1.4,1.4,1.4) + } + get mesh(){ + return this.#point + } + get time(){ + return this.#timeLine + } +} \ No newline at end of file diff --git a/src/view/park/center.vue b/src/view/park/center.vue index a167bf9..dd524cb 100644 --- a/src/view/park/center.vue +++ b/src/view/park/center.vue @@ -64,10 +64,10 @@ } &>.mapCSS2D{ pointer-events: none; + z-index: 30; } .model{ &>div{ - opacity:0; position:absolute; bottom:0; right:calc(-289px/2); @@ -218,7 +218,7 @@ - +
@@ -229,7 +229,7 @@ 3
- + @@ -252,7 +252,7 @@ import { nextTick, onMounted, reactive, ref, resolveTransitionHooks, shallowRef, import yuanmou from '@/assets/map/yuanmou.json' import {SVGToBase64} from 'black-knight/lib/config/tools' import {dScrollBoard} from 'black-knight/lib/components' -import { Thumbs } from 'swiper'; +import Point from './Point' var time_line=gsap.timeline() time_line.pause() @@ -276,21 +276,21 @@ import { Thumbs } from 'swiper'; var map=ref(); var mapCSS2D=ref() - var scene,renderer,camera,modalRenderer; + var scene,renderer,camera,modalRenderer,popover; var raycaster= new THREE.Raycaster();//鼠标移动点 var group=new THREE.Group() var names=[] var labels=[] - var items={select:null,list:[]} + var items={select:null,show:null,list:[]} var center=[101.863986 -0.02,25.776215 -0.01] var region=reactive([ {name:"羊街镇",lan:101.9301474,lng:26.0574059}, {name:"老城乡",lan:101.8811474,lng:25.9254059}, + {name:"凉山乡",lan:101.972559,lng:25.81227}, {name:"元谋镇",lan:101.8701474,lng:25.8154059}, {name:"平甸乡",lan:101.7647297,lng:25.7918077}, {name:"新华乡",lan:101.6910768,lng:25.7798770}, {name:"物茂乡",lan:101.7810768,lng:25.6308770}, - {name:"凉山乡",lan:101.972559,lng:25.81227}, {name:"黄瓜园镇",lan:101.8653983,lng:25.7235168}, {name:"江边乡",lan:101.9035691,lng:25.581815}, {name:"姜驿乡",lan:101.9960739,lng:25.500477}, @@ -302,9 +302,11 @@ import { Thumbs } from 'swiper'; renderer.setPixelRatio(window.devicePixelRatio); renderer.setSize(map.value.clientWidth, map.value.clientHeight) + modalRenderer=new CSS2DRenderer({element: mapCSS2D.value}) + modalRenderer.setSize(map.value.clientWidth, map.value.clientHeight) + camera = new THREE.PerspectiveCamera(40, map.value.clientWidth / map.value.clientHeight, 10, 1000) camera.position.set(0, 100, 90) - window.c=camera var directionalLight = new THREE.DirectionalLight(0xffffff, 0.6); directionalLight.position.set(0, 0, 10).normalize(); @@ -316,8 +318,13 @@ import { Thumbs } from 'swiper'; group.scale.set(115,115,1) group.rotation.x=-Math.PI/2 + //数据展示弹框 + popover = new CSS2DObject(model.value) + popover.position.set(-10,7,0) + popover.visible=false + scene.add(popover) + var controls = new MapControls(camera, map.value) - // controls.enableRotate=false controls.maxPolarAngle=Math.PI/2 controls.minPolarAngle=0 } @@ -379,14 +386,11 @@ import { Thumbs } from 'swiper'; labels.push(mesh) mesh.renderOrder=6 mesh.position.set(115*(-center[0]+v.lan),1.5,115*(-center[1]+v.lng)) - watch(offset,n=>{ - mesh.position.set(115*(-center[0]+v.lan +n.x/1000),1.5,115*(-center[1]+v.lng +n.y/1000)) - }) mesh.rotation.x=-Math.PI/6 - time_line.to(material,{opacity:1, duration:1,onStart(){ + time_line.to(material,{opacity:1, duration:0.5,delay:0.2,onStart(){ scene.add(mesh) - }}) + }},'-=0.2') resolve() }) @@ -409,9 +413,9 @@ import { Thumbs } from 'swiper'; adsMesh.position.set(115*(-center[0]+v.lan),1.5,115*(-center[1]+v.lng +0.03)) adsMesh.rotation.x=-Math.PI/8 - time_line.to(adsMaterial,{opacity:1, duration:1,onStart(){ + time_line.to(adsMaterial,{opacity:1, duration:0.5,onStart(){ scene.add(adsMesh) - }},"-=1") + }},"-=0.7") result() }) @@ -643,44 +647,21 @@ import { Thumbs } from 'swiper'; }) } function addPoint(){ - const geometry = new THREE.SphereGeometry( 0.7, 20, 20 ); - let material = new THREE.MeshPhysicalMaterial( { - clearcoat: 1.0, - clearcoatRoughness: 0.4, - metalness: 0.8, - roughness: 0.5, - color: 0x69E7FC, - emissive:0x24BBD4, - flatShading:false, - normalScale: new THREE.Vector2( 0.15, 0.15 ), - }); - var mesh=new THREE.Mesh(geometry, material) - mesh.name="点" - mesh.position.set(0,0.7,0) - scene.add(mesh) - items.list.push(mesh) - - modalRenderer=new CSS2DRenderer({element: mapCSS2D.value}) - modalRenderer.setSize(map.value.clientWidth, map.value.clientHeight) - - var demo=new CSS2DObject(model.value) - demo.position.set(-10,7,0) - scene.add(demo) - - + var point=new Point({lan:-center[0]+101.7877297,lng:-center[1]+25.7918077}, popover) + scene.add(point) + items.list.push(point.mesh) + + var point=new Point({lan:-center[0]+101.8077297,lng:-center[1]+25.9018077}, popover) + scene.add(point) + items.list.push(point.mesh) } + function render(){ renderer.render(scene, camera); modalRenderer.render(scene, camera); requestAnimationFrame(render) - var z=Math.sqrt(Math.pow(camera.position.x,2)+Math.pow(camera.position.z,2)) - // var h=Math.tan(camera.position.z/camera.position.x) - var ver=-Math.tan(z/camera.position.y) names.forEach(v=>{ - // v.rotation.x=ver - // v.rotation.y=h - // v.rotation.z=camera.rotation.z v.rotation.x=camera.rotation.x v.rotation.y=camera.rotation.y v.rotation.z=camera.rotation.z @@ -704,22 +685,29 @@ import { Thumbs } from 'swiper'; map.value.style.cursor="pointer" if(items.select){ if(items.select!=intersects[0].object){ - items.select.scale.set(1,1,1) + items.select.parent.out() items.select=intersects[0].object - items.select.scale.set(1.4, 1.4, 1.4) + items.select.parent.hover() } }else{ items.select=intersects[0].object - items.select.scale.set(1.4, 1.4, 1.4) + items.select.parent.hover() } }else{ map.value.style.cursor="default" if(items.select){ - items.select.scale.set(1,1,1) + items.select.parent.out() items.select=null } } } + function showPopover(){ + if(items.show!=items.select){ + items.show?.parent?.hide?.() + items.show=items.select + items.show?.parent?.show?.() + } + } onMounted(()=>{ nextTick(async()=>{ init()