feat(cientos): text3d base

packages/cientos/src/core/Text3D.vue

@@ -0,0 +1,91 @@
+<script setup lang="ts">
+import { TextGeometry, TextGeometryParameters, FontLoader } from 'three-stdlib'
+import { useLoader } from '@tresjs/core'
+
+import { computed, inject, onMounted, Ref } from 'vue'
+import { Scene } from 'three'
+
+type Glyph = {
+  _cachedOutline: string[]
+  ha: number
+  o: string
+}
+
+type FontData = {
+  boundingBox: {
+    yMax: number
+    yMin: number
+  }
+  familyName: string
+  glyphs: {
+    [k: string]: Glyph
+  }
+  resolution: number
+  underlineThickness: number
+}
+
+const props = withDefaults(
+  defineProps<{
+    font: FontData | string
+    text?: string
+    size?: number
+    height?: number
+    curveSegments?: number
+    bevelEnabled?: boolean
+    bevelThickness?: number
+    bevelSize?: number
+    bevelOffset?: number
+    bevelSegments?: number
+  }>(),
+  {
+    size: 80,
+    height: 5,
+    curveSegments: 12,
+    bevelEnabled: true,
+    bevelThickness: 10,
+    bevelSize: 8,
+    bevelOffset: 0,
+    bevelSegments: 5,
+  },
+)
+
+const scene = inject<Ref<Scene>>('local-scene')
+
+const loader = new FontLoader()
+
+const font = await new Promise((resolve, reject) => {
+  try {
+    if (typeof props.font === 'string') {
+      loader.load(props.font, font => {
+        resolve(font)
+      })
+    } else {
+      resolve(props.font)
+    }
+  } catch (error) {
+    reject(console.error('cientos', error))
+  }
+})
+
+const textOptions = computed(() => {
+  return {
+    font: font,
+    size: props.size,
+    height: props.height,
+    curveSegments: props.curveSegments,
+    bevelEnabled: props.bevelEnabled,
+    bevelThickness: props.bevelThickness,
+    bevelSize: props.bevelSize,
+    bevelOffset: props.bevelOffset,
+    bevelSegments: props.bevelSegments,
+  }
+})
+</script>
+<template>
+  <div>
+    <TresMesh v-if="font">
+      <TresTextGeometry :args="[text, textOptions]" />
+      <slot />
+    </TresMesh>
+  </div>
+</template>

packages/cientos/src/index.ts

@@ -1,5 +1,7 @@
 import OrbitControls from './core/OrbitControls.vue'
 import { useTweakPane } from './core/useTweakPane'
 import { GLTFModel } from './core/useGLTF/component'
+import Text3D from './core/Text3D.vue'
+
 export * from './core/useGLTF'
-export { OrbitControls, useTweakPane, GLTFModel }
+export { OrbitControls, useTweakPane, GLTFModel, Text3D }

packages/tres/src/App.vue

@@ -1,12 +1,7 @@
 <script setup lang="ts">
-import { Color } from 'three'
-import { useTweakPane, OrbitControls } from '../../cientos/src'
-import TestSphere from '/@/components/TestSphere.vue'
+import { useTweakPane, OrbitControls, Text3D } from '../../cientos/src'
 
-const colorTeal = new Color('teal')
 useTweakPane()
-
-const meshPosition = [0, 1, 0]
 </script>
 <template>
   <Suspense>
@@ -14,11 +9,12 @@ const meshPosition = [0, 1, 0]
       <TresPerspectiveCamera :position="[5, 5, 5]" :fov="45" :near="0.1" :far="1000" :look-at="[-8, 3, -3]" />
       <TresScene>
         <OrbitControls />
-        <TresMesh :position="meshPosition" :scale="1">
+        <TresMesh :position="[0, 0, 0]" :scale="1">
           <TresSphereGeometry />
-          <TresMeshToonMaterial :color="colorTeal" />
+          <TresMeshToonMaterial :color="'teal'" />
         </TresMesh>
-        <TestSphere />
+        <!--  <Text3D font="/fonts/Gilroy_ExtraBold_Regular.json" :text="'Awiwi'" /> -->
+
         <TresAxesHelper :args="[1]" />
         <TresDirectionalLight :position="[0, 2, 4]" :intensity="2" cast-shadow />
       </TresScene>