1、增加了 数字大脑

2、关于库 vite-plugin-glsl 的增加 出现 commonjs 的 require错误 已经联系了 fes.js的作者，等待他们的更新

.fes.js

@@ -4,13 +4,14 @@
  * @Autor: 地虎降天龙
  * @Date: 2023-10-16 10:53:09
  * @LastEditors: 地虎降天龙
- * @LastEditTime: 2023-11-09 11:45:30
+ * @LastEditTime: 2023-11-14 11:34:49
  */
 // import { resolve } from 'path';
 import { join } from 'path';
 import { defineBuildConfig } from '@fesjs/fes';
 import { templateCompilerOptions } from '@tresjs/core';
 import UnoCSS from 'unocss/vite';
+// import glsl from 'vite-plugin-glsl';
 
 export default defineBuildConfig({
     access: {
@@ -45,9 +46,11 @@ export default defineBuildConfig({
             UnoCSS({
                 /* options */
             }),
+            // glsl(),
         ],
     },
     alias: { PLS: join(__dirname, './src/plugins') },
     // { find: 'pls', replacement: resolve(__dirname, './src/plugins') },
     // { '@': join(__dirname, '/src') }
 });
+

package.json

@@ -34,7 +34,8 @@
         "three": "^0.157.0",
         "unocss": "^0.56.5",
         "vanta": "^0.5.24",
+        "vite-plugin-glsl": "^1.1.2",
         "vue": "^3.2.47"
     },
     "private": true
-}
+}

src/app.jsx

@@ -4,10 +4,9 @@
  * @Autor: 地虎降天龙
  * @Date: 2023-10-16 10:53:09
  * @LastEditors: 地虎降天龙
- * @LastEditTime: 2023-11-05 10:15:53
+ * @LastEditTime: 2023-11-14 11:46:55
  */
-import { defineRuntimeConfig,useModel } from '@fesjs/fes';
-
+import { defineRuntimeConfig,useModel,defineBuildConfig } from '@fesjs/fes'
 import { FMenu } from '@fesjs/fes-design';
 import PageLoading from '@/components/pageLoading.vue';
 import UserCenter from '@/components/userCenter.vue';

src/plugins/digitalCity/components/buildings/buildingsLines.vue

@@ -4,7 +4,7 @@
  * @Autor: 地虎降天龙
  * @Date: 2023-10-17 09:35:18
  * @LastEditors: 地虎降天龙
- * @LastEditTime: 2023-10-25 15:33:45
+ * @LastEditTime: 2023-11-14 09:20:42
 -->
 <script setup lang="ts">
 import { Color, EdgesGeometry, ShaderMaterial } from 'three';

src/plugins/medical/common/util.js

@@ -0,0 +1,9 @@
+export const loadOBJ = (filepath, loader) => new Promise((resolve, reject) => {
+	loader.setCrossOrigin('Anonymous');//跨域问题
+	loader.load(filepath, (object) => {
+		resolve(object);
+	}, (xhr) => { console.log(`${xhr.loaded / xhr.total * 100}% loaded`); }, (error) => {
+		console.error(error);
+		reject(error);
+	});
+})

src/plugins/medical/components/cloudPoints.vue

@@ -0,0 +1,56 @@
+<!--
+ * @Description: 
+ * @Version: 1.668
+ * @Autor: 地虎降天龙
+ * @Date: 2023-11-14 09:01:11
+ * @LastEditors: 地虎降天龙
+ * @LastEditTime: 2023-11-14 16:24:49
+-->
+<template>
+	<primitive :object="cloudModel" />
+</template>
+
+<script setup lang="ts">
+const props = withDefaults(defineProps<{
+	model: Group
+	color?: string,
+	opacity?: number
+}>(), {
+	color: '#FFF',
+	opacity: 1.0,
+})
+import { Points, PointsMaterial, Mesh, Group, Color } from 'three'
+import { watchEffect } from 'vue';
+
+const cloudModel = new Group()
+props.model.traverse((child) => {
+	if (child instanceof Mesh) {
+		const pbgeometry = child.geometry.clone()
+		// child.removeFromParent()
+		child.geometry.dispose()
+		child.material.dispose()
+		const pmaterial = new PointsMaterial({ color: props.color });
+		pmaterial.opacity = props.opacity
+		pmaterial.transparent = true
+		const pointsMesh = new Points(pbgeometry, pmaterial)
+		cloudModel.add(pointsMesh)
+	}
+})
+
+watchEffect(() => {
+	if (props.color) {
+		cloudModel.traverse((child) => {
+			if (child instanceof Points) {
+				child.material.color = new Color(props.color)
+			}
+		})
+	}
+	if (props.opacity) {
+		cloudModel.traverse((child) => {
+			if (child instanceof Points) {
+				child.material.opacity = props.opacity
+			}
+		})
+	}
+});
+</script>

src/plugins/medical/components/xRayEffect.vue

@@ -0,0 +1,115 @@
+<!--
+ * @Description: 
+ * @Version: 1.668
+ * @Autor: 地虎降天龙
+ * @Date: 2023-11-14 10:06:40
+ * @LastEditors: 地虎降天龙
+ * @LastEditTime: 2023-11-14 16:30:45
+-->
+<template>
+	<TresMesh ref="TresMeshRef">
+		<TresBufferGeometry></TresBufferGeometry>
+		<TresShaderMaterial v-bind="xRayMaterial"></TresShaderMaterial>
+	</TresMesh>
+</template>
+
+<script setup lang="ts">
+import * as THREE from 'three'
+import { useTexture, useRenderLoop, useTresContext } from '@tresjs/core'
+// import xRayVertex from '../shaders/xRay.vert';
+// import xRayFrag from '../shaders/xRay.frag';
+import * as BufferGeometryUtils from 'three/addons/utils/BufferGeometryUtils.js';
+import { ref, watchEffect } from 'vue';
+
+const props = withDefaults(defineProps<{
+	model: THREE.Group
+	color?: string
+	opacity?: number
+}>(), {
+	color: '#84ccff',
+	opacity: 1.0,
+})
+
+const xRayVertex = `
+uniform float c;
+uniform float p;
+uniform float uTime;
+varying float intensity;
+varying  vec2 vUv;
+void main(){
+    vUv = uv;
+    vec3 vNormal = normalize( normalMatrix * normal );
+    intensity = pow(c - abs(dot(vNormal, vec3(0, 0, 1))), p);
+    gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
+ }
+`
+const xRayFrag = `
+uniform vec3 glowColor;
+uniform sampler2D lightningTexture;
+varying float intensity;
+varying vec2 vUv;
+uniform float offsetY;
+uniform float uTime;
+uniform float uOpacity;
+
+void main(){
+  vec2 uv=vUv;
+  uv.y+=offsetY;
+  vec3 glow=glowColor*intensity;
+  vec3 color=vec3(step(.1,uv.y)-step(.2,uv.y))-vec3(texture2D(lightningTexture,uv));
+  float alpha=clamp(cos(uTime*3.),.5,1.);
+  gl_FragColor=vec4(glow+color,alpha*uOpacity);
+}
+`
+const TresMeshRef = ref()
+const brainBufferGeometries = [] as Array<THREE.BufferGeometry>
+props.model.traverse((child) => {
+	if (child instanceof THREE.Mesh) {
+		child.geometry.verticesNeedUpdate = true
+		brainBufferGeometries.push(child.geometry)
+	}
+})
+const pTexture = (await useTexture({ map: './plugins/medical/image/brainXRayLight.png' })) as { map: THREE.Texture }
+const xRayMaterial = {
+	uniforms: {
+		c: { type: 'f', value: 1.11 },
+		p: { type: 'f', value: 1.0 },
+		glowColor: { type: 'c', value: new THREE.Color(props.color) },
+		lightningTexture: { type: 't', value: pTexture.map },
+		offsetY: { type: 'f', value: 0.1 },
+		uTime: { type: 'f', value: 0.0 },
+		uOpacity: { type: 'f', value: props.opacity },
+	},
+	vertexShader: xRayVertex,
+	fragmentShader: xRayFrag,
+	side: THREE.DoubleSide,
+	blending: THREE.AdditiveBlending,
+	depthWrite: false,
+}
+xRayMaterial.uniforms.offsetY.value = Math.sin(5.0);
+const { camera } = useTresContext()
+const { onLoop } = useRenderLoop()
+onLoop(({ delta }) => {
+	if (camera.value.position && TresMeshRef.value) {
+		xRayMaterial.uniforms.uTime.value += delta;
+	}
+})
+
+watchEffect(() => {
+	if (TresMeshRef.value) {
+		TresMeshRef.value.geometry.dispose()
+		TresMeshRef.value.geometry = BufferGeometryUtils.mergeGeometries(
+			brainBufferGeometries
+		);
+		// TresMeshRef.value.geometry.computeVertexNormals()
+		// TresMeshRef.value.geometry.normalizeNormals()
+		// TresMeshRef.value.geometry.computeTangents()
+	}
+	if (props.color) {
+		xRayMaterial.uniforms.glowColor.value = new THREE.Color(props.color)
+	}
+	if (props.opacity) {
+		xRayMaterial.uniforms.uOpacity.value = props.opacity
+	}
+});
+</script>

src/plugins/medical/config.js

@@ -0,0 +1,22 @@
+/*
+ * @Description: 
+ * @Version: 1.668
+ * @Autor: 地虎降天龙
+ * @Date: 2023-11-10 16:11:27
+ * @LastEditors: 地虎降天龙
+ * @LastEditTime: 2023-11-14 16:38:55
+ */
+
+export default {
+	"name": "medical",
+	"title": "医疗行业",
+	"intro": "医疗行业数字化例子",
+	"version": "0.0.1",
+	"author": "地虎降天龙",
+	"website": "www.icegl.cn",
+	"state": "active",
+	"require": [],
+	"preview": [
+		{ "src": "plugins/medical/preview/digitalBrain.png", "type": "img", "name": "digitalBrain", "title": "数字大脑" },
+	]
+}

src/plugins/medical/pages/digitalBrain.vue

@@ -0,0 +1,76 @@
+<!--
+ * @Description: 
+ * @Version: 1.668
+ * @Autor: 地虎降天龙
+ * @Date: 2023-11-10 16:13:11
+ * @LastEditors: 地虎降天龙
+ * @LastEditTime: 2023-11-14 16:39:28
+-->
+<template>
+	<TresCanvas v-bind="state" window-size>
+		<TresPerspectiveCamera :position="[100, 400, 500]" :fov="45" :near="0.1" :far="10000" :look-at="[0, 0, 0]" />
+		<OrbitControls v-bind="controlsState" />
+		<TresAmbientLight :intensity="0.5" />
+		<TresGridHelper :args="[400, 10]" />
+		<TresGroup :position="[0, 120, 0]">
+			<cloudPoints v-if="cloudPointsState.show" :model="model" v-bind="cloudPointsState"></cloudPoints>
+			<Suspense>
+				<xRayEffect v-if="xRayState.show" :model="model" v-bind="xRayState" />
+			</Suspense>
+		</TresGroup>
+	</TresCanvas>
+</template>
+
+
+<script setup lang="ts">
+import { SRGBColorSpace, BasicShadowMap, NoToneMapping } from 'three'
+import { reactive } from 'vue'
+import { TresCanvas } from '@tresjs/core'
+import { OrbitControls } from '@tresjs/cientos'
+import { OBJLoader } from 'three/addons/loaders/OBJLoader.js';
+import { Pane } from 'tweakpane';
+import { loadOBJ } from '../common/util'
+import cloudPoints from '../components/cloudPoints.vue'
+import xRayEffect from '../components/xRayEffect.vue'
+
+const cloudPointsState = reactive({
+	color: '#fff',
+	show: true,
+	opacity: 1.0
+})
+const paneControl = new Pane({ title: '参数', });
+paneControl.addBinding(cloudPointsState, 'show', { label: '点云显示' })
+paneControl.addBinding(cloudPointsState, 'color', { label: '点云颜色' })
+paneControl.addBinding(cloudPointsState, 'opacity', {
+	label: '点云透明度', min: 0,
+	max: 1,
+	step: 0.1,
+})
+const xRayState = reactive({
+	color: '#84ccff',
+	show: true,
+	opacity: 1.0
+})
+paneControl.addBinding(xRayState, 'show', { label: '脑组织显示' })
+paneControl.addBinding(xRayState, 'color', { label: '脑组织颜色' })
+paneControl.addBinding(xRayState, 'opacity', {
+	label: '脑组织透明度', min: 0,
+	max: 1,
+	step: 0.1,
+})
+const path = './plugins/medical/model/BrainUVs.obj';
+const loader = new OBJLoader()
+const model = await loadOBJ(path, loader)
+const state = reactive({
+	clearColor: '#000',
+	shadows: true,
+	alpha: false,
+	shadowMapType: BasicShadowMap,
+	outputColorSpace: SRGBColorSpace,
+	toneMapping: NoToneMapping,
+})
+const controlsState = reactive({
+	autoRotate: true,
+	autoRotateSpeed: 2,
+})
+</script>

src/plugins/medical/shaders/xRay.frag

@@ -0,0 +1,15 @@
+uniform vec3 glowColor;
+uniform sampler2D lightningTexture;
+varying float intensity;
+varying vec2 vUv;
+uniform float offsetY;
+uniform float uTime;
+
+void main(){
+  vec2 uv=vUv;
+  uv.y+=offsetY;
+  vec3 glow=glowColor*intensity;
+  vec3 color=vec3(step(.1,uv.y)-step(.2,uv.y))-vec3(texture2D(lightningTexture,uv));
+  float alpha=clamp(cos(uTime*3.),.5,1.);
+  gl_FragColor=vec4(glow+color,alpha);
+}

src/plugins/medical/shaders/xRay.vert

@@ -0,0 +1,14 @@
+uniform vec3 viewVector;
+uniform float c;
+uniform float p;
+uniform float uTime;
+varying float intensity;
+varying vec2 vUv;
+
+void main(){
+    vUv=uv;
+    vec3 vNormal=normalize(normalMatrix*normal);
+    vec3 vNormel=normalize(normalMatrix*viewVector);
+    intensity=pow(c-abs(dot(vNormal,vec3(0,0,1))),p);
+    gl_Position=projectionMatrix*modelViewMatrix*vec4(position,1.);
+}

tsconfig.json

@@ -3,6 +3,9 @@
     "outDir": "build/dist",
     "module": "esnext",
     "target": "esnext",
+    "types": [
+      "vite-plugin-glsl/ext"
+    ],
     "lib": [
       "esnext",
       "dom"

yarn.lock

@@ -1451,7 +1451,7 @@
     estree-walker "^2.0.1"
     picomatch "^2.2.2"
 
-"@rollup/pluginutils@^5.0.4":
+"@rollup/pluginutils@^5.0.2", "@rollup/pluginutils@^5.0.4":
   version "5.0.5"
   resolved "https://registry.yarnpkg.com/@rollup/pluginutils/-/pluginutils-5.0.5.tgz#bbb4c175e19ebfeeb8c132c2eea0ecb89941a66c"
   integrity sha512-6aEYR910NyP73oHiJglti74iRyOwgFU4x3meH/H8OJx6Ry0j6cOVZ5X/wTvub7G7Ao6qaHBEaNsV3GLJkSsF+Q==
@@ -5290,6 +5290,13 @@ vary@~1.1.2:
   resolved "https://registry.yarnpkg.com/vary/-/vary-1.1.2.tgz#2299f02c6ded30d4a5961b0b9f74524a18f634fc"
   integrity sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==
 
+vite-plugin-glsl@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/vite-plugin-glsl/-/vite-plugin-glsl-1.1.2.tgz#7f1750bb90f4e70b3459039e1b1d201bb099d519"
+  integrity sha512-zmXsfc1vn2MlYve9t3FAoWuhLyoCkNS1TuQL+TkXZL7tGmBjRErp10eNYxcse5tK9oUC5MyJpNc4ElpQnx8DoA==
+  dependencies:
+    "@rollup/pluginutils" "^5.0.2"
+
 vite-plugin-html@^3.2.0:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/vite-plugin-html/-/vite-plugin-html-3.2.0.tgz#0d4df9900642a321a139f1c25c05195ba9d0ec79"