暂且 增加了 碎片的模型切换 基底

src/plugins/visualArts/components/fragmentModelCom.vue

@@ -0,0 +1,141 @@
+<!--
+ * @Description: 	
+ * @Version: 1.668
+ * @Autor: 地虎降天龙
+ * @Date: 2024-12-13 09:05:58
+ * @LastEditors: 地虎降天龙
+ * @LastEditTime: 2024-12-13 10:02:41
+-->
+<template>
+    <TresMesh :geometry="geometry">
+        <TresShaderMaterial v-bind="tsMaterialConfig" />
+    </TresMesh>
+</template>
+
+<script setup lang="ts">
+import { reactive, ref, watch } from 'vue'
+import * as THREE from 'three'
+import { useTexture, useRenderLoop } from '@tresjs/core'
+import { Pane } from 'tweakpane'
+import vertexShader from '../shaders/fragmentModel.vert'
+import fragmentShader from '../shaders/fragmentModel.frag'
+
+const geometry = new THREE.TorusGeometry(0.82, 0.3, 32, 120).toNonIndexed()
+const toGeometry = new THREE.TorusKnotGeometry(0.6, 0.1, 180, 20, 4, 2).toNonIndexed()
+
+const position = geometry.attributes.position.array
+const length = geometry.attributes.position.count
+const NextPosition = toGeometry.attributes.position.array
+const NextNormal = toGeometry.attributes.normal.array
+const NextLength = toGeometry.attributes.position.count
+
+const randoms = new Float32Array(length)
+const centers = new Float32Array(length * 3)
+const toPositions = new Float32Array(length * 3)
+const toNormal = new Float32Array(length * 3)
+
+for (let index = 0; index < length; index += 3) {
+    const random = Math.random() * 1
+    const clamp = index % NextLength
+
+    randoms[index] = random
+    randoms[index + 1] = random
+    randoms[index + 2] = random
+
+    const i3 = index * 3
+
+    const x = position[i3]
+    const y = position[i3 + 1]
+    const z = position[i3 + 2]
+
+    const x1 = position[i3 + 3]
+    const y1 = position[i3 + 4]
+    const z1 = position[i3 + 5]
+
+    const x2 = position[i3 + 6]
+    const y2 = position[i3 + 7]
+    const z2 = position[i3 + 8]
+
+    const center = new THREE.Vector3(x + x1 + x2, y + y1 + y2, z + z1 + z2).divideScalar(3)
+
+    centers.set([center.x, center.y, center.z], index * 3)
+    centers.set([center.x, center.y, center.z], (index + 1) * 3)
+    centers.set([center.x, center.y, center.z], (index + 2) * 3)
+
+    const setVectors = (sourceArray, targetArray, clampX) => {
+        const baseIndex = clampX * 3
+        for (let i = 0; i < 3; i++) {
+            const offset = baseIndex + i * 3
+            targetArray.set([sourceArray[offset], sourceArray[offset + 1], sourceArray[offset + 2]], (clampX + i) * 3)
+        }
+    }
+    setVectors(NextPosition, toPositions, clamp)
+    setVectors(NextNormal, toNormal, clamp)
+}
+
+geometry.setAttribute('aRandom', new THREE.BufferAttribute(randoms, 1))
+geometry.setAttribute('aCenter', new THREE.BufferAttribute(centers, 3))
+geometry.setAttribute('toPosition', new THREE.BufferAttribute(toPositions, 3))
+geometry.setAttribute('toNormal', new THREE.BufferAttribute(toNormal, 3))
+
+console.log(geometry.attributes)
+
+const pTexture = await useTexture(['./plugins/visualArts/image/fragment512px.png'])
+
+const tsMaterialConfig = {
+    uniforms: {
+        u_progress: { value: -0.1 },
+        matcap1: { value: pTexture },
+        m1Color: {
+            type: 'v3',
+            value: new THREE.Color('#fff'),
+        },
+        matcap2: { value: pTexture },
+        m2Color: {
+            type: 'v3',
+            value: new THREE.Color('#fff'),
+        },
+    },
+    vertexShader,
+    fragmentShader,
+}
+
+const colors = reactive({
+    c1: '#fff',
+    c2: '#fff',
+})
+const speed = ref(0.5)
+const paneControl = new Pane({ title: '参数' })
+paneControl.addBinding(tsMaterialConfig.uniforms.u_progress, 'value', {
+    label: '变化量',
+    min: -0.1,
+    max: 1,
+    step: 0.001,
+}).disabled = true
+paneControl.addBinding(colors, 'c1', {
+    label: '颜色1st',
+})
+paneControl.addBinding(colors, 'c2', {
+    label: '颜色2rd',
+})
+paneControl.addBinding(speed, 'value', {
+    label: '速度',
+    min: 0.001,
+    max: 1,
+    step: 0.001,
+})
+
+watch(
+    colors,
+    (newValue) => {
+        tsMaterialConfig.uniforms.m1Color.value.set(newValue.c1)
+        tsMaterialConfig.uniforms.m2Color.value.set(newValue.c2)
+    },
+    { deep: true },
+)
+
+useRenderLoop().onLoop(({ elapsed }) => {
+    tsMaterialConfig.uniforms.u_progress.value = (Math.sin(elapsed * speed.value) + 1) / 2
+    paneControl.refresh()
+})
+</script>

src/plugins/visualArts/config.js

@@ -4,7 +4,7 @@
  * @Autor: 地虎降天龙
  * @Date: 2024-04-30 08:18:21
  * @LastEditors: 地虎降天龙
- * @LastEditTime: 2024-10-09 16:56:33
+ * @LastEditTime: 2024-12-13 09:02:56
  */
 export default {
     name: 'visualArts',
@@ -70,5 +70,11 @@ export default {
             name: 'lightNoise',
             title: '光噪声',
         },
+        {
+            src: 'plugins/visualArts/preview/fragmentModel.png',
+            type: 'img',
+            name: 'fragmentModel',
+            title: '碎片模型',
+        },
     ],
 }

src/plugins/visualArts/pages/fragmentModel.vue

@@ -0,0 +1,31 @@
+<template>
+	<TresCanvas v-bind="tcConfig">
+			<TresPerspectiveCamera :position="[0, 2.0, 8]" :fov="45" :near="0.1" :far="1000" />
+			<OrbitControls v-bind="controlsState" />
+			<TresAmbientLight :intensity="2" />
+			<Suspense>
+					<fragmentModelCom />
+			</Suspense>
+	</TresCanvas>
+</template>
+
+<script setup lang="ts">
+import * as THREE from 'three'
+import { reactive } from 'vue'
+import { OrbitControls } from '@tresjs/cientos'
+import fragmentModelCom from '../components/fragmentModelCom.vue'
+
+const controlsState = reactive({
+	enableDamping: true,
+	enableZoom: true,
+	autoRotate: true,
+	enablePan: true,
+	enableRotate: true,
+})
+const tcConfig = {
+	clearColor: '#000000',
+	windowSize: true,
+	toneMapping: THREE.ACESFilmicToneMapping,
+	toneMappingExposure: 0.8,
+}
+</script>

src/plugins/visualArts/shaders/fragmentModel.frag

@@ -0,0 +1,27 @@
+varying vec3 vNormal;
+varying vec2 vUv;
+varying vec3 vViewPosition;
+uniform sampler2D matcap;
+uniform sampler2D matcap2;
+uniform float u_progress;
+uniform vec3 m1Color;
+uniform vec3 m2Color;
+
+void main() {
+  vec3 viewDir = normalize(vViewPosition);
+  vec3 x = normalize(vec3(viewDir.z, 0.0, -viewDir.x));
+  vec3 y = cross(viewDir, x);
+  vec2 uv = vec2(dot(x, vNormal), dot(y, vNormal)) * 0.495 + 0.5;
+
+  float progress = abs(sin(u_progress));
+
+  vec3 matcapColor = texture2D(matcap, uv).rgb;
+  matcapColor = mix(matcapColor, m1Color, 0.5);
+  vec3 matcap2Color = texture2D(matcap2, uv).rgb;
+  matcap2Color = mix(matcap2Color, m2Color, 0.5);
+
+  vec3 color = vec3(matcapColor);
+  color = mix(color, matcap2Color, progress);
+
+  gl_FragColor = vec4(color, 1.0);
+}

src/plugins/visualArts/shaders/fragmentModel.vert

@@ -0,0 +1,60 @@
+varying vec2 vUv;
+varying vec3 vNormal;
+varying vec3 vViewPosition;
+
+attribute vec3 aCenter;
+attribute vec3 toPosition;
+attribute vec3 toNormal;
+attribute float aRandom;
+
+uniform float u_progress;
+
+#include <common>
+
+mat4 rotation3d(vec3 axis, float angle) {
+  axis = normalize(axis);
+  float s = sin(angle);
+  float c = cos(angle);
+  float oc = 1.0 - c;
+
+  return mat4(
+      oc * axis.x * axis.x + c, oc * axis.x * axis.y - axis.z * s,
+      oc * axis.z * axis.x + axis.y * s, 0.0, oc * axis.x * axis.y + axis.z * s,
+      oc * axis.y * axis.y + c, oc * axis.y * axis.z - axis.x * s, 0.0,
+      oc * axis.z * axis.x - axis.y * s, oc * axis.y * axis.z + axis.x * s,
+      oc * axis.z * axis.z + c, 0.0, 0.0, 0.0, 0.0, 1.0);
+}
+
+void main() {
+  vUv = uv;
+
+  float progress = u_progress;
+  float sinProgress = sin(progress * PI);
+
+  vec3 pos = mix(position, toPosition, progress);
+  vec3 nor = mix(normal, toNormal, progress);
+
+  vNormal = normalMatrix * normalize(nor);
+
+  float prog = ((pos.y + 1.) / 2.) * 1.1;
+
+  float locprog = clamp((sinProgress - 0.9 * prog) / 0.2, 0., 1.);
+
+  vec3 transform = pos - aCenter;
+
+  transform += 3. * aRandom * nor * locprog;
+
+  transform *= (1.0 - locprog);
+
+  transform += aCenter;
+
+  mat4 rotation = rotation3d(vec3(0., 1., 0.), aRandom * (locprog)*PI * 3.);
+
+  transform = (rotation * vec4(transform, 1.)).xyz;
+
+  vec4 modelViewPosition = modelViewMatrix * vec4(transform, 1.0);
+
+  gl_Position = projectionMatrix * modelViewPosition;
+
+  vViewPosition = -modelViewPosition.xyz;
+}