增加了 ThreeMeshUI 的例子

用于 文字展示 效率高

src/plugins/UIdemo/components/threeMeshUI/basicStart.vue

@@ -0,0 +1,54 @@
+<!--
+ * @Description: 
+ * @Version: 1.668
+ * @Autor: 地虎降天龙
+ * @Date: 2024-07-31 09:24:46
+ * @LastEditors: 地虎降天龙
+ * @LastEditTime: 2024-07-31 12:50:33
+-->
+<template></template>
+
+<script setup lang="ts">
+import * as THREE from 'three'
+import { useTresContext, useRenderLoop } from '@tresjs/core'
+import * as ThreeMeshUI from '../../lib/three-mesh-ui.module.js'
+
+const rootBlock = new ThreeMeshUI.Block({
+    name: 'rootBlock',
+    width: 1.2,
+    height: 'auto',
+    padding: 0.05,
+    boxSizing: 'border-box',
+    justifyContent: 'center',
+    textAlign: 'left',
+    borderRadius: 0.015,
+    backgroundColor: 0x000000,
+    backgroundOpacity: 0.5,
+    fontSize: 0.055,
+    fontFamily: './plugins/UIdemo/fonts/msdf/regular.json',
+    fontTexture: './plugins/UIdemo/fonts/msdf/regular.png',
+    backgroundSide: THREE.DoubleSide,
+})
+rootBlock.position.set(0, 0.6, 0.5)
+rootBlock.rotation.x = -0.55
+
+// 实现 文字和背景同时双面显示
+rootBlock.backgroundMaterial.depthWrite = false
+
+const textContent = 'This is a basic example of ThreeMeshUI.\n It shows a simple text block with a background and some inline text.'
+const inline = new ThreeMeshUI.Text({
+    textContent: textContent,
+    fontSide: THREE.DoubleSide,
+    // fontOpacity: 0.3,
+})
+rootBlock.add(inline)
+
+const { scene } = useTresContext()
+scene.value.add(rootBlock)
+
+const { onLoop } = useRenderLoop()
+onLoop(() => {
+    inline.set({ textContent: textContent + '\n' + Math.random() })
+    ThreeMeshUI.update()
+})
+</script>

src/plugins/UIdemo/components/threeMeshUI/imgBlock.vue

@@ -0,0 +1,60 @@
+<!--
+ * @Description: 
+ * @Version: 1.668
+ * @Autor: 地虎降天龙
+ * @Date: 2024-07-31 14:34:07
+ * @LastEditors: 地虎降天龙
+ * @LastEditTime: 2024-07-31 15:00:33
+-->
+<template></template>
+
+<script setup lang="ts">
+import * as THREE from 'three'
+import { useTresContext, useRenderLoop, useTexture } from '@tresjs/core'
+import * as ThreeMeshUI from '../../lib/three-mesh-ui.module.js'
+
+const rootBlock = new ThreeMeshUI.Block({
+    width: 0.6 * 2,
+    height: 0.399 * 2,
+    margin: 0.025,
+    padding: 0,
+    textAlign: 'left',
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'end',
+    backgroundSide: THREE.DoubleSide,
+})
+rootBlock.position.set(0, -0.5 + 0.4, 1)
+rootBlock.rotation.x = -0.33
+
+const texture = await useTexture(['./plugins/industry4/preview/showLambo.png'])
+rootBlock.set({
+    backgroundColor: new THREE.Color(0xffffff),
+    backgroundOpacity: 1,
+    backgroundImage: texture,
+})
+
+// 实现 文字和背景同时双面显示
+rootBlock.backgroundMaterial.depthWrite = false
+
+const caption = new ThreeMeshUI.Text({
+    padding: 0.025,
+    textAlign: 'center',
+    textContent: 'Lambo Car',
+    backgroundColor: 0x000000,
+    backgroundOpacity: 0.5,
+    fontSize: 0.04,
+    fontFamily: './plugins/UIdemo/fonts/msdf/regular.json',
+    fontTexture: './plugins/UIdemo/fonts/msdf/regular.png',
+    fontSide: THREE.DoubleSide,
+})
+rootBlock.add(caption)
+
+const { scene } = useTresContext()
+scene.value.add(rootBlock)
+
+const { onLoop } = useRenderLoop()
+onLoop(() => {
+    ThreeMeshUI.update()
+})
+</script>

src/plugins/UIdemo/config.js

@@ -4,7 +4,7 @@
  * @Autor: 地虎降天龙
  * @Date: 2024-03-12 11:16:41
  * @LastEditors: 地虎降天龙
- * @LastEditTime: 2024-07-30 18:19:32
+ * @LastEditTime: 2024-07-31 09:18:20
  */
 export default {
     name: 'UIdemo',
@@ -33,5 +33,6 @@ export default {
             referenceSource: { title: 'MisterPrada', url: 'https://github.com/MisterPrada/morph-particles' },
         },
         { src: 'plugins/UIdemo/preview/loadingManagerStyle.png', type: 'img', name: 'loadingManagerStyle', title: '资源加载器Loading' },
+        { src: 'plugins/UIdemo/preview/threeMeshUIstyle.png', type: 'img', name: 'threeMeshUIstyle', title: 'MeshUI简单样式' },
     ],
 }

src/plugins/UIdemo/index.js

@@ -1,10 +1,10 @@
 /*
- * @Description: 
+ * @Description:
  * @Version: 1.668
  * @Autor: 地虎降天龙
  * @Date: 2024-03-13 21:01:18
  * @LastEditors: 地虎降天龙
- * @LastEditTime: 2024-03-15 12:12:06
+ * @LastEditTime: 2024-07-31 15:03:57
  */
 import loading1 from 'PLS/UIdemo/components/loading/huruji.vue'
 import loading2 from 'PLS/UIdemo/components/loading/cssLoaders.vue'
@@ -14,5 +14,6 @@ import yangyangLoading from 'PLS/UIdemo/components/loading/yangyangLoading.vue'
 import starLoading from 'PLS/UIdemo/components/loading/starLoading.vue'
 import randomLoading from 'PLS/UIdemo/components/loading/randomLoading.vue'
 import defaultLoading from 'PLS/UIdemo/components/loading/default.vue'
+import * as ThreeMeshUI from 'PLS/UIdemo/three-mesh-ui.module.js'
 
-export { loading1, loading2, bubbleLoading, vnyoonLoading, yangyangLoading, starLoading, randomLoading, defaultLoading }
+export { loading1, loading2, bubbleLoading, vnyoonLoading, yangyangLoading, starLoading, randomLoading, defaultLoading, ThreeMeshUI }

src/plugins/UIdemo/pages/threeMeshUIstyle.vue

@@ -0,0 +1,30 @@
+<!--
+ * @Description: 
+ * @Version: 1.668
+ * @Autor: 地虎降天龙
+ * @Date: 2024-07-31 09:19:18
+ * @LastEditors: 地虎降天龙
+ * @LastEditTime: 2024-07-31 14:47:52
+-->
+
+<template>
+    <TresCanvas clearColor="#999" window-size>
+        <TresPerspectiveCamera :position="[5, 5, 5]" />
+        <OrbitControls />
+
+        <TresMesh>
+            <TresBoxGeometry />
+            <TresMeshNormalMaterial />
+        </TresMesh>
+        <basicStart />
+        <Suspense>
+            <imgBlock />
+        </Suspense>
+    </TresCanvas>
+</template>
+
+<script setup lang="ts">
+import { OrbitControls } from '@tresjs/cientos'
+import basicStart from '../components/threeMeshUI/basicStart.vue'
+import imgBlock from '../components/threeMeshUI/imgBlock.vue'
+</script>