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

正式定义第一个自己得插件 digitalCity

Browse Source 
更新的依赖库： trres-core 和 cientos
This commit is contained in:
hawk86104 2023-10-21 15:51:50 +08:00
parent d3bbefaa24
commit df5960fd16
9 changed files with 89 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
package.json
View File

@ -25,8 +25,8 @@
"@fesjs/plugin-enums": "^3.0.0",
"@fesjs/plugin-layout": "^5.0.0",
"@fesjs/plugin-model": "^3.0.0",
"@tresjs/cientos": "^3.5.0",
"@tresjs/core": "^3.3.0",
"@tresjs/cientos": "^3.5.1",
"@tresjs/core": "^3.4.1",
"core-js": "^3.29.1",
"three": "^0.157.0",
"vue": "^3.2.47"

0
public/plugins/superzay/belt/model/shanghai.FBX → public/plugins/digitalCity/belt/model/shanghai.FBX
View File

4
src/pages/index.vue
View File

@ -4,7 +4,7 @@
* @Autor: Hawk
* @Date: 2023-10-16 10:53:09
* @LastEditors: Hawk
* @LastEditTime: 2023-10-20 10:38:53
* @LastEditTime: 2023-10-21 15:47:00
-->
<template>
<Suspense>
@ -15,7 +15,7 @@
<script setup>
import { defineRouteMeta } from '@fesjs/fes';
// eslint-disable-next-line import/no-unresolved
import city from 'PLS/superzay/pages/city.vue'; //'@/plugins/'
import city from 'PLS/digitalCity/pages/city.vue'; //'@/plugins/'
defineRouteMeta({
name: 'index',

4
src/plugins/superzay/common/loadCity.ts → src/plugins/digitalCity/common/loadCity.ts
View File

@ -4,12 +4,12 @@
* @Autor: Hawk
* @Date: 2023-10-20 10:13:19
* @LastEditors: Hawk
* @LastEditTime: 2023-10-20 10:39:22
* @LastEditTime: 2023-10-21 15:47:05
*/
import { useFBX } from '@tresjs/cientos';
export const loadCityFBX = async()=>{
const path = './plugins/superzay/belt/model/shanghai.FBX';
const path = './plugins/digitalCity/belt/model/shanghai.FBX';
const model = await useFBX(path);
let CITY_UNTRIANGULATED = null
let LANDMASS = null

45
src/plugins/superzay/components/buildingLines.vue → src/plugins/digitalCity/components/buildingLines.vue
View File

@ -4,10 +4,14 @@
* @Autor: Hawk
* @Date: 2023-10-17 09:35:18
* @LastEditors: Hawk
* @LastEditTime: 2023-10-20 15:47:17
* @LastEditTime: 2023-10-20 17:20:33
-->
<script setup lang="ts">
import { WireframeGeometry, LineSegments, Color, EdgesGeometry, ShaderMaterial } from 'three';
import { Color, EdgesGeometry, ShaderMaterial } from 'three';
import { LineSegments2 } from 'three/examples/jsm/lines/LineSegments2.js';
import { LineMaterial } from 'three/examples/jsm/lines/LineMaterial.js';
import { LineSegmentsGeometry } from 'three/examples/jsm/lines/LineSegmentsGeometry.js';
import { watchEffect } from 'vue';
const props = withDefaults(
defineProps<{
@ -18,22 +22,29 @@ const props = withDefaults(
style?: string
}>(),
{
width: 10000.0,
width: 1.0,
color: '#FFF',
opacity: 1.0,
style: 'Shader' // Wireframe / Shader
style: 'Wireframe' // Wireframe / Shader
},
)
let line = null as any
let shader = null as any
if (props.style === 'Wireframe') {
const wireframe = new EdgesGeometry(props.builds.geometry); // WireframeGeometry
line = new LineSegments(wireframe);
line.material.depthTest = true;
line.material.opacity = props.opacity;
line.material.transparent = true;
line.material.linewidth = props.width
const edges = new EdgesGeometry(props.builds.geometry) // WireframeGeometry
let geometry = new LineSegmentsGeometry()
let wideEdges = geometry.fromEdgesGeometry(edges)
let edgesmaterial = new LineMaterial({
color: props.color,
linewidth: props.width,
opacity: props.opacity,
transparent: true
})
edgesmaterial.resolution.set(window.innerWidth, window.innerHeight);
line = new LineSegments2(wideEdges, edgesmaterial);
line.applyMatrix4(props.builds.matrix.clone())
// line.position.copy(props.builds.getWorldPosition())
} else {
shader = {
transparent: true,
@ -69,13 +80,21 @@ watchEffect(() => {
if (props.color) {
shader.uniforms.uColor.value = new Color(props.color)
}
if (props.width) {
line.material.linewidth = props.width
}
if (props.opacity) {
shader.uniforms.uOpacity.value = props.opacity
}
}
if (props.style === 'Wireframe') {
if (props.color) {
line.material.color = new Color(props.color)
}
if (props.opacity) {
line.material.opacity = props.opacity
}
}
if (props.width) {
line.material.linewidth = props.width
}
});
</script>

6
src/plugins/superzay/components/buildingsModel.vue → src/plugins/digitalCity/components/buildingsModel.vue
View File

@ -4,7 +4,7 @@
* @Autor: Hawk
* @Date: 2023-10-17 09:35:18
* @LastEditors: Hawk
* @LastEditTime: 2023-10-20 16:25:31
* @LastEditTime: 2023-10-20 17:25:16
-->
<script setup lang="ts">
import { useRenderLoop } from '@tresjs/core'
@ -21,7 +21,7 @@ const props = withDefaults(defineProps<{
landColor: '#112233',
opacity: 0.9
})
debugger
const timeDelta = { value: 0 }
const CITY_UNTRIANGULATED = props.model.city
const LANDMASS = props.model.land
@ -138,6 +138,6 @@ watchEffect(() => {
</script>
<template>
<primitive :object="props.model.model">
<primitive :object="props.model.model.clone()">
</primitive>
</template>

0
src/plugins/superzay/components/test.vue → src/plugins/digitalCity/components/test.vue
View File

27
src/plugins/superzay/pages/city.vue → src/plugins/digitalCity/pages/city.vue
View File

@ -4,7 +4,7 @@
* @Autor: Hawk
* @Date: 2023-10-17 08:30:49
* @LastEditors: Hawk
* @LastEditTime: 2023-10-20 16:22:26
* @LastEditTime: 2023-10-20 17:16:04
-->
<template>
<TresCanvas v-bind="state">
@ -12,10 +12,11 @@
<OrbitControls v-bind="controlsState" />
<TresAmbientLight color="#ffffff" />
<TresDirectionalLight :position="[100, 100, 0]" :intensity="0.5" color="#ffffff" />
<buildingsModel v-if="showBuildingLines" :model="CityFBX" :bulidingsColor="buildingState.bulidingsColor"
:landColor="buildingState.landColor" :opacity="buildingState.opacity" />
<buildingLines v-if="showBuildingLines" :builds="CityFBX.city" :width="buildingLinesState.width"
:color="buildingLinesState.color" :opacity="buildingLinesState.opacity" />
<buildingsModel v-if="buildingState.show && showBuildingLines" :model="CityFBX"
:bulidingsColor="buildingState.bulidingsColor" :landColor="buildingState.landColor"
:opacity="buildingState.opacity" />
<buildingLines v-if="buildingLinesState.show && showBuildingLines" :builds="CityFBX.city"
:width="buildingLinesState.width" :color="buildingLinesState.color" :opacity="buildingLinesState.opacity" />
<TresAxesHelper :args="[1000]" :position="[0, 19, 0]" />
<TresGridHelper :args="[6000, 100]" :position="[0, 19, 0]" />
</TresCanvas>
@ -58,12 +59,13 @@ onMounted(() => {
const f1 = paneControl.addFolder({
title: '线条',
});
f1.addBinding(buildingLinesState, 'show', { label: '显示' })
f1.addBinding(buildingLinesState, 'color', { label: '颜色' })
f1.addBinding(buildingLinesState, 'width', {
label: '宽度',
min: 1,
max: 1000,
step: 10,
min: 0,
max: 10,
step: 1,
})
f1.addBinding(buildingLinesState, 'opacity', {
label: '透明度',
@ -75,6 +77,7 @@ onMounted(() => {
const f2 = paneControl.addFolder({
title: '建筑物',
});
f2.addBinding(buildingState, 'show', { label: '显示' })
f2.addBinding(buildingState, 'bulidingsColor', { label: '楼宇颜色' })
f2.addBinding(buildingState, 'opacity', {
label: '透明度',
@ -86,15 +89,17 @@ onMounted(() => {
})
// buildingLinesState 建筑线条控制
const buildingLinesState = reactive({
width: 1000.0,
width: 1.0,
color: '#000',
opacity: 1.0
opacity: 1.0,
show: true
})
// buildingState 建筑线条控制
const buildingState = reactive({
bulidingsColor: '#EC5BFF',
landColor: '#112233',
opacity: 0.9
opacity: 0.9,
show: true
})
</script>

51
yarn.lock
View File

@ -1433,19 +1433,19 @@
resolved "https://registry.yarnpkg.com/@sideway/pinpoint/-/pinpoint-2.0.0.tgz#cff8ffadc372ad29fd3f78277aeb29e632cc70df"
integrity sha512-RNiOoTPkptFtSVzQevY/yWtZwf/RxyVnPy/OcA9HBM3MlGDnBEYL5B41H0MTn0Uec8Hi+2qUtTfG2WWZBmMejQ==
"@tresjs/cientos@^3.5.0":
version "3.5.0"
resolved "https://registry.yarnpkg.com/@tresjs/cientos/-/cientos-3.5.0.tgz#9b3e27aaeae7b4eadc9f3fe28644c51c14843c36"
integrity sha512-wcM3K0U+64vGR2tutRXoXyHuRAjQyKKV7qpnQZI535ZLoREQk3SEVmBNVYnx/eedLWiM0KEoIIvkvQbDYRTllg==
"@tresjs/cientos@^3.5.1":
version "3.5.1"
resolved "https://registry.yarnpkg.com/@tresjs/cientos/-/cientos-3.5.1.tgz#763eb3a993c0fa91fe1ba94a30c22931b7a1f434"
integrity sha512-GQARgRmw906U0VZKHtyG2zuEL6FjPPpJOzxpyLznfsqyXxQgBRStVIgsbuGgserhyTjFlvXTVn0oyDylABnfVA==
dependencies:
"@tresjs/core" "3.3.0"
"@vueuse/core" "^10.4.1"
"@vueuse/core" "^10.5.0"
camera-controls "^2.7.2"
stats-gl "^1.0.5"
stats.js "^0.17.0"
three-stdlib "^2.26.0"
three-stdlib "^2.27.3"
"@tresjs/core@3.3.0", "@tresjs/core@^3.3.0":
"@tresjs/core@3.3.0":
version "3.3.0"
resolved "https://registry.yarnpkg.com/@tresjs/core/-/core-3.3.0.tgz#4e1d7d78118f60f84367ae24dad41d9341cabdce"
integrity sha512-kG+tBCRUvBBtaSWQkTkEQkYOhgvMoOwperT2ZmeIIK0tGXITNq+GY7ys6v5d8eFcAh+npY9us461j66VDU7Y0w==
@ -1453,10 +1453,18 @@
"@alvarosabu/utils" "^3.1.1"
"@vueuse/core" "^10.3.0"
"@tresjs/core@^3.4.1":
version "3.4.1"
resolved "https://registry.yarnpkg.com/@tresjs/core/-/core-3.4.1.tgz#175a26cebdeba6b7ab662f11f03eae2774e4d330"
integrity sha512-C48PNObHT9F85ci6xvo0ifngDQSSeZjKcxsaLyrHGq65XYGSN1XCFXA/FgsSE20WUkpeG2lPWBxNwE5dnhPqHw==
dependencies:
"@alvarosabu/utils" "^3.1.1"
"@vueuse/core" "^10.3.0"
"@types/draco3d@^1.4.0":
version "1.4.6"
resolved "https://registry.yarnpkg.com/@types/draco3d/-/draco3d-1.4.6.tgz#7214bf6c67afbc8637a57c49f2daa52b5d4c3268"
integrity sha512-tAyEGmnz6qcPqSWoHtO3tTobQCDW0tW36gVdDKyN0jkT2S2w6LABe0+DdVkfVDwNzTwR7cE7LQGiGJiAsdSNKg==
version "1.4.7"
resolved "https://registry.yarnpkg.com/@types/draco3d/-/draco3d-1.4.7.tgz#364adb25e8a623401d59a3b309827ce66d999216"
integrity sha512-sjx6hQ8UArRZf+2ZhpPkjJW8iCkyxar69/IElc9NHuGE40n0U9SuvxX59CHvF4xUH7qfJDQ2lIbANZ0HHJg+BQ==
"@types/json5@^0.0.29":
version "0.0.29"
@ -1476,9 +1484,9 @@
integrity sha512-Vrjz5N5Ia4SEzWWgIVwnHNEnb1UE1XMkvY5DGXrAeOGE9imk0hgTHh5GyDjLDJi9OTCn9oo9dXH1uToK1VRfrg==
"@types/offscreencanvas@^2019.6.4":
version "2019.7.1"
resolved "https://registry.yarnpkg.com/@types/offscreencanvas/-/offscreencanvas-2019.7.1.tgz#1ac01f5dfed9e093663cc25c62310714fe282016"
integrity sha512-+HSrJgjBW77ALieQdMJvXhRZUIRN1597L+BKvsyeiIlHHERnqjcuOLyodK3auJ3Y3zRezNKtKAhuQWYJfEgFHQ==
version "2019.7.2"
resolved "https://registry.yarnpkg.com/@types/offscreencanvas/-/offscreencanvas-2019.7.2.tgz#0b518a609c34d58f06c76fdf3b536ad2643e1eca"
integrity sha512-ujCjOxeA07IbEBQYAkoOI+XFw5sT3nhWJ/xZfPR6reJppDG7iPQPZacQiLTtWH1b3a2NYXWlxvYqa40y/LAixQ==
"@types/stats.js@*":
version "0.17.1"
@ -1505,11 +1513,16 @@
resolved "https://registry.yarnpkg.com/@types/web-bluetooth/-/web-bluetooth-0.0.18.tgz#74bd1c8fd3a2058cb6fc76b188fcded50a83d866"
integrity sha512-v/ZHEj9xh82usl8LMR3GarzFY1IrbXJw5L4QfQhokjRV91q+SelFqxQWSep1ucXEZ22+dSTwLFkXeur25sPIbw==
"@types/webxr@*", "@types/webxr@^0.5.2":
"@types/webxr@*":
version "0.5.5"
resolved "https://registry.yarnpkg.com/@types/webxr/-/webxr-0.5.5.tgz#9e0a27e809c8f76cc1ef525d9f96b8fd94ef9c42"
integrity sha512-HVOsSRTQYx3zpVl0c0FBmmmcY/60BkQLzVnpE9M1aG4f2Z0aKlBWfj4XZ2zr++XNBfkQWYcwhGlmuu44RJPDqg==
"@types/webxr@^0.5.2":
version "0.5.6"
resolved "https://registry.yarnpkg.com/@types/webxr/-/webxr-0.5.6.tgz#835c7ac9983a732e2e849d0d302bc735aa455126"
integrity sha512-/uWg82/WT+Pl18b2kkG6nlbiiaNIb8RN2mvvcGexGvwLvUrEhDhGBzYHiwa5nQPtin0hISyrXkKOKVScTK+kKg==
"@vitejs/plugin-basic-ssl@^1.0.1":
version "1.0.1"
resolved "https://registry.yarnpkg.com/@vitejs/plugin-basic-ssl/-/plugin-basic-ssl-1.0.1.tgz#48c46eab21e0730921986ce742563ae83fe7fe34"
@ -1655,7 +1668,7 @@
resolved "https://registry.yarnpkg.com/@vue/shared/-/shared-3.3.4.tgz#06e83c5027f464eef861c329be81454bc8b70780"
integrity sha512-7OjdcV8vQ74eiz1TZLzZP4JwqM5fA94K6yntPS5Z25r9HDuGNzaGdgvwKYq6S+MxwF0TFRwe50fIR/MYnakdkQ==
"@vueuse/core@^10.3.0", "@vueuse/core@^10.4.1":
"@vueuse/core@^10.3.0", "@vueuse/core@^10.5.0":
version "10.5.0"
resolved "https://registry.yarnpkg.com/@vueuse/core/-/core-10.5.0.tgz#04d1e6d26592bb997bb755a4830ea7583c3e8612"
integrity sha512-z/tI2eSvxwLRjOhDm0h/SXAjNm8N5ld6/SC/JQs6o6kpJ6Ya50LnEL8g5hoYu005i28L0zqB5L5yAl8Jl26K3A==
@ -4525,10 +4538,10 @@ text-table@^0.2.0:
resolved "https://registry.yarnpkg.com/text-table/-/text-table-0.2.0.tgz#7f5ee823ae805207c00af2df4a84ec3fcfa570b4"
integrity sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==
three-stdlib@^2.26.0:
version "2.27.2"
resolved "https://registry.yarnpkg.com/three-stdlib/-/three-stdlib-2.27.2.tgz#d9fb6e8341ad93aa12b71bec2b3480528d6e42bf"
integrity sha512-yjHaY4QHRqMi1yGIt5RzWtRFbcCj2YHoCaAY4pldphI5CMf9PoCc9N2UFuVbHqgITQRKnVoCo+OCMU2rIZTXjg==
three-stdlib@^2.27.3:
version "2.28.0"
resolved "https://registry.yarnpkg.com/three-stdlib/-/three-stdlib-2.28.0.tgz#597650398f3b044a159a3c2d99b4184c20392b46"
integrity sha512-gRbAmcKda5Bcfdx3dkXHAYDhtyOFtR6pXPn5FCqs6LXLbVBn3hovKXohas3aNXXJJXROjG0aQReEj4i5D2wENA==
dependencies:
"@types/draco3d" "^1.4.0"
"@types/offscreencanvas" "^2019.6.4"