blackteay/icegl-three-vue-tres
1
0
Fork 0
mirror of https://gitee.com/ice-gl/icegl-three-vue-tres.git synced 2025-04-05 06:22:43 +08:00
Code Issues Projects Releases Wiki Activity

优化数字城市和gis结合的场景 以及 预览图片

Browse Source
This commit is contained in:
hawk86104 2024-03-18 10:11:09 +08:00
parent a6c126a42d
commit dd2a940cb6
15 changed files with 92 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
.fes.js
View File

@ -4,7 +4,7 @@
* @Autor: 地虎降天龙
* @Date: 2023-10-16 10:53:09
* @LastEditors: 地虎降天龙
* @LastEditTime: 2024-03-12 09:39:34
* @LastEditTime: 2024-03-18 10:06:11
*/
// import { resolve } from 'path';
import { join } from 'path';
@ -45,16 +45,16 @@ export default defineBuildConfig({
}),
glsl()
],
// server: {
// host: "0.0.0.0",
// proxy: {
// '/cosv2': {
// target: 'https://opensource-1314935952.cos.ap-nanjing.myqcloud.com',
// changeOrigin: true,
// rewrite: (path) => path.replace(/^\/cosv2/, '')
// },
// },
// },
server: {
// host: "0.0.0.0",
// proxy: {
// '/cosv2': {
// target: 'https://opensource-1314935952.cos.ap-nanjing.myqcloud.com',
// changeOrigin: true,
// rewrite: (path) => path.replace(/^\/cosv2/, '')
// },
// },
},
},
alias: { PLS: join(__dirname, './src/plugins') },
// { find: 'pls', replacement: resolve(__dirname, './src/plugins') },

3
README.md
View File

@ -49,12 +49,13 @@
因项目经常更新编译，如发现访问错误，请清空浏览器缓存。
```
![展示](./preview/数字城市1.gif)
![展示](./public/plugins/simpleGIS/preview/mapBuildings.gif)
![展示](./preview/数字城市2.gif)
![展示](./public/plugins/digitalCity/preview/city2.gif)
![展示](./preview/地球3.gif)
![展示](./preview/热力图2.gif)
![展示](./preview/热力图.gif)
![展示](./preview/models.gif)
![展示](./preview/数字大脑.gif)
![展示](./preview/shadertoyMaterial.gif)

BIN
preview/mapBuildings.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.9 MiB

BIN
preview/models.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.9 MiB

BIN
preview/shadertoyMaterial.gif
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.7 MiB

After

Width:  |  Height:  |  Size: 1.5 MiB

BIN
preview/数字城市1.gif
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 3.4 MiB

BIN
public/plugins/simpleGIS/preview/mapBuildings.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.9 MiB

4
src/plugins/digitalCity/components/fire/fireB.vue
View File

@ -4,7 +4,7 @@
* @Autor: 地虎降天龙
* @Date: 2023-10-27 16:43:05
* @LastEditors: 地虎降天龙
* @LastEditTime: 2024-02-06 17:46:52
* @LastEditTime: 2024-03-18 09:34:40
-->
<script setup lang="ts">
import { useTexture, useRenderLoop } from '@tresjs/core'
@ -73,5 +73,5 @@ onLoop(({ dt }) => {
</script>
<template>
<primitive :object="objCloud" :position="[-130, 26, 20]" :renderOrder="3000" />
<primitive :object="objCloud" :position="[-130, 26, 20]" :renderOrder="3001" />
</template>

2
src/plugins/digitalCity/components/radras/radraB.vue
View File

@ -38,7 +38,7 @@ const shader = {
color: props.color,
opacity: props.opacity,
transparent: true,
depthWrite: true,
depthWrite: false,
depthTest: true,
side: DoubleSide,
vertexShader: `

2
src/plugins/digitalCity/components/smoke/smokeA.vue
View File

@ -4,7 +4,7 @@
* @Autor: 地虎降天龙
* @Date: 2023-10-27 16:43:05
* @LastEditors: 地虎降天龙
* @LastEditTime: 2024-02-19 16:20:42
* @LastEditTime: 2024-03-18 09:34:23
-->
<script setup lang="ts">
import { useTexture, useRenderLoop } from '@tresjs/core'

10
src/plugins/digitalCity/components/weather/cloudMesh.vue
View File

@ -4,13 +4,19 @@
* @Autor: 地虎降天龙
* @Date: 2023-10-27 16:43:05
* @LastEditors: 地虎降天龙
* @LastEditTime: 2024-02-06 17:04:41
* @LastEditTime: 2024-03-18 09:13:15
-->
<script setup lang="ts">
import { useTexture, useRenderLoop } from '@tresjs/core'
import * as THREE from 'three'
import { default as SPE } from '../../common/ShaderParticleEngine/build/SPE'
const props = withDefaults(defineProps<{
cPosition: Array<number>
}>(), {
cPosition: [0, 200, 0]
})
const { map: pTexture } = await useTexture({
map: './plugins/digitalCity/image/cloud.png'
})
@ -74,5 +80,5 @@ onLoop(({ dt }) => {
</script>
<template>
<primitive :object="objCloud" :position="[0, 200, 0]" :renderOrder="3000" />
<primitive :object="objCloud" :position="cPosition" :renderOrder="3000" />
</template>

16
src/plugins/digitalCity/index.js
View File

@ -1,4 +1,18 @@
/*
* @Description:
* @Version: 1.668
* @Autor: 地虎降天龙
* @Date: 2024-03-15 22:00:55
* @LastEditors: 地虎降天龙
* @LastEditTime: 2024-03-18 09:30:25
*/
import radraA from './components/radras/radraA.vue'
import radraB from './components/radras/radraB.vue'
import precipitation from './components/weather/precipitation.vue'
import cloudMesh from './components/weather/cloudMesh.vue'
import markA from './components/buildings/buildingsMarkA.vue'
import fireA from './components/fire/fireA.vue'
import fireB from './components/fire/fireB.vue'
import smokeA from './components/smoke/smokeA.vue'
export { radraA, radraB }
export { radraA, radraB, precipitation, cloudMesh, markA, fireA, fireB, smokeA }

44
src/plugins/simpleGIS/components/mapBuildingsMoreMeshes.vue Normal file
View File

@ -0,0 +1,44 @@
<template>
<radraA color="#00c0ff" :radius="300" :size="300" :position="[cPosition[0], 8, -cPosition[1]]" />
<Suspense>
<markA :position="[cPosition[0], 8, -cPosition[1]]" :scale="0.13" img="./plugins/digitalCity/image/znsba.png"
:foremost="false" />
</Suspense>
<radraB :position="[cPosition[0] + 700, 10, -cPosition[1] + 300]" color="#ffff00" :height="180" :maxRadius="400" />
<Suspense>
<markA :position="[cPosition[0] + 700, 10, -cPosition[1] + 300]" :scale="200"
img="./plugins/digitalCity/image/znsb-err.png" :sizeAttenuation="true" :foremost="true" />
</Suspense>
<Suspense>
<fireA :fireScale="80" :magnitude="1.3" :lacunarity="2.0" :gain="1.0"
:position="[cPosition[0] + 280, 1, -cPosition[1] + 120]" />
</Suspense>
<Suspense>
<fireB :position="[cPosition[0] + 388, 6, -cPosition[1] + 330]" />
</Suspense>
<Suspense>
<smokeA :position="[cPosition[0] + 388, 6, -cPosition[1] + 330]" />
</Suspense>
<Suspense>
<precipitation :speed="12" :size="20" :count="26000" color="#fff" type="snow"
:position="[cPosition[0], 0, -cPosition[1]]" :areaX="6000" :areaY="3000" :areaZ="6000" />
</Suspense>
<Suspense>
<cloudMesh :cPosition="[cPosition[0], 600, -cPosition[1]]" />
</Suspense>
</template>
<script setup lang="ts">
import { radraA, radraB, precipitation, cloudMesh, markA, fireA, fireB, smokeA } from 'PLS/digitalCity'
const props = withDefaults(defineProps<{
cPosition: Array<number>
}>(), {
})
</script>

4
src/plugins/simpleGIS/config.js
View File

@ -4,7 +4,7 @@
* @Autor: 地虎降天龙
* @Date: 2024-02-23 16:40:14
* @LastEditors: 地虎降天龙
* @LastEditTime: 2024-03-12 10:45:49
* @LastEditTime: 2024-03-18 10:08:47
*/
export default {
@ -32,6 +32,6 @@ export default {
"src": "plugins/simpleGIS/preview/renderer3DTiles.png", "type": "img", "name": "renderer3DTiles", "title": "3DTiles展示",
referenceSource: { title: 'nasa-ammos', url: 'https://nasa-ammos.github.io/3DTilesRendererJS/' }
},
{ "src": "plugins/simpleGIS/preview/mapBuildings.png", "type": "img", "name": "mapBuildings", "title": "地图和3DTiles结合" },
{ "src": "plugins/simpleGIS/preview/mapBuildings.gif", "type": "img", "name": "mapBuildings", "title": "地图和3DTiles结合" },
]
}

11
src/plugins/simpleGIS/pages/mapBuildings.vue
View File

@ -4,7 +4,7 @@
* @Autor: 地虎降天龙
* @Date: 2024-02-29 18:51:13
* @LastEditors: 地虎降天龙
* @LastEditTime: 2024-03-18 08:55:05
* @LastEditTime: 2024-03-18 09:03:11
-->
<template>
@ -17,9 +17,10 @@
<tileMapBuildingsMesh :bbox="[104.955976, 20.149765, 120.998419, 30.528687]" :mapCenter="mapCenter"
:camera="camera" />
</Suspense>
<radraA color="#00c0ff" :radius="300" :size="300" :position="[buildsPosition[0], 8, -buildsPosition[1]]" />
<radraB :position="[buildsPosition[0] + 700, 10, -buildsPosition[1] + 300]" color="#ffff00" :height="180"
:maxRadius="400" />
<Suspense>
<mapBuildingsMoreMeshes :cPosition="buildsPosition" />
</Suspense>
<TresGridHelper :args="[10000, 10]" />
<TresAxesHelper :args="[100000]" />
@ -32,8 +33,8 @@ import { reactive } from 'vue'
import { TresCanvas } from '@tresjs/core'
import * as THREE from 'three'
import { tilesBuildings, tileMapBuildingsMesh } from 'PLS/simpleGIS'
import { radraA, radraB } from 'PLS/digitalCity'
import { lonLatToUtm } from '../lib/threeSatelliteMap/index'
import mapBuildingsMoreMeshes from '../components/mapBuildingsMoreMeshes.vue'
// const wud = utmToLonLat(185500.52598346426, 2494899.945635518)