增加 数字园区的场景

src/plugins/digitalPark/components/simplePark/laboratoryBuild.vue

@@ -0,0 +1,45 @@
+<!--
+ * @Description: 
+ * @Version: 1.668
+ * @Autor: 地虎降天龙
+ * @Date: 2024-05-06 16:35:42
+ * @LastEditors: 地虎降天龙
+ * @LastEditTime: 2024-05-07 16:00:40
+-->
+<template>
+    <primitive :object="meshMerged" cast-shadow receive-shadow :position="[-17, 0, 5]" :scale="[0.7, 0.7, 0.7]" name="实验楼" :rotation-y="Math.PI / 2" />
+    <primitive :object="nodes.Sketchfab_model" cast-shadow :position="[8, 0, 16]" :scale="[0.08, 0.08, 0.08]" name="树" />
+</template>
+<script setup>
+import { useTresContext } from '@tresjs/core'
+import { useGLTF, useAnimations } from '@tresjs/cientos'
+import * as THREE from 'three'
+import * as BufferGeometryUtils from 'three/addons/utils/BufferGeometryUtils.js'
+
+const { scene: model } = await useGLTF('./plugins/digitalPark/model/laboratoryBuild.gltf', { draco: true, decoderPath: './draco/' })
+const { scene } = useTresContext()
+
+const geometryArr = []
+const materialArr = []
+model.traverse((child) => {
+    child.updateMatrixWorld(true)
+    if (child.isMesh) {
+        child.geometry.applyMatrix4(child.matrixWorld)
+        geometryArr.push(child.geometry)
+
+        child.material.emissive = child.material.color
+        child.material.emissiveMap = child.material.map
+        child.material.emissiveIntensity = 0.1
+        child.material.envmap = scene.value.background
+        materialArr.push(child.material)
+    }
+})
+const geometryMerged = BufferGeometryUtils.mergeGeometries(geometryArr, true)
+const meshMerged = new THREE.Mesh(geometryMerged, materialArr)
+
+const { nodes, animations } = await useGLTF('./plugins/digitalPark/model/tree_animate/scene.gltf', { draco: true, decoderPath: './draco/' })
+
+const { actions } = useAnimations(animations, nodes.Sketchfab_model)
+const currentAction = actions.MorphBake
+currentAction.play()
+</script>

src/plugins/digitalPark/components/simplePark/officeBuild.vue

@@ -0,0 +1,34 @@
+<!--
+ * @Description: 
+ * @Version: 1.668
+ * @Autor: 地虎降天龙
+ * @Date: 2024-05-06 16:35:42
+ * @LastEditors: 地虎降天龙
+ * @LastEditTime: 2024-05-07 15:31:11
+-->
+<template>
+    <primitive :object="model" cast-shadow receive-shadow :position="[16, 0, -5]" :scale="[0.2, 0.2, 0.2]" name="办公大厅" :rotation-y="Math.PI" />
+</template>
+<script lang="ts" setup>
+import { useTresContext } from '@tresjs/core'
+import { useGLTF } from '@tresjs/cientos'
+import * as THREE from 'three'
+
+const { scene: model } = await useGLTF('./plugins/digitalPark/model/officeBuild.glb', { draco: true, decoderPath: './draco/' })
+const { scene } = useTresContext()
+model.traverse((child) => {
+    if (child.isMesh) {
+        child.frustumCulled = false // 不剔除
+        child.material.side = THREE.DoubleSide
+        child.castShadow = true
+        child.receiveShadow = true
+        child.material.emissive = child.material.color
+        child.material.emissiveMap = child.material.map
+        child.material.emissiveIntensity = 0.8
+        child.material.envmap = scene.value.background
+    }
+})
+// renderer.value.shadowMap.enabled = true
+// renderer.value.shadowMap.type = THREE.PCFSoftShadowMap
+// renderer.value.shadowMap.opacity = 0
+</script>

src/plugins/digitalPark/components/simplePark/pool.vue

@@ -0,0 +1,28 @@
+<!--
+ * @Description: 
+ * @Version: 1.668
+ * @Autor: 地虎降天龙
+ * @Date: 2024-05-07 15:53:08
+ * @LastEditors: 地虎降天龙
+ * @LastEditTime: 2024-05-07 16:02:29
+-->
+<template>
+    <primitive :object="model" cast-shadow :position="[12, 1, -16]" :scale="[0.6, 0.5, 0.6]" name="水池" />
+</template>
+<script lang="ts" setup>
+import { useTresContext } from '@tresjs/core'
+import { useGLTF } from '@tresjs/cientos'
+import * as THREE from 'three'
+
+const { scene: model, materials } = await useGLTF('./plugins/digitalPark/model/pool.glb', { draco: true, decoderPath: './draco/' })
+const { scene } = useTresContext()
+debugger
+model.traverse((child) => {
+    if (child.isMesh) {
+        child.material.emissive = child.material.color
+        child.material.emissiveMap = child.material.map
+        child.material.emissiveIntensity = 1
+        child.material.envmap = scene.value.background
+    }
+})
+</script>

src/plugins/digitalPark/config.js

@@ -0,0 +1,21 @@
+/*
+ * @Description:
+ * @Version: 1.668
+ * @Autor: 地虎降天龙
+ * @Date: 2024-05-06 15:56:52
+ * @LastEditors: 地虎降天龙
+ * @LastEditTime: 2024-05-06 16:00:59
+ */
+export default {
+    name: 'digitalPark',
+    title: '数字园区',
+    intro: '基于园区场景的可视化展示插件',
+    version: '0.0.1',
+    author: '地虎降天龙',
+    website: 'https://gitee.com/hawk86104',
+    state: 'active',
+    creatTime: '2024-05-06',
+    updateTime: '2024-05-06',
+    require: [],
+    preview: [{ src: 'plugins/digitalPark/preview/simplePark.png', type: 'img', name: 'simplePark', title: '简单园区' }],
+}

src/plugins/digitalPark/lib/utils.js

@@ -0,0 +1,24 @@
+import * as THREE from 'three'
+/**
+ * 开启模型阴影 数组中移除阴影
+ */
+export const openCastShadow = (scene, names = []) => {
+    scene.traverse((mesh) => {
+        if (mesh.type === 'Mesh' && names.indexOf(mesh.name) === -1) {
+            mesh.frustumCulled = false // 不剔除
+            mesh.material.side = THREE.DoubleSide // 双面显示
+            mesh.castShadow = true // 阴影
+        }
+    })
+}
+/**
+ * 接收阴影
+ * @param names 数组中的可以接收阴影
+ */
+export const openReceiveShadow = (scene, names = []) => {
+    scene.traverse((mesh) => {
+        if (names.length === 0 || names.indexOf(mesh.name) !== -1) {
+            mesh.receiveShadow = true
+        }
+    })
+}

src/plugins/digitalPark/pages/simplePark.vue

@@ -0,0 +1,69 @@
+<!--
+ * @Description: 
+ * @Version: 1.668
+ * @Autor: 地虎降天龙
+ * @Date: 2024-05-06 15:56:52
+ * @LastEditors: 地虎降天龙
+ * @LastEditTime: 2024-05-07 15:58:19
+-->
+<template>
+    <loading />
+    <TresCanvas v-bind="state">
+        <TresPerspectiveCamera :position="[17, 10, 52]" :fov="45" :near="0.1" :far="1000" />
+        <OrbitControls v-bind="controlsState" />
+        <TresDirectionalLight ref="TDirectionalLight" v-light-helper :position="[50, 50, -5]" :intensity="3.0" :castShadow="true" />
+
+        <Suspense>
+            <officeBuild />
+        </Suspense>
+        <Suspense>
+            <laboratoryBuild />
+        </Suspense>
+        <Suspense>
+            <pool />
+        </Suspense>
+
+        <Suspense>
+            <skyBoxDmesh :environment="false" texture="https://cdn.polyhaven.com/asset_img/primary/kloofendal_48d_partly_cloudy_puresky.png?width=1920" />
+        </Suspense>
+    </TresCanvas>
+</template>
+
+<script setup lang="ts">
+import { randomLoading as loading } from 'PLS/UIdemo'
+import { reactive, shallowRef, watchEffect } from 'vue'
+import { OrbitControls } from '@tresjs/cientos'
+import { skyBoxDmesh } from 'PLS/skyBox'
+import { vLightHelper } from '@tresjs/core'
+import * as THREE from 'three'
+import officeBuild from '../components/simplePark/officeBuild.vue'
+import laboratoryBuild from '../components/simplePark/laboratoryBuild.vue'
+import pool from '../components/simplePark/pool.vue'
+
+const state = reactive({
+    // clearColor: '#201919',
+    shadows: true,
+    windowSize: true,
+})
+
+const controlsState = reactive({
+    enableDamping: true,
+    dampingFactor: 0.05,
+})
+
+const TDirectionalLight = shallowRef()
+
+watchEffect(() => {
+    if (TDirectionalLight.value) {
+        TDirectionalLight.value.shadow.mapSize.set(2048, 2048)
+        TDirectionalLight.value.shadow.bias = -0.00001
+        TDirectionalLight.value.shadow.color = new THREE.Color(0x000000)
+        TDirectionalLight.value.shadow.camera.near = 0.5 // default
+        TDirectionalLight.value.shadow.camera.far = 50000 // default
+        TDirectionalLight.value.shadow.camera.top = 50
+        TDirectionalLight.value.shadow.camera.right = 50
+        TDirectionalLight.value.shadow.camera.left = -50
+        TDirectionalLight.value.shadow.camera.bottom = -50
+    }
+})
+</script>

src/plugins/skyBox/components/skyBoxDmesh.vue

@@ -4,20 +4,27 @@
  * @Autor: 地虎降天龙
  * @Date: 2024-01-25 10:23:43
  * @LastEditors: 地虎降天龙
- * @LastEditTime: 2024-01-26 15:42:15
+ * @LastEditTime: 2024-05-07 15:27:54
 -->
 
 <template></template>
 
 <script lang="ts" setup>
-import * as THREE from "three"
+import * as THREE from 'three'
 import { useTresContext } from '@tresjs/core'
 import { useTexture } from '@tresjs/core'
 
-const props = withDefaults(defineProps<{
-	texture: string
-}>(), {
-})
+const props = withDefaults(
+    defineProps<{
+        texture: string
+        background?: boolean
+        environment?: boolean
+    }>(),
+    {
+        background: true,
+        environment: true,
+    },
+)
 const { scene } = useTresContext()
 
 const { map: pTexture } = await useTexture({ map: props.texture })
@@ -28,9 +35,8 @@ pTexture.minFilter = THREE.LinearFilter
 pTexture.mapping = THREE.EquirectangularReflectionMapping
 
 //该纹理贴图将会被设为场景中所有物理材质的环境贴图。 然而，该属性不能够覆盖已存在的、已分配给 MeshStandardMaterial.envMap 的贴图。默认为null。
-scene.value.environment = pTexture
+scene.value.environment = props.environment ? pTexture : null
 
 //在渲染场景的时候将设置背景，且背景总是首先被渲染的。 可以设置一个用于的“clear”的Color（颜色）、一个覆盖canvas的Texture（纹理）， 或是 a cubemap as a CubeTexture or an equirectangular as a Texture。
-scene.value.background = pTexture
-
-</script>
+scene.value.background = props.background ? pTexture : null
+</script>

src/plugins/skyBox/index.js

@@ -4,12 +4,13 @@
  * @Autor: 地虎降天龙
  * @Date: 2024-03-27 22:08:16
  * @LastEditors: 地虎降天龙
- * @LastEditTime: 2024-05-06 08:30:43
+ * @LastEditTime: 2024-05-06 17:26:28
  */
 
 import environmentForLightformers from './components/environmentForLightformers.vue'
 import skyBoxAmesh from './components/skyBoxAmesh.vue'
 import skyBoxBmesh from './components/skyBoxBmesh.vue'
+import skyBoxDmesh from './components/skyBoxDmesh.vue'
 import groundProjectedEnv from './components/groundProjectedEnvCom.vue'
 
-export { environmentForLightformers, skyBoxAmesh, groundProjectedEnv, skyBoxBmesh }
+export { environmentForLightformers, skyBoxAmesh, groundProjectedEnv, skyBoxBmesh, skyBoxDmesh }