完成 yuriBrain 已完善和封装

src/plugins/medical/components/yuriBrain/brainParticles.vue

@@ -4,7 +4,7 @@
  * @Autor: 地虎降天龙
  * @Date: 2025-01-09 10:29:37
  * @LastEditors: 地虎降天龙
- * @LastEditTime: 2025-01-09 11:37:54
+ * @LastEditTime: 2025-01-09 15:00:05
 -->
 <template>
     <TresPoints :scale="10">
@@ -14,13 +14,15 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
+import { ref, watch } from 'vue'
 import * as THREE from 'three'
 import { useRenderLoop } from '@tresjs/core'
 import { randomRange } from './makeData'
 
 const props = defineProps({
     brainCurves: { default: null, type: Array },
+    color: { default: '#194ED8', type: String },
+    speed: { default: 1, type: Number },
 })
 
 const density = 10
@@ -53,6 +55,9 @@ for (let i = 0; i < props.brainCurves.length; i++) {
 const tbRef = ref<THREE.BufferGeometry | null>(null)
 
 const uniforms = {
+    uniforms: {
+        color: { value: new THREE.Color(props.color) },
+    },
     vertexShader: `
 			varying vec2 vUv;
 			attribute float randoms;
@@ -64,11 +69,13 @@ const uniforms = {
 			}
 		`,
     fragmentShader: `
-    void main() {
-			float disc = length(gl_PointCoord.xy - vec2(0.5));
-			float opacity = 0.3*smoothstep(0.5,0.4,disc);
-			gl_FragColor = vec4(vec3(opacity),1.);
-    }
+			uniform vec3 color;
+			void main() {
+				float disc = length(gl_PointCoord.xy - vec2(0.5));
+				float opacity = 0.3*smoothstep(0.5,0.4,disc);
+				vec3 finalColor = color*opacity;
+				gl_FragColor = vec4(finalColor,1.);
+			}
 		`,
     transparent: true,
     depthTest: false,
@@ -81,7 +88,7 @@ onLoop(() => {
     if (tbRef.value) {
         let curpositions = tbRef.value.attributes.position.array
         for (let i = 0; i < myPoints.length; i++) {
-            myPoints[i].curPosition += myPoints[i].speed
+            myPoints[i].curPosition += myPoints[i].speed * props.speed
             myPoints[i].curPosition = myPoints[i].curPosition % 1
 
             let curPoint = myPoints[i].curve.getPointAt(myPoints[i].curPosition)
@@ -93,4 +100,10 @@ onLoop(() => {
         tbRef.value.attributes.position.needsUpdate = true
     }
 })
+watch(
+    () => props.color,
+    () => {
+        uniforms.uniforms.color.value.set(props.color)
+    },
+)
 </script>

src/plugins/medical/components/yuriBrain/index.vue

@@ -1,7 +1,7 @@
 <template>
     <TresGroup>
-        <brainParticles :brainCurves="brainCurves" />
-        <tubes :brainCurves="brainCurves" />
+        <brainParticles :brainCurves="brainCurves" :color="particlesColor" :speed="speed" />
+        <tubes :brainCurves="brainCurves" :color="tubesColor" />
     </TresGroup>
 </template>
 
@@ -10,5 +10,11 @@ import { getBrainCurves } from './makeData'
 import brainParticles from './brainParticles.vue'
 import tubes from './tubes.vue'
 
+const props = defineProps({
+    tubesColor: { default: '#194ED8', type: String },
+    particlesColor: { default: '#194ED8', type: String },
+    speed: { default: 1 },
+})
+
 const brainCurves = getBrainCurves() as any
 </script>

src/plugins/medical/components/yuriBrain/tubes.vue

@@ -4,7 +4,7 @@
  * @Autor: 地虎降天龙
  * @Date: 2025-01-09 11:13:03
  * @LastEditors: 地虎降天龙
- * @LastEditTime: 2025-01-09 12:26:23
+ * @LastEditTime: 2025-01-09 14:51:09
 -->
 <template>
     <TresGroup :scale="10">
@@ -16,17 +16,19 @@
 </template>
 
 <script setup lang="ts">
+import { watch } from 'vue'
 import * as THREE from 'three'
 import { useRenderLoop } from '@tresjs/core'
 
 const props = defineProps({
-    brainCurves: { default: null, type: Array },
+	brainCurves: { default: null, type: Array },
+	color: { default: '#194ED8', type: String },
 }) as any
 
 const tsmConfig = {
     uniforms: {
         time: { value: 0 },
-        color: { value: new THREE.Color(0.1, 0.3, 0.6) },
+        color: { value: new THREE.Color(props.color) },
         mouse: { value: new THREE.Vector3(0, 0, 0) },
     },
 
@@ -80,4 +82,8 @@ window.addEventListener('mousemove', (event) => {
     tsmConfig.uniforms.mouse.value.y = -(event.clientY / window.innerHeight - 0.5)
     // console.log(tsmConfig.uniforms.mouse.value)
 })
+
+watch(() => props.color, () => {
+		tsmConfig.uniforms.color.value.set(props.color)
+})
 </script>

src/plugins/medical/pages/yuriBrain.vue

@@ -4,31 +4,54 @@
  * @Autor: 地虎降天龙
  * @Date: 2025-01-09 10:24:46
  * @LastEditors: 地虎降天龙
- * @LastEditTime: 2025-01-09 12:29:28
+ * @LastEditTime: 2025-01-09 15:02:51
 -->
 <template>
-	<TresCanvas clearColor="#000" window-size>
-			<TresPerspectiveCamera :position="[6, 3, 0]" :fov="45" :near="0.1" :far="10000" />
-			<OrbitControls enableDamping autoRotate />
+    <TresCanvas clearColor="#000" window-size>
+        <TresPerspectiveCamera :position="[6, 3, 0]" :fov="45" :near="0.1" :far="10000" />
+        <OrbitControls enableDamping autoRotate />
 
-			<yuriBrainModel />
+        <yuriBrainModel v-bind="yuriBrainConfig" />
 
-			<Suspense>
-					<reflectorDUDV :position="[0, -1.36, 0]" v-bind="reflectorState" />
-			</Suspense>
-	</TresCanvas>
+        <Suspense>
+            <reflectorDUDV :position="[0, -1.36, 0]" v-bind="reflectorState" />
+        </Suspense>
+    </TresCanvas>
 </template>
 
 <script setup lang="ts">
 import { reactive } from 'vue'
 import { OrbitControls } from '@tresjs/cientos'
 import { reflectorDUDV } from 'PLS/floor'
+import { Pane } from 'tweakpane'
 import yuriBrainModel from '../components/yuriBrain/index.vue'
 
 const reflectorState = reactive({
-	reflectivity: 0.8,
-	showGridHelper: false,
-	scale: 1,
+    reflectivity: 0.8,
+    showGridHelper: false,
+    scale: 1,
 })
 
-</script>
+const yuriBrainConfig = reactive({
+    tubesColor: '#59b5ff',
+    particlesColor: '#97ffcc',
+    speed: 1,
+})
+
+const paneControl = new Pane({
+    title: '参数',
+    expanded: true,
+})
+paneControl.addBinding(yuriBrainConfig, 'tubesColor', {
+    label: '线条颜色',
+})
+paneControl.addBinding(yuriBrainConfig, 'particlesColor', {
+    label: '粒子颜色',
+})
+paneControl.addBinding(yuriBrainConfig, 'speed', {
+    label: '粒子速度',
+    min: 0.01,
+    max: 2,
+    step: 0.01,
+})
+</script>