新增了 小程序案例，初稿，完善中......

src/plugins/uniAppView/components/dissolveEffectCar.vue

@@ -0,0 +1,174 @@
+<!--
+ * @Description: 
+ * @Version: 1.668
+ * @Autor: 地虎降天龙
+ * @Date: 2025-03-07 08:32:54
+ * @LastEditors: 地虎降天龙
+ * @LastEditTime: 2025-03-07 08:50:55
+-->
+<template>
+    <primitive :object="scene" :scale="0.015" :rotation="[0, Math.PI / 1.5, 0]" />
+</template>
+<script setup>
+import { useGLTF } from '@tresjs/cientos'
+import { useTexture, useRenderLoop } from '@tresjs/core'
+import { defineExpose } from 'vue'
+import * as THREE from 'three'
+
+const props = defineProps({
+    edgeColor: {
+        default: 0x111111,
+    },
+    edgeWidth: {
+        default: 0.03,
+    },
+    dissolveSpeed: {
+        default: 0.003,
+    },
+    funRef: {
+        appear: null,
+        disappear: null,
+    },
+})
+
+const { scene, nodes, materials } = await useGLTF('https://opensource-1314935952.cos.ap-nanjing.myqcloud.com/model/industry4/lambo.glb', {
+    draco: true,
+    decoderPath: './draco/',
+})
+Object.values(nodes).forEach((node) => {
+    if (node.isMesh) {
+        if (node.name.startsWith('glass')) node.geometry.computeVertexNormals()
+        if (node.name === 'silver_001_BreakDiscs_0') {
+            node.material = materials.BreakDiscs.clone()
+            node.material.color = new THREE.Color('#ddd')
+        }
+    }
+})
+
+nodes.glass_003.scale.setScalar(2.7)
+materials.FrameBlack.color = new THREE.Color('black')
+materials.FrameBlack.roughness = 0
+materials.FrameBlack.metalness = 0.75
+
+materials.Chrome.color = new THREE.Color('#333')
+materials.Chrome.metalness = 1
+materials.Chrome.roughness = 0
+
+materials.BreakDiscs.color = new THREE.Color('#555')
+materials.BreakDiscs.metalness = 0.2
+materials.BreakDiscs.roughness = 0.2
+
+materials.TiresGum.color = new THREE.Color('#181818')
+materials.TiresGum.metalness = 0
+materials.TiresGum.roughness = 0.4
+
+materials.GreyElements.color = new THREE.Color('#292929')
+materials.GreyElements.metalness = 0
+
+nodes.yellow_WhiteCar_0.material = new THREE.MeshPhysicalMaterial({
+    roughness: 0.3,
+    metalness: 0.05,
+    color: '#111',
+    envMapIntensity: 0.75,
+    clearcoatRoughness: 0,
+    clearcoat: 1,
+})
+
+const pTexture = await useTexture(['./plugins/digitalCity/image/smokeparticle.png', './plugins/industry4/image/dissolve.jpg'])
+const shaders = []
+let isDissolving = false
+const params = {
+    dissolveProgress: 1,
+    noiseTexture: pTexture[0],
+    edgeColorTexture: pTexture[1],
+}
+let signedDissolveSpeed = props.dissolveSpeed
+const appear = () => {
+    if (isDissolving) return
+    isDissolving = true
+    signedDissolveSpeed = props.dissolveSpeed
+
+    for (const shader of shaders) {
+        shader.uniforms.dissolveSpeed = { value: signedDissolveSpeed }
+        shader.uniforms.dissolveProgress = { value: 0 }
+    }
+}
+const disappear = () => {
+    if (isDissolving) return
+    isDissolving = true
+    signedDissolveSpeed = -props.dissolveSpeed
+    for (const shader of shaders) {
+        shader.uniforms.dissolveSpeed = { value: signedDissolveSpeed }
+        shader.uniforms.dissolveProgress = { value: 1 }
+    }
+}
+props.funRef.appear = appear
+props.funRef.disappear = disappear
+defineExpose({
+    appear,
+    disappear,
+})
+Object.values(nodes).forEach((node) => {
+    if (node.isMesh) {
+        node.frustumCulled = false
+        const material = node.material
+        material.transparent = true
+
+        material.onBeforeCompile = (shader) => {
+            shaders.push(shader)
+            shader.uniforms.edgeColor = { value: new THREE.Color(props.edgeColor) }
+            shader.uniforms.edgeWidth = { value: props.edgeWidth }
+            shader.uniforms.dissolveSpeed = { value: props.dissolveSpeed }
+            shader.uniforms.dissolveProgress = { value: params.dissolveProgress }
+            shader.uniforms.noiseTexture = { value: params.noiseTexture }
+            shader.uniforms.edgeColorTexture = { value: params.edgeColorTexture }
+            shader.vertexShader = shader.vertexShader.replace('#include <common>', ['varying vec2 xUv;', '#include <common>'].join('\n'))
+            shader.vertexShader = shader.vertexShader.replace('#include <uv_vertex>', ['xUv = uv;', '#include <uv_vertex>'].join('\n'))
+            shader.fragmentShader = shader.fragmentShader.replace(
+                '#include <common>',
+                `#include <common>
+					 uniform float dissolveProgress;
+					 uniform float edgeWidth;
+					 uniform vec3 edgeColor;
+					 uniform sampler2D noiseTexture;
+					 uniform sampler2D edgeColorTexture;
+					 varying vec2 xUv;
+					`,
+            )
+            shader.fragmentShader = shader.fragmentShader.replace(
+                '#include <dithering_fragment>',
+                `#include <dithering_fragment>
+							float noiseValue = texture2D(noiseTexture, xUv).r;
+							vec4 finalColor = texture2D(edgeColorTexture, xUv);
+
+							vec3 mixedColor = mix(finalColor.rgb, edgeColor, 0.5);
+							finalColor.rgb = mixedColor;
+
+							// vec4 finalColor = linearToOutputTexel( vec4(edgeColor, gl_FragColor.a) );
+							float alpha = step(noiseValue - edgeWidth, dissolveProgress);
+							gl_FragColor.a = alpha;
+							float useOrigin = step(noiseValue, dissolveProgress);
+							gl_FragColor.rgb = mix(finalColor.rgb, gl_FragColor.rgb, useOrigin);`,
+            )
+        }
+    }
+})
+
+const { onLoop } = useRenderLoop()
+onLoop(() => {
+    if (isDissolving) {
+        for (const shader of shaders) {
+            const { dissolveProgress, dissolveSpeed } = shader.uniforms
+            dissolveProgress.value += dissolveSpeed.value
+            if (dissolveProgress.value < 0) {
+                isDissolving = false
+                props.funRef.aEnd()
+            }
+            if (dissolveProgress.value > 1) {
+                isDissolving = false
+                props.funRef.aEnd()
+            }
+        }
+    }
+})
+</script>

src/plugins/uniAppView/components/otherObject.vue

@@ -0,0 +1,42 @@
+<template>
+    <TresPerspectiveCamera :position="[0, 10, 15]" :fov="25" :near="0.1" :far="10000" />
+    <OrbitControls autoRotate />
+    <TresHemisphereLight :intensity="0.5" />
+
+    <Suspense>
+        <reflectorDUDV :position="[0, -1.562, 0]" :reflectivity="2.6" :showGridHelper="false" :scale="1.5" />
+    </Suspense>
+
+    <TresMesh :scale="4" :position="[3, -1.161, -1.5]" :rotation="[-Math.PI / 2, 0, Math.PI / 2.5]">
+        <TresRingGeometry :args="[0.9, 1, 4, 1]" />
+        <TresMeshStandardMaterial color="white" :roughness="0.75" :side="THREE.DoubleSide" />
+    </TresMesh>
+    <TresMesh :scale="4" :position="[-3, -1.161, -1]" :rotation="[-Math.PI / 2, 0, Math.PI / 2.5]">
+        <TresRingGeometry :args="[0.9, 1, 3, 1]" />
+        <TresMeshStandardMaterial color="white" :roughness="0.75" :side="THREE.DoubleSide" />
+    </TresMesh>
+
+    <Suspense>
+        <Environment :resolution="512">
+            <Lightformer :intensity="2" :position="[0, 1, 3]" :scale="[10, 1, 1]" />
+            <Lightformer :intensity="2" :rotation-x="Math.PI / 2" :position="[0, 4, -6]" :scale="[10, 1, 1]" />
+            <Lightformer :intensity="2" :rotation-x="Math.PI / 2" :position="[0, 4, -3]" :scale="[10, 1, 1]" />
+            <Lightformer :intensity="2" :rotation-x="Math.PI / 2" :position="[0, 4, 0]" :scale="[10, 1, 1]" />
+            <Lightformer :intensity="2" :rotation-x="Math.PI / 2" :position="[0, 4, 3]" :scale="[10, 1, 1]" />
+            <Lightformer :intensity="2" :rotation-x="Math.PI / 2" :position="[0, 4, 6]" :scale="[10, 1, 1]" />
+            <Lightformer :intensity="2" :rotation-x="Math.PI / 2" :position="[0, 4, 9]" :scale="[10, 1, 1]" />
+            <Lightformer :intensity="2" :rotation-y="Math.PI / 2" :position="[-50, 2, 0]" :scale="[100, 2, 1]" />
+            <Lightformer :intensity="2" :rotation-y="-Math.PI / 2" :position="[50, 2, 0]" :scale="[100, 2, 1]" />
+            <Lightformer form="ring" color="red" :intensity="10" :scale="2" :position="[10, 5, 10]" />
+        </Environment>
+    </Suspense>
+
+    <lamboEffect />
+</template>
+<script setup>
+import * as THREE from 'three'
+import { reflectorDUDV } from 'PLS/floor'
+import lamboEffect from 'PLS/industry4/components/lamboEffect.vue'
+import { OrbitControls } from '@tresjs/cientos'
+import { Environment, Lightformer } from 'PLS/basic'
+</script>

src/plugins/uniAppView/config.js

@@ -1,7 +1,16 @@
+/*
+ * @Description: 
+ * @Version: 1.668
+ * @Autor: 地虎降天龙
+ * @Date: 2025-03-05 10:47:55
+ * @LastEditors: 地虎降天龙
+ * @LastEditTime: 2025-03-07 09:03:14
+ */
 export default {
     name: 'uniAppView',
     title: 'uniapp小程序',
-    intro: '结合uni-app的开源生态，使用web-view的方式和uni-app交互，方便在您的微信、支付宝等小程序、以及安卓、ios中插入我们的tvt案例以及插件',
+    intro: `结合uni-app的开源生态，使用web-view的方式和uni-app交互，方便在您的微信、支付宝等小程序、以及安卓、ios中插入我们的tvt案例以及插件<br>
+    详情请见：<a style="color: #5384ff;" href="https://www.icegl.cn/tvtstore/uniAppView" target="_blank">uniAppView插件小程序/app</a>`,
     version: '1.0.0',
     author: '地虎降天龙',
     website: 'https://gitee.com/hawk86104',
@@ -11,12 +20,20 @@ export default {
     require: [],
     preview: [
         {
-            src: 'plugins/basic/base/preview/theBasic.png',
+            src: 'plugins/uniAppView/preview/h5demo.png',
             type: 'img',
             name: 'h5demo',
             title: '简单UI交互',
             disableFPSGraph: true,
             disableSrcBtn: true,
         },
+        {
+            src: 'plugins/uniAppView/preview/threedemo.png',
+            type: 'img',
+            name: 'threedemo',
+            title: '三维交互',
+            disableFPSGraph: true,
+            disableSrcBtn: true,
+        },
     ],
-}
+}

src/plugins/uniAppView/pages/threedemo.vue

@@ -0,0 +1,84 @@
+<!--
+ * @Description: 
+ * @Version: 1.668
+ * @Autor: 地虎降天龙
+ * @Date: 2025-03-07 08:12:28
+ * @LastEditors: 地虎降天龙
+ * @LastEditTime: 2025-03-07 08:53:45
+-->
+<template>
+    <loading />
+    <TresCanvas v-bind="state" window-size>
+        <Suspense>
+            <dissolveEffectCar v-bind="frjState" ref="dissolveEffectModelRef" @click="clickMesh" />
+        </Suspense>
+        <otherObject />
+    </TresCanvas>
+		<h2 class="text-center text-white w-full absolute" >点击车辆消失后回传信息且跳转</h2>
+</template>
+
+<script setup lang="ts">
+import { bubbleLoading as loading } from 'PLS/UIdemo'
+import { reactive, onMounted, ref } from 'vue'
+import { FMessage } from '@fesjs/fes-design'
+import { loadJweixin, loadWebView } from '../lib/initScript'
+import dissolveEffectCar from '../components/dissolveEffectCar.vue'
+import otherObject from '../components/otherObject.vue'
+
+declare const uni: any
+
+const scriptLoaded = ref(false)
+onMounted(async () => {
+    console.log('onMounted')
+    await loadJweixin()
+    await loadWebView()
+    scriptLoaded.value = true
+    if (!uni.getEnv) {
+        FMessage.error('当前web浏览器访问无效，请使用小程序或者app访问该页面')
+    } else {
+        uni.getEnv((res: any) => {
+            FMessage.success(`当前环境：${JSON.stringify(res)}`)
+        })
+    }
+})
+
+const state = reactive({
+    clearColor: '#15151a',
+    antialias: false,
+    logarithmicDepthBuffer: true,
+    renderMode: 'manual',
+})
+const frjState = reactive({
+    edgeColor: '#111111',
+    edgeWidth: 0.03,
+    dissolveSpeed: 0.003,
+    funRef: {
+        appear: null,
+        disappear: null,
+        aEnd: () => {},
+    },
+})
+
+const dissolveEffectModelRef = ref(null)
+const clickMesh = () => {
+    if (!scriptLoaded.value) {
+        return
+    }
+    console.log('clickMesh')
+
+    if (!uni.postMessage) {
+        FMessage.error('当前web浏览器访问无效，请使用小程序或者app访问该页面')
+        return
+    }
+    dissolveEffectModelRef.value.funRef.disappear()
+    uni.postMessage({
+        data: {
+            action: '三维页面发送了消息',
+        },
+    })
+}
+frjState.funRef.aEnd = () => {
+    console.log('aEnd')
+    uni.navigateBack()
+}
+</script>