用 cientos 的方式 做了 组件：LayerMaterial

package.json

@@ -23,6 +23,7 @@
     "@webank/eslint-config-webank": "1.3.1",
     "cross-env": "^7.0.3",
     "esm": "^3.2.25",
+    "typescript": "^5.4.3",
     "vite-plugin-glsl": "0.2.2"
   },
   "dependencies": {

src/components/forCientos/LayerMaterial/color.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import { defineProps } from 'vue'
+import { useTresContext } from '@tresjs/core'
+import { ColorProps } from 'lamina/types'
+import { Color } from './material'
+const props = defineProps<ColorProps>()
+const { extend } = useTresContext()
+extend({ Color })
+</script>
+<template>
+	<TresColor :args="[props]" :visible="true" />
+</template>

src/components/forCientos/LayerMaterial/component.vue

@@ -0,0 +1,35 @@
+<!--
+ * @Description: <TresMeshToonMaterial color="#FBB03B" />
+ * @Version: 1.668
+ * @Autor: 地虎降天龙
+ * @Date: 2024-04-02 15:07:33
+ * @LastEditors: 地虎降天龙
+ * @LastEditTime: 2024-04-02 21:22:09
+-->
+<script setup lang="ts">
+import { shallowRef, onMounted } from 'vue'
+import { useTresContext } from '@tresjs/core'
+import { LayerMaterialParameters } from 'lamina/types'
+import { LayerMaterialCom } from './material'
+
+const props = defineProps<LayerMaterialParameters>()
+const LayerMaterialClass = shallowRef()
+const { extend } = useTresContext()
+
+extend({ LayerMaterialCom })
+
+defineExpose({ LayerMaterialClass })
+// const slots = useSlots()
+// args.layers = slots.default() || slots.default
+// const args = Object.assign({}, props)
+onMounted(() => {
+  LayerMaterialClass.value.init(LayerMaterialClass.value.__vnode.children)
+})
+</script>
+
+<template>
+  <TresLayerMaterialCom ref="LayerMaterialClass" :args="[props]">
+    <slot />
+  </TresLayerMaterialCom>
+
+</template>

src/components/forCientos/LayerMaterial/depth.vue

@@ -0,0 +1,20 @@
+<!--
+ * @Description: 
+ * @Version: 1.668
+ * @Autor: 地虎降天龙
+ * @Date: 2024-04-02 21:09:18
+ * @LastEditors: 地虎降天龙
+ * @LastEditTime: 2024-04-02 21:36:39
+-->
+<script setup lang="ts">
+import { defineProps } from 'vue'
+import { useTresContext } from '@tresjs/core'
+import { DepthProps } from 'lamina/types'
+import { Depth } from './material'
+const props = defineProps<DepthProps>()
+const { extend } = useTresContext()
+extend({ Depth })
+</script>
+<template>
+	<TresDepth :args="[props]" :visible="true" />
+</template>

src/components/forCientos/LayerMaterial/displace.vue

@@ -0,0 +1,20 @@
+<!--
+ * @Description: 
+ * @Version: 1.668
+ * @Autor: 地虎降天龙
+ * @Date: 2024-04-02 21:09:18
+ * @LastEditors: 地虎降天龙
+ * @LastEditTime: 2024-04-02 21:36:44
+-->
+<script setup lang="ts">
+import { defineProps } from 'vue'
+import { useTresContext } from '@tresjs/core'
+import { DisplaceProps } from 'lamina/types'
+import { Displace } from './material'
+const props = defineProps<DisplaceProps>()
+const { extend } = useTresContext()
+extend({ Displace })
+</script>
+<template>
+	<TresDisplace :args="[props]" :visible="true" />
+</template>

src/components/forCientos/LayerMaterial/fresnel.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import { defineProps } from 'vue'
+import { useTresContext } from '@tresjs/core'
+import { FresnelProps } from 'lamina/types'
+import { Fresnel } from './material'
+const props = defineProps<FresnelProps>()
+const { extend } = useTresContext()
+extend({ Fresnel })
+</script>
+<template>
+	<TresFresnel :args="[props]" :visible="true" />
+</template>

src/components/forCientos/LayerMaterial/gradient.vue

@@ -0,0 +1,20 @@
+<!--
+ * @Description: 
+ * @Version: 1.668
+ * @Autor: 地虎降天龙
+ * @Date: 2024-04-02 21:09:18
+ * @LastEditors: 地虎降天龙
+ * @LastEditTime: 2024-04-02 21:30:33
+-->
+<script setup lang="ts">
+import { defineProps } from 'vue'
+import { useTresContext } from '@tresjs/core'
+import { GradientProps } from 'lamina/types'
+import { Gradient } from './material'
+const props = defineProps<GradientProps>()
+const { extend } = useTresContext()
+extend({ Gradient })
+</script>
+<template>
+	<TresGradient :args="[props]" :visible="true" />
+</template>

src/components/forCientos/LayerMaterial/index.ts

@@ -0,0 +1,14 @@
+import LayerMaterial from './component.vue'
+import Color from './color.vue'
+import Depth from './depth.vue'
+import Fresnel from './fresnel.vue'
+import Gradient from './gradient.vue'
+import Matcap from './matcap.vue'
+import Noise from './noise.vue'
+import Normal from './normal.vue'
+import Texture from './texture.vue'
+import Displace from './displace.vue'
+
+export {
+	LayerMaterial, Color, Depth, Fresnel, Gradient, Matcap, Noise, Normal, Texture, Displace
+}

src/components/forCientos/LayerMaterial/matcap.vue

@@ -0,0 +1,20 @@
+<!--
+ * @Description: 
+ * @Version: 1.668
+ * @Autor: 地虎降天龙
+ * @Date: 2024-04-02 21:09:18
+ * @LastEditors: 地虎降天龙
+ * @LastEditTime: 2024-04-02 21:13:15
+-->
+<script setup lang="ts">
+import { defineProps } from 'vue'
+import { useTresContext } from '@tresjs/core'
+import { MatcapProps } from 'lamina/types'
+import { Matcap } from './material'
+const props = defineProps<MatcapProps>()
+const { extend } = useTresContext()
+extend({ Matcap })
+</script>
+<template>
+	<TresMatcap :args="[props]" :visible="true" />
+</template>

src/components/forCientos/LayerMaterial/material.ts

@@ -0,0 +1,33 @@
+import { LayerMaterial, Depth, Color, Fresnel, Gradient, Noise, Matcap, Texture, Displace, Normal } from 'lamina/vanilla'
+import { LayerMaterialParameters } from 'lamina/types'
+
+class LayerMaterialCom extends LayerMaterial {
+	constructor(parameters: LayerMaterialParameters = {}) {
+		// const layers = [
+		// 	new Color({
+		// 		color: '#444',
+		// 		mode: 'normal',
+		// 		alpha: 1,
+		// 	}),
+		// 	new Depth({
+		// 		colorA: 'blue',
+		// 		colorB: 'black',
+		// 		alpha: 0.5,
+		// 		mode: 'normal',
+		// 		near: 0,
+		// 		far: 300,
+		// 		origin: new THREE.Vector3(100, 100, 100),
+		// 	}),
+		// ]
+		// parameters.color = 'blue'
+		// parameters.lighting = 'physical'
+		// parameters.layers = layers
+		super(parameters)
+	}
+	init(slots: any[]) {
+		this.layers = slots[0].children.map((slot: any) => slot.el)
+		this.refresh()
+	}
+}
+
+export { LayerMaterialCom, Color, Depth, Fresnel, Gradient, Noise, Matcap, Texture, Displace, Normal }

src/components/forCientos/LayerMaterial/noise.vue

@@ -0,0 +1,20 @@
+<!--
+ * @Description: 
+ * @Version: 1.668
+ * @Autor: 地虎降天龙
+ * @Date: 2024-04-02 21:09:18
+ * @LastEditors: 地虎降天龙
+ * @LastEditTime: 2024-04-02 21:31:52
+-->
+<script setup lang="ts">
+import { defineProps } from 'vue'
+import { useTresContext } from '@tresjs/core'
+import { NoiseProps } from 'lamina/types'
+import { Noise } from './material'
+const props = defineProps<NoiseProps>()
+const { extend } = useTresContext()
+extend({ Noise })
+</script>
+<template>
+	<TresNoise :args="[props]" :visible="true" />
+</template>

src/components/forCientos/LayerMaterial/normal.vue

@@ -0,0 +1,20 @@
+<!--
+ * @Description: 
+ * @Version: 1.668
+ * @Autor: 地虎降天龙
+ * @Date: 2024-04-02 21:09:18
+ * @LastEditors: 地虎降天龙
+ * @LastEditTime: 2024-04-02 21:34:31
+-->
+<script setup lang="ts">
+import { defineProps } from 'vue'
+import { useTresContext } from '@tresjs/core'
+import { NormalProps } from 'lamina/types'
+import { Normal } from './material'
+const props = defineProps<NormalProps>()
+const { extend } = useTresContext()
+extend({ Normal })
+</script>
+<template>
+	<TresNormal :args="[props]" :visible="true" />
+</template>

src/components/forCientos/LayerMaterial/texture.vue

@@ -0,0 +1,20 @@
+<!--
+ * @Description: 
+ * @Version: 1.668
+ * @Autor: 地虎降天龙
+ * @Date: 2024-04-02 21:09:18
+ * @LastEditors: 地虎降天龙
+ * @LastEditTime: 2024-04-02 21:36:18
+-->
+<script setup lang="ts">
+import { defineProps } from 'vue'
+import { useTresContext } from '@tresjs/core'
+import { TextureProps } from 'lamina/types'
+import { Texture } from './material'
+const props = defineProps<TextureProps>()
+const { extend } = useTresContext()
+extend({ Texture })
+</script>
+<template>
+	<TresTexture :args="[props]" :visible="true" />
+</template>

src/plugins/industry4/pages/showCar.vue

@@ -4,7 +4,7 @@
  * @Autor: 地虎降天龙
  * @Date: 2023-11-18 08:51:19
  * @LastEditors: 地虎降天龙
- * @LastEditTime: 2024-03-28 10:36:41
+ * @LastEditTime: 2024-04-02 21:41:11
 -->
 <template>
 	<loading />
@@ -22,14 +22,23 @@
 		</Suspense>
 
 		<environmentForLightformers />
+
+		<TresMesh :scale="1" :position="[-4, 0, 0]">
+			<TresSphereGeometry :args="[1, 500, 500]" />
+			<LayerMaterial color="blue" lighting="physical">
+				<Color color='#444' mode="normal" :alpha="1" />
+				<Depth colorA="blue" colorB="black" :alpha="0.5" mode="normal" :near="0" :far="300"
+					:origin="new THREE.Vector3(100, 100, 100)" />
+			</LayerMaterial>
+		</TresMesh>
 	</TresCanvas>
 </template>
 
-
 <script setup lang="ts">
 import { reactive, ref, watchEffect } from 'vue'
-import { OrbitControls, vLightHelper } from '@tresjs/cientos'
+import { OrbitControls } from '@tresjs/cientos'
 import * as THREE from 'three'
+import { LayerMaterial, Color, Depth } from '@/components/forCientos/LayerMaterial'
 
 import reflectorShaderMesh from 'PLS/floor/components/reflectorShaderMesh.vue'
 import { randomLoading as loading } from 'PLS/UIdemo'

src/plugins/skyBox/components/environmentForLightformers.vue

@@ -80,7 +80,7 @@ const backgroundMaterial = new LayerMaterial({
 		new Depth({
 			colorA: 'blue',
 			colorB: 'black',
-			alpha: 0.8,
+			alpha: 0.5,
 			mode: 'normal',
 			near: 0,
 			far: 300,
@@ -110,6 +110,8 @@ onBeforeLoop(({ delta }) => {
 		(lightFormerGroup.position.z += delta * 10) > 20 && (lightFormerGroup.position.z = -60)
 		cubeCamera.update(renderer.value, virtualScene)
 		scene.value.environment = fbo.texture
+		scene.value.background = fbo.texture
+		scene.value.backgroundBlurriness = 1.0
 	}
 })
 </script>