feat: text3d on cientos

packages/cientos/src/core/Text3D.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import { TextGeometry, TextGeometryParameters, FontLoader } from 'three-stdlib'
-import { useLoader } from '@tresjs/core'
+import { WebGLRenderer } from 'three'
+import { TextGeometry, FontLoader } from 'three-stdlib'
 
-import { computed, inject, onMounted, Ref } from 'vue'
-import { Scene } from 'three'
+import { computed, inject, Ref } from 'vue'
+import { useCientos } from './useCientos'
 
 type Glyph = {
   _cachedOutline: string[]
@@ -48,8 +48,11 @@ const props = withDefaults(
     bevelSegments: 5,
   },
 )
+const renderer = inject<Ref<WebGLRenderer>>('renderer')
 
-const scene = inject<Ref<Scene>>('local-scene')
+const { extend } = useCientos()
+
+extend({ TextGeometry })
 
 const loader = new FontLoader()
 
@@ -82,10 +85,8 @@ const textOptions = computed(() => {
 })
 </script>
 <template>
-  <div>
-    <TresMesh v-if="font">
-      <TresTextGeometry :args="[text, textOptions]" />
-      <slot />
-    </TresMesh>
-  </div>
+  <TresMesh v-if="renderer && font">
+    <TresTextGeometry :args="[text, textOptions]" />
+    <TresMeshStandardMaterial />
+  </TresMesh>
 </template>

packages/tres/src/App.vue

@@ -1,8 +1,7 @@
 <script setup lang="ts">
 /* import { Color } from 'three' */
-import { useTweakPane, OrbitControls, TransformControls } from '../../cientos/src'
+import { useTweakPane, OrbitControls, Text3D } from '../../cientos/src'
 /* import TestSphere from '/@/components/TestSphere.vue' */
-import Text3D from '/@/components/Text3D.vue'
 /* import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
 import { useTres, useCatalogue } from '/@/core' */
 
@@ -29,7 +28,11 @@ useTweakPane()
       <TresScene>
         <TresAmbientLight :intensity="0.5" />
         <!--  <TresOrbitControls v-if="state.renderer" :args="[state.camera, state.renderer?.domElement]" /> -->
-        <Text3D />
+        <Text3D font="https://raw.githubusercontent.com/Tresjs/assets/main/fonts/FiraCodeRegular.json">
+          <TresMeshMatcapMaterial
+            matcap="https://raw.githubusercontent.com/Tresjs/assets/main/textures/matcaps/7.png"
+          />
+        </Text3D>
         <!--   <TestSphere /> -->
         <TresAxesHelper :args="[1]" :visible="false" />
         <TresDirectionalLight :position="[0, 2, 4]" :intensity="2" cast-shadow />

packages/tres/src/main.ts

@@ -1,14 +1,9 @@
 import { createApp } from 'vue'
-import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
 import App from './App.vue'
 import plugin from '.'
 import './style.css'
 
 export const app = createApp(App)
 
-app.use(plugin, {
-  extends: {
-    OrbitControls,
-  },
-})
+app.use(plugin)
 app.mount('#app')