feat(TextTroika): add component, demo, docs

docs/.vitepress/config.ts

@@ -65,6 +65,7 @@ export default defineConfig({
         text: 'Abstractions',
         items: [
           { text: 'Text3D', link: '/guide/abstractions/text-3d' },
+          { text: 'TextTroika', link: '/guide/abstractions/text-troika' },
           { text: 'Levioso (Float)', link: '/guide/abstractions/levioso' },
           { text: 'useAnimations', link: '/guide/abstractions/use-animations' },
           { text: 'MouseParallax', link: '/guide/abstractions/mouse-parallax' },

docs/.vitepress/theme/components/TextTroikaDemo.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import { OrbitControls, TextTroika } from '@tresjs/cientos'
+import { TresCanvas } from '@tresjs/core'
+import { NoToneMapping } from 'three'
+
+const fontURL = 'https://fonts.gstatic.com/s/raleway/v14/1Ptrg8zYS_SKggPNwK4vaqI.woff'
+</script>
+
+<template>
+  <TresCanvas clear-color="#fbb03b" :tone-mapping="NoToneMapping">
+    <TresPerspectiveCamera :position="[0, 0, 3]" />
+    <OrbitControls />
+    <Suspense>
+      <TextTroika
+        text="hola"
+        :font="fontURL"
+        :font-size="1"
+        anchor-x="center"
+        anchor-y="middle"
+      />
+    </Suspense>
+  </TresCanvas>
+</template>

docs/component-list/components.ts

@@ -3,6 +3,7 @@ export default [
     text: 'Abstractions',
     items: [
       { text: 'Text3D', link: '/guide/abstractions/text-3d' },
+      { text: 'TextTroika', link: '/guide/abstractions/text-troika' },
       { text: 'Levioso (Float)', link: '/guide/abstractions/levioso' },
       { text: 'useAnimations', link: '/guide/abstractions/use-animations' },
       { text: 'MouseParallax', link: '/guide/abstractions/mouse-parallax' },

docs/guide/abstractions/text-troika.md

@@ -0,0 +1,33 @@
+# TextTroika
+
+<DocsDemo>
+  <TextTroikaDemo />
+</DocsDemo>
+
+`<TextTroika />` renders high-quality 2D text. It wraps the [troika-three-text](https://github.com/protectwise/troika/tree/1af247e61d2f9f884728a7c77914bc8255c4e7cb/packages/troika-three-text) library.
+
+## Usage
+
+<<< @/.vitepress/theme/components/TextTroikaDemo.vue
+
+## Props
+
+All props are optional.
+
+| Prop               | Description                                                            | Default |
+| :----------------- | :--------------------------------------------------------------------- | ------- |
+| **font**           | The URL of a custom font file to be used. Supported font formats are: .ttf, .otf, .woff (.woff2 is not supported) | Roboto from Google Fonts CDN   |
+| **text**           | The string of text to be rendered. Newlines and repeating whitespace characters are honored. | `''` |
+| **characters**     | Character glyphs to pre-generate to avoid <acronym title="flash of unstyled content">FOUC</acronym>. | |
+| **color**          | This is a shortcut for setting the `color` of the text's material. You can use this if you don't want to specify a whole custom material and just want to change its color.  | |
+| **fontSize**       | The em-height at which to render the font, in local world units. | `0.1` |
+| **fontWeight**     | A numeric font weight, `"normal"`, or `"bold"`. Currently only used to select the preferred weight for the fallback Unicode fonts. | `'normal'` |
+| **fontStyle**      | Either `"italic"` or `"normal"`. Currently only used to select the preferred style for the fallback Unicode fonts. | `'normal'` |
+| **maxWidth** | The maximum width of the text block, above which text may start wrapping according to the whiteSpace and overflowWrap properties. | `Infinity` (does not wrap) |
+| **lineHeight** | Sets the height of each line of text. Can either be `'normal'` which chooses a reasonable height based on the chosen font's ascender/descender metrics, or a number that is interpreted as a multiple of the fontSize. | `'normal`' |
+| **letterSpacing** | Sets a uniform adjustment to spacing between letters after kerning is applied, in local world units. Positive numbers increase spacing and negative numbers decrease it. | `0` |
+| **textAlign** | The horizontal alignment of each line of text within the overall text bounding box. Can be one of `'left' \| 'right' \| 'center' \| 'justify'`. | `'normal'` |
+| **anchorX** | Defines the horizontal position in the text block that should line up with the local origin. Can be specified as a numeric `x` position in local units, a string percentage of the total text block width e.g. `'25%'`, or one of the following keyword strings: `'left' \| 'center' \| 'right'`. | `0` |
+| **anchorY** | Defines the vertical position in the text block that should line up with the local origin. Can be specified as a numeric `y` position in local units (note: down is negative y), a string percentage of the total text block height e.g. '25%', or one of the following keyword strings: `'top' \| 'top-baseline' \| 'top-cap' \| 'top-ex' \| 'middle' \| 'bottom-baseline' \| 'bottom'`. | `0` |
+
+See all available properties on the [troika-three-text README](https://github.com/protectwise/troika/tree/1af247e61d2f9f884728a7c77914bc8255c4e7cb/packages/troika-three-text).

package.json

@@ -66,7 +66,8 @@
     "stats-gl": "^2.0.1",
     "stats.js": "^0.17.0",
     "three-custom-shader-material": "^5.4.0",
-    "three-stdlib": "^2.34.0"
+    "three-stdlib": "^2.34.0",
+    "troika-three-text": "^0.52.0"
   },
   "devDependencies": {
     "@release-it/conventional-changelog": "^9.0.3",

playground/vue/src/pages/abstractions/TextTroikaDemo.vue

@@ -0,0 +1,82 @@
+<script setup lang="ts">
+import { OrbitControls, TextTroika } from '@tresjs/cientos'
+import { TresCanvas } from '@tresjs/core'
+import type { ColorRepresentation } from 'three'
+import { BasicShadowMap, Color, NoToneMapping, SRGBColorSpace } from 'three'
+import { shallowRef } from 'vue'
+
+const gl = {
+  clearColor: 'green',
+  shadows: true,
+  alpha: false,
+  shadowMapType: BasicShadowMap,
+  outputColorSpace: SRGBColorSpace,
+  toneMapping: NoToneMapping,
+}
+
+const fontURL = 'https://fonts.gstatic.com/s/raleway/v14/1Ptrg8zYS_SKggPNwK4vaqI.woff'
+const text = shallowRef(`Hello
+world!`)
+
+const lipsum = `Lorem ipsum dolor sit amet, consectetur
+adipiscing elit. Donec eu fringilla metus. Nunc tincidunt
+consequat lacinia. Quisque imperdiet suscipit mauris 
+eu consequat. Aliquam rhoncus massa vel mollis ultricies. 
+
+Nulla volutpat, nisl quis vehicula ultricies, eros mauris
+pulvinar neque, at facilisis purus enim eget mauris. Nam 
+ac felis libero. Donec ut nulla fringilla, imperdiet orci 
+at, accumsan tellus. Aenean tristique non sapien non 
+luctus. Ut tempus iaculis mauris ut iaculis. Phasellus 
+sodales nibh ut tincidunt vestibulum. Pellentesque ut 
+convallis felis, non condimentum ex. Integer vel 
+tempus mauris.
+
+Vivamus vel bibendum turpis. Maecenas a finibus massa, 
+nec lacinia magna. Praesent quis purus elit. Curabitur 
+placerat ex eget dui porttitor accumsan. Donec in 
+placerat nunc. Nulla suscipit feugiat mi, ac feugiat urna 
+ultricies eu. Vivamus vestibulum dolor non elit vehicula 
+finibus. Mauris ut elit justo. Duis viverra ac sapien 
+at finibus.
+`
+const color = shallowRef<ColorRepresentation>('red')
+const outlineWidth = shallowRef(0)
+const outlineColor = shallowRef<ColorRepresentation>('blue')
+const anchorX = shallowRef<'center' | 'left'>('center')
+const anchorY = shallowRef<'top' | 'middle'>('top')
+const fontStyle = shallowRef<'italic' | 'normal'>('normal')
+const lineHeight = shallowRef(1)
+
+let intervalId: ReturnType<typeof setInterval>
+
+let elapsed = 0
+onMounted(() => {
+  intervalId = setInterval(() => {
+    elapsed += 1000 / 30
+    text.value = Math.sin(elapsed * 0.001) > 0 ? text.value = lipsum : '¡hola!'
+    color.value = Math.cos(elapsed * 0.0011) > 0 ? 'white' : new Color('gray')
+    outlineColor.value = Math.cos(elapsed * 0.0017) > 0 ? 'blue' : new Color('orange')
+    outlineWidth.value = Math.abs(Math.sin(elapsed * 0.01))
+    anchorX.value = Math.sin(elapsed * 0.0013) > 0 ? 'center' : 'left'
+    anchorY.value = Math.cos(elapsed * 0.0013) > 0 ? 'top' : 'middle'
+    fontStyle.value = Math.cos(elapsed * 0.12) > 0 ? 'italic' : 'normal'
+    lineHeight.value = (Math.cos(elapsed * 0.01) + 1) * 1
+  }, 1000 / 30)
+})
+
+onUnmounted(() => {
+  clearInterval(intervalId)
+})
+</script>
+
+<template>
+  <TresCanvas v-bind="gl">
+    <TresPerspectiveCamera :position="[0, 0.5, 5]" />
+    <OrbitControls />
+    <Suspense>
+      <TextTroika :font="fontURL" :font-style="fontStyle" :color="color" :anchor-x="anchorX" :anchor-y="anchorY" :text="text" :line-height="lineHeight" :outline-width="outlineWidth" :outline-color="outlineColor" />
+    </Suspense>
+    <TresAmbientLight :intensity="1" />
+  </TresCanvas>
+</template>

playground/vue/src/router/routes/abstractions.ts

@@ -9,6 +9,11 @@ export const abstractionsRoutes = [
     name: 'Text3D',
     component: () => import('../../pages/abstractions/Text3DDemo.vue'),
   },
+  {
+    path: '/abstractions/text-troika',
+    name: 'TextTroika',
+    component: () => import('../../pages/abstractions/TextTroikaDemo.vue'),
+  },
   {
     path: '/abstractions/mouse-parallax',
     name: 'MouseParallax',