diff --git a/public/images/drop.png b/public/images/drop.png new file mode 100644 index 0000000..0a5b17d --- /dev/null +++ b/public/images/drop.png Binary files differ diff --git a/public/images/drop.png b/public/images/drop.png new file mode 100644 index 0000000..0a5b17d --- /dev/null +++ b/public/images/drop.png Binary files differ diff --git a/src/views/sponeScreen/cityGK/index.vue b/src/views/sponeScreen/cityGK/index.vue index 9dd2898..e8a299f 100644 --- a/src/views/sponeScreen/cityGK/index.vue +++ b/src/views/sponeScreen/cityGK/index.vue @@ -48,9 +48,9 @@ ); onMounted(() => { - // setTimeout(() => { - // newfiberMapBoxVectorLayer.addMapboxWeather(); - // }, 6000); + setTimeout(() => { + newfiberMapBoxVectorLayer.addMapboxWeather(); + }, 6000); // newfiberMap.setView({ // lng: 114.312, // lat: 34.502, diff --git a/public/images/drop.png b/public/images/drop.png new file mode 100644 index 0000000..0a5b17d --- /dev/null +++ b/public/images/drop.png Binary files differ diff --git a/src/views/sponeScreen/cityGK/index.vue b/src/views/sponeScreen/cityGK/index.vue index 9dd2898..e8a299f 100644 --- a/src/views/sponeScreen/cityGK/index.vue +++ b/src/views/sponeScreen/cityGK/index.vue @@ -48,9 +48,9 @@ ); onMounted(() => { - // setTimeout(() => { - // newfiberMapBoxVectorLayer.addMapboxWeather(); - // }, 6000); + setTimeout(() => { + newfiberMapBoxVectorLayer.addMapboxWeather(); + }, 6000); // newfiberMap.setView({ // lng: 114.312, // lat: 34.502, diff --git a/src/views/sponeScreen/gisMF/mapboxVectorLayer.js b/src/views/sponeScreen/gisMF/mapboxVectorLayer.js index bdd0aeb..acb3b6d 100644 --- a/src/views/sponeScreen/gisMF/mapboxVectorLayer.js +++ b/src/views/sponeScreen/gisMF/mapboxVectorLayer.js @@ -395,76 +395,90 @@ } //添加天气效果 static addMapboxWeather() { - let camera = null; - let material = null; + var camera, scene, renderer, control, material; + var clock = new THREE.Clock(); + var time = 0; newfiberMapbox.map.addLayer({ id: 'custom_layer', type: 'custom', renderingMode: '3d', onAdd: function (map, mbxContext) { - window.tb = new Threebox(map, mbxContext, { defaultLights: true }); + window.tb = new Threebox( + map, + mbxContext, + { defaultLights: true } + ); camera = map.getFreeCameraOptions(); - var mesh = addRainMesh(); - mesh = window.tb.Object3D({ obj: mesh, units: 'meters', bbox: false, anchor: 'center' }).setCoords([114.315, 34.852, 0]); + var mesh = createRain(); + mesh = window.tb.Object3D({ obj: mesh, units: 'meters', bbox: false, anchor: 'center' }) + .setCoords([114.30144051057519,34.7982491425239, 0]); mesh.setRotation({ x: 90, y: 0, z: 0 }); - tb.add(mesh); + tb.add(mesh) }, render: function (gl, matrix) { tb.update(); newfiberMapbox.map.triggerRepaint(); - render(); - }, + } }); - function addRainMesh() { + +//创建雨 + function createRain() { // 雨的盒子 const box = new THREE.Box3( - new THREE.Vector3(-5000, 0, -5000), - // 下雨的范围 - new THREE.Vector3(50000, 50000, 50000) + new THREE.Vector3(-5000, 0, -5000), + // 下雨的范围 + new THREE.Vector3(5000, 5000, 5000) ); //创建雨（雨的材质） material = new THREE.MeshBasicMaterial({ transparent: true, opacity: 1, - map: new THREE.TextureLoader().load('https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*w2SFSZJp4nIAAAAAAAAAAAAAARQnAQ'), + map: new THREE.TextureLoader().load("./images/drop.png"), depthWrite: false, }); material.onBeforeCompile = function (shader, renderer) { const getFoot = ` - uniform float top; - uniform float bottom; - uniform float time; - #include - float angle(float x, float y){ - return atan(y, x); - } - vec2 getFoot(vec2 camera,vec2 normal,vec2 pos){ - vec2 position; - float distanceLen = distance(pos, normal); - float a = angle(camera.x - normal.x, camera.y - normal.y); - pos.x > normal.x ? a -= 0.785 : a += 0.785; - position.x = cos(a) * distanceLen; - position.y = sin(a) * distanceLen; - return position + normal; - } - `; + uniform float top; + uniform float bottom; + uniform float time; + #include + float angle(float x, float y){ + return atan(y, x); + } + vec2 getFoot(vec2 camera,vec2 normal,vec2 pos){ + vec2 position; + + float distanceLen = distance(pos, normal); + float a = angle(camera.x - normal.x, camera.y - normal.y); + pos.x > normal.x ? a -= 0.785 : a += 0.785; + position.x = cos(a) * distanceLen; + position.y = sin(a) * distanceLen; + return position + normal; + } + `; const begin_vertex = ` - vec2 foot = getFoot(vec2(cameraPosition.x, cameraPosition.z), vec2(normal.x, normal.z), vec2(position.x, position.z)); - float height = top - bottom; - float y = normal.y - bottom - height * time; - y = y + (y < 0.0 ? height : 0.0); - float ratio = (1.0 - y / height) * (1.0 - y / height); - y = height * (1.0 - ratio); - y += bottom; - y += position.y - normal.y; - vec3 transformed = vec3( foot.x, y, foot.y ); - `; - shader.vertexShader = shader.vertexShader.replace('#include ', getFoot); - shader.vertexShader = shader.vertexShader.replace('#include ', begin_vertex); + vec2 foot = getFoot(vec2(cameraPosition.x, cameraPosition.z), vec2(normal.x, normal.z), vec2(position.x, position.z)); + float height = top - bottom; + float y = normal.y - bottom - height * time; + y = y + (y < 0.0 ? height : 0.0); + float ratio = (1.0 - y / height) * (1.0 - y / height); + y = height * (1.0 - ratio); + y += bottom; + y += position.y - normal.y; + vec3 transformed = vec3( foot.x, y, foot.y ); + `; + shader.vertexShader = shader.vertexShader.replace( + "#include ", + getFoot + ); + shader.vertexShader = shader.vertexShader.replace( + "#include ", + begin_vertex + ); shader.uniforms.cameraPosition = { value: new THREE.Vector3(0, 200, 0), @@ -488,7 +502,7 @@ const uvs = []; const indices = []; // 雨量 - for (let i = 0; i < 50000; i++) { + for (let i = 0; i < 5000; i++) { const pos = new THREE.Vector3(); pos.x = Math.random() * (box.max.x - box.min.x) + box.min.x; pos.y = Math.random() * (box.max.y - box.min.y) + box.min.y; @@ -498,44 +512,77 @@ const width = height / 50; vertices.push( - pos.x + width, - pos.y + height / 2, - pos.z, - pos.x - width, - pos.y + height / 2, - pos.z, - pos.x - width, - pos.y - height / 2, - pos.z, - pos.x + width, - pos.y - height / 2, - pos.z + pos.x + width, + pos.y + height / 2, + pos.z, + pos.x - width, + pos.y + height / 2, + pos.z, + pos.x - width, + pos.y - height / 2, + pos.z, + pos.x + width, + pos.y - height / 2, + pos.z ); - normals.push(pos.x, pos.y, pos.z, pos.x, pos.y, pos.z, pos.x, pos.y, pos.z, pos.x, pos.y, pos.z); + normals.push( + pos.x, + pos.y, + pos.z, + pos.x, + pos.y, + pos.z, + pos.x, + pos.y, + pos.z, + pos.x, + pos.y, + pos.z + ); uvs.push(1, 1, 0, 1, 0, 0, 1, 0); - indices.push(i * 4 + 0, i * 4 + 1, i * 4 + 2, i * 4 + 0, i * 4 + 2, i * 4 + 3); + indices.push( + i * 4 + 0, + i * 4 + 1, + i * 4 + 2, + i * 4 + 0, + i * 4 + 2, + i * 4 + 3 + ); } - geometry.setAttribute('position', new THREE.BufferAttribute(new Float32Array(vertices), 3)); - geometry.setAttribute('normal', new THREE.BufferAttribute(new Float32Array(normals), 3)); - geometry.setAttribute('uv', new THREE.BufferAttribute(new Float32Array(uvs), 2)); + geometry.addAttribute( + "position", + new THREE.BufferAttribute(new Float32Array(vertices), 3) + ); + geometry.addAttribute( + "normal", + new THREE.BufferAttribute(new Float32Array(normals), 3) + ); + geometry.addAttribute( + "uv", + new THREE.BufferAttribute(new Float32Array(uvs), 2) + ); geometry.setIndex(new THREE.BufferAttribute(new Uint32Array(indices), 1)); var mesh = new THREE.Mesh(geometry, material); return mesh; } - var clock = new THREE.Clock(); - let time = 0; + animate(); + + function animate() { + requestAnimationFrame(animate); + render(); + } + function render() { // 下雨速率 - time = (time + clock.getDelta() * 0.3) % 1; if (!camera) { - return; + return } material.cameraPosition = camera.position;