1、修复了一些小的问题

2、增加了 "vite-plugin-glsl": "0.2.2" 版本，优化glsl 的展示
2025-04-04 06:02:45 +08:00 · 2024-03-07 10:30:18 +08:00 · 2024-03-07 10:30:18 +08:00 · 4a5286a367
commit 4a5286a367
parent 037c45935c
12 changed files with 116 additions and 34 deletions
--- a/.env
+++ b/.env
@ -2,4 +2,4 @@
 FES_APP_PLUGINS=false

 # 自动替换默认目录为插件的preview.vue
-FES_APP_PREINDEX=false
+FES_APP_PREINDEX=false
--- a/.env.predev
+++ b/.env.predev
@ -2,4 +2,4 @@
 FES_APP_PLUGINS=true

 # 自动替换默认目录为插件的preview.vue
-FES_APP_PREINDEX=true
+FES_APP_PREINDEX=true
--- a/.eslintrc.js
+++ b/.eslintrc.js
@ -4,7 +4,7 @@
 * @Autor: 地虎降天龙
 * @Date: 2023-10-16 10:53:09
 * @LastEditors: 地虎降天龙
- * @LastEditTime: 2024-03-05 18:51:52
+ * @LastEditTime: 2024-03-07 10:07:04
 */
 module.exports = {
    extends: ['@webank/eslint-config-webank/vue.js'],
@ -36,11 +36,11 @@ module.exports = {
        // "semi": "off",
        // "init-declarations": "off",
        // "space-unary-ops": "off",
-        // 'import/no-unresolved': [
-        //     2,
-        //     {
-        //         ignore: ['^@/', 'PLS'], // 设置的路径别名
-        //     },
-        // ],
+        'import/no-unresolved': [
+            2,
+            {
+                ignore: ['^@/', 'PLS'], // 设置的路径别名
+            },
+        ],
    },
 };
--- a/.fes.js
+++ b/.fes.js
@ -4,14 +4,14 @@
 * @Autor: 地虎降天龙
 * @Date: 2023-10-16 10:53:09
 * @LastEditors: 地虎降天龙
- * @LastEditTime: 2024-01-04 10:35:21
+ * @LastEditTime: 2024-03-07 10:19:54
 */
 // import { resolve } from 'path';
 import { join } from 'path';
-import { defineBuildConfig, someApi, plugin, ApplyPluginsType } from '@fesjs/fes';
-import { templateCompilerOptions } from '@tresjs/core';
-import UnoCSS from 'unocss/vite';
-// import glsl from 'vite-plugin-glsl';
+import { defineBuildConfig } from '@fesjs/fes'
+import { templateCompilerOptions } from '@tresjs/core'
+import UnoCSS from 'unocss/vite'
+import glsl from 'vite-plugin-glsl'

 export default defineBuildConfig({
    title: 'TvT.js',
@ -41,7 +41,7 @@ export default defineBuildConfig({
            UnoCSS({
                /* options */
            }),
-            // glsl(),
+            glsl()
        ],
        server: {
            host: "0.0.0.0"
--- a/index.html
+++ b/index.html
@ -1,3 +1,11 @@
+<!--
+ * @Description: 
+ * @Version: 1.668
+ * @Autor: 地虎降天龙
+ * @Date: 2024-03-07 09:46:12
+ * @LastEditors: 地虎降天龙
+ * @LastEditTime: 2024-03-07 10:02:16
+-->
 <!DOCTYPE html>
 <html lang="en">

--- a/package.json
+++ b/package.json
@ -21,7 +21,8 @@
    "@types/offscreencanvas": "^2019.7.3",
    "@types/three": "0.161.1",
    "@webank/eslint-config-webank": "1.3.1",
-    "cross-env": "^7.0.3"
+    "cross-env": "^7.0.3",
+    "vite-plugin-glsl": "0.2.2"
  },
  "dependencies": {
    "3d-tiles-renderer": "^0.3.25",
--- a/src/common/vite-plugin-glsl-ext.d.ts
+++ b/src/common/vite-plugin-glsl-ext.d.ts
@ -0,0 +1,73 @@
+/*
+ * @Description: 
+ * @Version: 1.668
+ * @Autor: 地虎降天龙
+ * @Date: 2024-03-07 10:27:42
+ * @LastEditors: 地虎降天龙
+ * @LastEditTime: 2024-03-07 10:27:53
+ */
+/**
+ * @const
+ * @readonly
+ * @kind module
+ * @description Generic shaders
+ */
+declare module '*.glsl' {
+	const shader: string;
+	export default shader;
+}
+
+/**
+ * @const
+ * @readonly
+ * @kind module
+ * @description WebGPU shaders
+ */
+declare module '*.wgsl' {
+	const shader: string;
+	export default shader;
+}
+
+/**
+ * @const
+ * @readonly
+ * @kind module
+ * @description Vertex shaders
+ */
+declare module '*.vert' {
+	const shader: string;
+	export default shader;
+}
+
+/**
+ * @const
+ * @readonly
+ * @kind module
+ * @description Fragment shaders
+ */
+declare module '*.frag' {
+	const shader: string;
+	export default shader;
+}
+
+/**
+ * @const
+ * @readonly
+ * @kind module
+ * @description Vertex shaders
+ */
+declare module '*.vs' {
+	const shader: string;
+	export default shader;
+}
+
+/**
+ * @const
+ * @readonly
+ * @kind module
+ * @description Fragment shaders
+ */
+declare module '*.fs' {
+	const shader: string;
+	export default shader;
+}
--- a/src/plugins/digitalCity/components/buildings/buildingsModelCustomShader.vue
+++ b/src/plugins/digitalCity/components/buildings/buildingsModelCustomShader.vue
@ -4,8 +4,8 @@ import { useRenderLoop } from '@tresjs/core'
 // import { CustomShaderMaterial } from '@tresjs/cientos'
 import CustomShaderMaterial from 'three-custom-shader-material/vanilla'
 import { ref, watchEffect, watch } from 'vue';
-import vertexShader from '../../shaders/buildingsCustomShaderMaterial.vert?raw'
-import fragmentShader from '../../shaders/buildingsCustomShaderMaterial.frag?raw'
+import vertexShader from '../../shaders/buildingsCustomShaderMaterial.vert'
+import fragmentShader from '../../shaders/buildingsCustomShaderMaterial.frag'
 import * as THREE from 'three'
 const props = withDefaults(defineProps<{
 	model: any
@ -34,7 +34,7 @@ const setColorMaterial = (type: any, param: string) => {
 	} else if (type === 'land') {
 		// 设置城市地面（mesh物体），材质基本颜色
 		materials = Array.isArray(LANDMASS.material) ? LANDMASS.material : [LANDMASS.material]
-		materials.forEach((material) => {
+		materials.forEach((material:any) => {
 			material[param].setStyle(props.landColor);
 			material.side = THREE.DoubleSide //双面渲染
 		})
@ -77,7 +77,6 @@ const setEffectMaterial = () => {
 				value: props.gradient
 			}
 		},
-
 		depthWrite: true,
 		depthTest: true,
 		transparent: true,			//如果材质透明，那么楼宇就被渲染到后面了
--- a/src/plugins/floor/pages/reflectorDiffuse.vue
+++ b/src/plugins/floor/pages/reflectorDiffuse.vue
@ -4,7 +4,7 @@
 * @Autor: 地虎降天龙
 * @Date: 2023-12-22 08:09:35
 * @LastEditors: 地虎降天龙
- * @LastEditTime: 2023-12-25 11:31:18
+ * @LastEditTime: 2024-03-07 10:12:27
 -->

 <template>
@ -12,7 +12,7 @@
 		<TresPerspectiveCamera :position="[-15, 15, -15]" :fov="45" :near="0.1" :far="10000" :look-at="[0, 0, 0]" />
 		<OrbitControls enableDamping />
 		<TresAmbientLight :intensity="10.0" />
-		<TresDirectionalLight :position="[0, 8, 0]" :intensity="10" v-light-helper color="#fff" />
+		<TresDirectionalLight v-light-helper :position="[0, 8, 0]" :intensity="10" color="#fff" />
 		<Box :args="[1, 1, 1]" color="orange" :position="[3, 1, 0]" />
 		<TresMesh :position="[0, 2, 4]">
 			<TresBoxGeometry :args="[1, 1, 1]" />
@ -27,10 +27,10 @@
 <script setup lang="ts">
 import { TresCanvas } from '@tresjs/core'
 import { OrbitControls, Box, vLightHelper } from '@tresjs/cientos'
-import reflectorDiffuse from '../components/reflectorDiffuse.vue'

 import { reactive } from 'vue'
 import { Pane } from 'tweakpane'
+import reflectorDiffuse from '../components/reflectorDiffuse.vue'

 const configState = reactive({
 	mirror: 0.9,	// 去除纹理 镜面化 
--- a/src/plugins/floor/pages/whiteFloor.vue
+++ b/src/plugins/floor/pages/whiteFloor.vue
@ -4,7 +4,7 @@
 * @Autor: 地虎降天龙
 * @Date: 2024-01-25 10:20:13
 * @LastEditors: 地虎降天龙
- * @LastEditTime: 2024-01-26 14:39:17
+ * @LastEditTime: 2024-03-07 10:07:53
 -->

 <template>
@ -12,8 +12,7 @@
 		<TresPerspectiveCamera :position="[15, 15, 15]" :fov="45" :near="0.1" :far="10000" :look-at="[0, 0, 0]" />
 		<OrbitControls enableDamping />
 		<TresAmbientLight :intensity="10.0" />
-		<TresDirectionalLight ref="TDirectionalLight" :position="[0, 10, 10]" :intensity="1" v-light-helper color="#ffffff"
-			cast-shadow />
+		<TresDirectionalLight ref="TDirectionalLight" v-light-helper :position="[0, 10, 10]" :intensity="1" color="#ffffff" cast-shadow />
 		<Box :args="[1, 1, 1]" color="orange" :position="[3, 2, 1]" cast-shadow />
 		<TresMesh :position="[0, 2, -4]" cast-shadow>
 			<TresBoxGeometry :args="[1, 1, 1]" />
@ -35,10 +34,10 @@
 import * as THREE from "three"
 import { TresCanvas } from '@tresjs/core'
 import { OrbitControls, vLightHelper, Box } from '@tresjs/cientos'
-import whiteFloorMesh from '../components/whiteFloorMesh.vue'
 import skyBox from 'PLS/skyBox/components/skyBoxAmesh.vue'
 import { shallowRef, watchEffect, reactive } from 'vue'
 import { Pane } from 'tweakpane'
+import whiteFloorMesh from '../components/whiteFloorMesh.vue'

 const tcConfig = {
 	clearColor: "#201919",
--- a/src/plugins/postProcessing/pages/webglFrameBuffer.vue
+++ b/src/plugins/postProcessing/pages/webglFrameBuffer.vue
@ -1,12 +1,12 @@
-<template >
+<template>
    <canvas id="canvaswebgl" style="height: 500px; width: 500px"></canvas>
 </template>

 <script setup lang="ts">
-import { OrbitControls } from '@tresjs/cientos';
-import { initShaders, resizeCanvasToDisplaySize, degToRad } from '../common/ice-utils.js';
 import * as glMatrix from 'gl-matrix';
 import { onMounted } from 'vue';
+// eslint-disable-next-line import/extensions
+import { initShaders, resizeCanvasToDisplaySize, degToRad } from '../common/ice-utils.js'

 const vertexString = `
 attribute vec4 a_position;
@ -26,10 +26,10 @@ void main(){
 }
 `;
 const main = function () {
-    var canvas = document.querySelector('#canvaswebgl');
-    var gl = canvas.getContext('webgl');
+    const canvas = document.querySelector('#canvaswebgl') as HTMLCanvasElement;
+    const gl = canvas?.getContext('webgl');
    if (!gl) {
-        return;
+        return
    }
    // 初始化shader
    var program = initShaders(gl, vertexString, fragmentString);
--- a/tsconfig.json
+++ b/tsconfig.json
@ -3,7 +3,9 @@
    "outDir": "build/dist",
    "module": "esnext",
    "target": "esnext",
-    "types": [],
+    "types": [
+      "./common/vite-plugin-glsl/vite-plugin-glsl-ext.d.ts"
+    ],
    "lib": [
      "esnext",
      "dom"