mirror of
https://gitee.com/ice-gl/icegl-three-vue-tres.git
synced 2025-04-05 06:22:43 +08:00
增加了 流光线的组件，待完善参数 和 演示
This commit is contained in:
hawk86104
parent
1b907c0f7c
commit
a10854dd8e
BIN
public/plugins/digitalCity/image/line2.png
Normal file
BIN
public/plugins/digitalCity/image/line2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.1 KiB |
@ -9,40 +9,45 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, watchEffect } from 'vue'
|
||||
import { useRenderLoop, useTexture } from '@tresjs/core'
|
||||
import { CatmullRomCurve3, Vector3, RepeatWrapping, BackSide, Color } from 'three'
|
||||
import { CatmullRomCurve3, Vector3, RepeatWrapping, BackSide, Color, NearestFilter } from 'three'
|
||||
import { loadGeojson } from '../../common/utils'
|
||||
// import transformControlsDebug from '../../components/transformControlsDebug.vue'
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
geoJson: string
|
||||
color?: string
|
||||
position?: Array<number>
|
||||
radius?: number
|
||||
rotationY?: number
|
||||
scale?: number
|
||||
speed?: number
|
||||
}>(),
|
||||
{
|
||||
color: '#ffff00',
|
||||
position: [1837.0641427711184, 30, -457.0929823910632],
|
||||
radius: 2,
|
||||
rotationY: -0.3866683251512052,
|
||||
scale: 1.5083171193254858,
|
||||
speed: 1.0
|
||||
},
|
||||
defineProps<{
|
||||
geoJson: string
|
||||
color?: string
|
||||
position?: Array<number>
|
||||
radius?: number
|
||||
rotationY?: number
|
||||
scale?: number
|
||||
speed?: number
|
||||
}>(),
|
||||
{
|
||||
color: '#ffff00',
|
||||
position: [1837.0641427711184, 30, -457.0929823910632],
|
||||
radius: 2,
|
||||
rotationY: -0.3866683251512052,
|
||||
scale: 1.5083171193254858,
|
||||
speed: 1.0,
|
||||
},
|
||||
)
|
||||
|
||||
const tgRef = ref()
|
||||
const tmbmRef = ref()
|
||||
|
||||
const { map: pTexture } = await useTexture({
|
||||
map: './plugins/digitalCity/image/line.png'
|
||||
map: './plugins/digitalCity/image/line.png',
|
||||
// map: './plugins/digitalCity/image/line2.png',
|
||||
})
|
||||
pTexture.needsUpdate = true
|
||||
pTexture.wrapS = pTexture.wrapT = RepeatWrapping
|
||||
pTexture.repeat.set(1, 1)
|
||||
|
||||
// pTexture.rotation = Math.PI
|
||||
// pTexture.generateMipmaps = false
|
||||
// pTexture.magFilter = NearestFilter
|
||||
|
||||
const linePrimary = await loadGeojson(props.geoJson)
|
||||
|
||||
// 一下两个参数 是城市建筑物模型的大小中心点 以及 实际地理位置的偏移和位置， 需要和 建模的人 进行沟通不对，不能直接用
|
||||
@ -52,34 +57,33 @@ const scalegeoScale = 60000
|
||||
|
||||
let curve = []
|
||||
for (var i = 0; i < linePrimary.length; i++) {
|
||||
const item = linePrimary[i]
|
||||
const points = []
|
||||
item.geometry.coordinates.forEach((lineOne) => {
|
||||
points.push(new Vector3((lineOne[1] + geoOffSet[0]) * scalegeoScale, geoOffSet[1], (lineOne[0] + geoOffSet[2]) * scalegeoScale))
|
||||
})
|
||||
curve.push(new CatmullRomCurve3(points))
|
||||
const item = linePrimary[i]
|
||||
const points = []
|
||||
item.geometry.coordinates.forEach((lineOne) => {
|
||||
points.push(new Vector3((lineOne[1] + geoOffSet[0]) * scalegeoScale, geoOffSet[1], (lineOne[0] + geoOffSet[2]) * scalegeoScale))
|
||||
})
|
||||
curve.push(new CatmullRomCurve3(points))
|
||||
}
|
||||
|
||||
watchEffect(() => {
|
||||
if (props.color) {
|
||||
if (tmbmRef.value) {
|
||||
tmbmRef.value.color = new Color(props.color)
|
||||
}
|
||||
}
|
||||
if (props.color) {
|
||||
if (tmbmRef.value) {
|
||||
tmbmRef.value.color = new Color(props.color)
|
||||
}
|
||||
}
|
||||
})
|
||||
const { onLoop } = useRenderLoop()
|
||||
onLoop(({ delta }) => {
|
||||
pTexture.offset.x -= Math.random() / 20 * props.speed
|
||||
pTexture.offset.x -= (Math.random() / 20) * props.speed
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<!-- <transformControlsDebug :model="tgRef" /> -->
|
||||
<TresGroup ref="tgRef" :position="props.position" :rotation-y="props.rotationY" :scale="props.scale">
|
||||
<TresMesh v-for="(item) in curve" :renderOrder="3000">
|
||||
<TresTubeGeometry :args="[item, 64, props.radius, 20/*管道圆润*/, false]" />
|
||||
<TresMeshBasicMaterial ref="tmbmRef" :map="pTexture" :side="BackSide" :transparent="true" :color="props.color" />
|
||||
</TresMesh>
|
||||
</TresGroup>
|
||||
<!-- <transformControlsDebug :model="tgRef" /> -->
|
||||
<TresGroup ref="tgRef" :position="props.position" :rotation-y="props.rotationY" :scale="props.scale">
|
||||
<TresMesh v-for="item in curve" :renderOrder="3000">
|
||||
<TresTubeGeometry :args="[item, 64, props.radius, 20 /*管道圆润*/, false]" />
|
||||
<TresMeshBasicMaterial ref="tmbmRef" :map="pTexture" :side="BackSide" :transparent="true" :color="props.color" />
|
||||
</TresMesh>
|
||||
</TresGroup>
|
||||
</template>
|
||||
|
||||
68
src/plugins/simpleGIS/components/streamLine.vue
Normal file
68
src/plugins/simpleGIS/components/streamLine.vue
Normal file
@ -0,0 +1,68 @@
|
||||
<script setup lang="ts">
|
||||
import { useRenderLoop, useTexture } from '@tresjs/core'
|
||||
import * as THREE from 'three'
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
color?: string
|
||||
radius?: number
|
||||
speed?: number
|
||||
radialSegments?: number
|
||||
tubularSegments?: number
|
||||
closed?: boolean
|
||||
clockwise?: boolean
|
||||
}>(),
|
||||
{
|
||||
color: '#2bc4dc',
|
||||
radius: 0.2 /*管道的半径*/,
|
||||
speed: 1.0,
|
||||
tubularSegments: 64 /*管道路径平滑*/,
|
||||
radialSegments: 20 /*管道壁圆润*/,
|
||||
closed: false,
|
||||
clockwise: true,
|
||||
},
|
||||
)
|
||||
|
||||
const { map: pTexture } = await useTexture({
|
||||
map: './plugins/digitalCity/image/line2.png',
|
||||
})
|
||||
pTexture.needsUpdate = true
|
||||
pTexture.wrapS = pTexture.wrapT = THREE.RepeatWrapping
|
||||
pTexture.repeat.set(1, 1)
|
||||
|
||||
pTexture.rotation = props.clockwise ? 0 : Math.PI
|
||||
pTexture.generateMipmaps = false
|
||||
pTexture.magFilter = THREE.NearestFilter
|
||||
|
||||
const linesList = [
|
||||
[10, 0, 10],
|
||||
[10, 0, -5],
|
||||
[-5, 0, -5],
|
||||
[-10, 0, 10],
|
||||
[10, 0, 10],
|
||||
]
|
||||
let pathPoint = [] as THREE.Vector3[]
|
||||
linesList.forEach((point) => {
|
||||
pathPoint.push(new THREE.Vector3().fromArray(point))
|
||||
})
|
||||
const curve = new THREE.CatmullRomCurve3(pathPoint)
|
||||
|
||||
const { onLoop } = useRenderLoop()
|
||||
onLoop(() => {
|
||||
pTexture.offset.x += 0.002 * props.speed
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<TresMesh>
|
||||
<TresTubeGeometry :args="[curve, props.tubularSegments /*管道路径平滑*/, props.radius, props.radialSegments /*管道壁圆润*/, props.closed]" />
|
||||
<TresMeshBasicMaterial
|
||||
:blending="THREE.AdditiveBlending"
|
||||
:map="pTexture"
|
||||
:side="THREE.DoubleSide"
|
||||
:alphaMap="pTexture"
|
||||
:transparent="true"
|
||||
:color="props.color"
|
||||
/>
|
||||
</TresMesh>
|
||||
</template>
|
||||
@ -1,37 +1,52 @@
|
||||
/*
|
||||
* @Description:
|
||||
* @Description:
|
||||
* @Version: 1.668
|
||||
* @Autor: 地虎降天龙
|
||||
* @Date: 2024-02-23 16:40:14
|
||||
* @LastEditors: 地虎降天龙
|
||||
* @LastEditTime: 2024-03-19 08:32:13
|
||||
* @LastEditTime: 2024-06-19 14:37:17
|
||||
*/
|
||||
|
||||
export default {
|
||||
"name": "simpleGIS",
|
||||
"title": "简单的GIS例子",
|
||||
"intro": "都是些GIS行业的应用简单例子",
|
||||
"version": "0.0.1",
|
||||
"author": "地虎降天龙",
|
||||
"website": "https://gitee.com/hawk86104",
|
||||
"state": "active",
|
||||
"require": [],
|
||||
"creatTime": "2024-02-12",
|
||||
"updateTime": "2024-03-19",
|
||||
"preview": [
|
||||
{ "src": "plugins/simpleGIS/preview/chinaMap.png", "type": "img", "name": "chinaMap", "title": "中国地图展示" },
|
||||
{
|
||||
"src": "plugins/simpleGIS/preview/jiangSuMap.png", "type": "img", "name": "jiangSuMap", "title": "江苏地图展示",
|
||||
referenceSource: { title: 'ouzexi', url: 'https://github.com/ouzexi/threejs-guangdong-map' }
|
||||
},
|
||||
{
|
||||
"src": "plugins/simpleGIS/preview/tileMap.png", "type": "img", "name": "tileMap", "title": "地图瓦片展示",
|
||||
referenceSource: { title: 'xianziljl', url: 'https://github.com/xianziljl/three-satellite-map' }
|
||||
},
|
||||
{
|
||||
"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.gif", "type": "img", "name": "mapBuildings", "title": "地图和3DTiles结合" },
|
||||
]
|
||||
}
|
||||
name: 'simpleGIS',
|
||||
title: '简单的GIS例子',
|
||||
intro: '都是些GIS行业的应用简单例子',
|
||||
version: '0.0.1',
|
||||
author: '地虎降天龙',
|
||||
website: 'https://gitee.com/hawk86104',
|
||||
state: 'active',
|
||||
require: [],
|
||||
creatTime: '2024-02-12',
|
||||
updateTime: '2024-03-19',
|
||||
preview: [
|
||||
{ src: 'plugins/simpleGIS/preview/chinaMap.png', type: 'img', name: 'chinaMap', title: '中国地图展示' },
|
||||
{
|
||||
src: 'plugins/simpleGIS/preview/jiangSuMap.png',
|
||||
type: 'img',
|
||||
name: 'jiangSuMap',
|
||||
title: '江苏地图展示',
|
||||
referenceSource: { title: 'ouzexi', url: 'https://github.com/ouzexi/threejs-guangdong-map' },
|
||||
},
|
||||
{
|
||||
src: 'plugins/simpleGIS/preview/streamLines.png',
|
||||
type: 'img',
|
||||
name: 'streamLines',
|
||||
title: '流光线展示',
|
||||
},
|
||||
{
|
||||
src: 'plugins/simpleGIS/preview/tileMap.png',
|
||||
type: 'img',
|
||||
name: 'tileMap',
|
||||
title: '地图瓦片展示',
|
||||
referenceSource: { title: 'xianziljl', url: 'https://github.com/xianziljl/three-satellite-map' },
|
||||
},
|
||||
{
|
||||
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.gif', type: 'img', name: 'mapBuildings', title: '地图和3DTiles结合' },
|
||||
],
|
||||
}
|
||||
|
||||
49
src/plugins/simpleGIS/pages/streamLines.vue
Normal file
49
src/plugins/simpleGIS/pages/streamLines.vue
Normal file
@ -0,0 +1,49 @@
|
||||
<!--
|
||||
* @Description:
|
||||
* @Version: 1.668
|
||||
* @Autor: 地虎降天龙
|
||||
* @Date: 2024-06-19 14:33:25
|
||||
* @LastEditors: 地虎降天龙
|
||||
* @LastEditTime: 2024-06-19 15:08:34
|
||||
-->
|
||||
<template>
|
||||
<TresCanvas clearColor="#201919" window-size>
|
||||
<TresPerspectiveCamera :position="[25, 25, 25]" :fov="45" :near="0.1" :far="10000" />
|
||||
<OrbitControls enableDamping />
|
||||
<Suspense>
|
||||
<streamLine />
|
||||
</Suspense>
|
||||
|
||||
<Suspense>
|
||||
<reflectorDUDV :position="[0, -0.5, 0]" v-bind="reflectorState" />
|
||||
</Suspense>
|
||||
</TresCanvas>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { reactive } from 'vue'
|
||||
|
||||
import { OrbitControls } from '@tresjs/cientos'
|
||||
import { Pane } from 'tweakpane'
|
||||
import { reflectorDUDV } from 'PLS/floor'
|
||||
import streamLine from '../components/streamLine.vue'
|
||||
|
||||
const reflectorState = reactive({
|
||||
reflectivity: 0.1,
|
||||
showGridHelper: false,
|
||||
scale: 4,
|
||||
})
|
||||
const configState = reactive({
|
||||
color: '#ffffff',
|
||||
scale: 1,
|
||||
})
|
||||
|
||||
// const paneControl = new Pane()
|
||||
// paneControl.addBinding(configState, 'color', { label: '颜色' })
|
||||
// paneControl.addBinding(configState, 'scale', {
|
||||
// label: '大小',
|
||||
// min: 0.1,
|
||||
// max: 3.0,
|
||||
// step: 0.1,
|
||||
// })
|
||||
</script>
|
||||
Loading…
x
Reference in New Issue
Block a user