Skip to content

feat(cientos): add Text component (SDF text via troika-three-text) - #1444

Draft
Gazoon007 wants to merge 1 commit into
Tresjs:mainfrom
Gazoon007:feat/text-object
Draft

feat(cientos): add Text component (SDF text via troika-three-text)#1444
Gazoon007 wants to merge 1 commit into
Tresjs:mainfrom
Gazoon007:feat/text-object

Conversation

@Gazoon007

Copy link
Copy Markdown
Contributor

Refs: https://github.com/orgs/Tresjs/discussions/1441

What

Adds a <Text> component to cientos for SDF text via troika-three-text, next to the existing extruded <Text3D>. Mirrors drei's <Text3D> / <Text> split.

Why

<Text3D> is baked-font extruded geometry only, so no kerning, ligatures, RTL, or unicode fallback. SDF text covers labels, UI, and multilingual content from real font files. The only way to get this before was the manual <primitive> pattern from apps/docs/content/3.api/5.advanced/primitives.md, where you set props and handle disposal by hand. This component does .sync() and disposal for you.

How

New packages/cientos/src/core/objects/Text.vue, built the same way as Text3D.vue (<script setup>, props via withDefaults, text from prop or slot, defineExpose({ instance })).

Owns the troika Text instance, calls instance.sync(() => { invalidate(); emit('sync', instance) }) on prop changes, disposes on unmount.

Props follow drei's <Text>, defaults anchor-x="center", anchor-y="middle", font-size=1, sdf-glyph-size=64.

Exported from src/core/objects/index.ts. Also updated the primitives doc to point at <Text>.

Dependency

Adds troika-three-text as a [catalog dep / optionalDependency, per the issue]. Wasn't a cientos dep before. drei depends on it directly.

Usage

<script setup lang="ts">
import { Text } from '@tresjs/cientos'
</script>

<template>
  <TresCanvas>
    <Text text="Hello TresJS" font="/fonts/Inter.woff" :font-size="0.5" anchor-x="center" :max-width="4" />
  </TresCanvas>
</template>

Included

  • Text.vue with typed props/emits and JSDoc
  • Export in src/core/objects/index.ts
  • Playground demo + route (wrapping, anchoring, outline, a non-Latin string)
  • Docs page with a short "Text3D vs Text" note, plus updated primitives example
  • Vitest unit test
  • test / lint / typecheck / build green

Notes for reviewers

  • The dependency question (catalog dep vs optionalDependency) is the one thing I'd like confirmed.
  • Prop names follow drei on purpose for familiarity, happy to rename to cientos conventions.

@Gazoon007
Gazoon007 requested a review from alvarosabu as a code owner June 21, 2026 14:23
@netlify

netlify Bot commented Jun 21, 2026

Copy link
Copy Markdown

Deploy Preview for tresjs-lab ready!

Name Link
🔨 Latest commit fb806bd
🔍 Latest deploy log https://app.netlify.com/projects/tresjs-lab/deploys/6a37f59f3c9dcc0008fcf9a5
😎 Deploy Preview https://deploy-preview-1444--tresjs-lab.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.
🤖 Make changes Run an agent on this branch

To edit notification comments on pull requests, go to your Netlify project configuration.

@netlify

netlify Bot commented Jun 21, 2026

Copy link
Copy Markdown

Deploy Preview for rapier-docs ready!

Name Link
🔨 Latest commit fb806bd
🔍 Latest deploy log https://app.netlify.com/projects/rapier-docs/deploys/6a37f59ff07e3200084d81e2
😎 Deploy Preview https://deploy-preview-1444--rapier-docs.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.
🤖 Make changes Run an agent on this branch

To edit notification comments on pull requests, go to your Netlify project configuration.

@netlify

netlify Bot commented Jun 21, 2026

Copy link
Copy Markdown

Deploy Preview for cientos-tresjs ready!

Name Link
🔨 Latest commit fb806bd
🔍 Latest deploy log https://app.netlify.com/projects/cientos-tresjs/deploys/6a37f59f7c79e10008257813
😎 Deploy Preview https://deploy-preview-1444--cientos-tresjs.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.
🤖 Make changes Run an agent on this branch

To edit notification comments on pull requests, go to your Netlify project configuration.

@netlify

netlify Bot commented Jun 21, 2026

Copy link
Copy Markdown

Deploy Preview for postprocessing-tresjs ready!

Name Link
🔨 Latest commit fb806bd
🔍 Latest deploy log https://app.netlify.com/projects/postprocessing-tresjs/deploys/6a37f59ff3199400084cbf69
😎 Deploy Preview https://deploy-preview-1444--postprocessing-tresjs.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.
🤖 Make changes Run an agent on this branch

To edit notification comments on pull requests, go to your Netlify project configuration.

@netlify

netlify Bot commented Jun 21, 2026

Copy link
Copy Markdown

Deploy Preview for tresjs-docs ready!

Name Link
🔨 Latest commit fb806bd
🔍 Latest deploy log https://app.netlify.com/projects/tresjs-docs/deploys/6a37f59fb0a5dd00088b786b
😎 Deploy Preview https://deploy-preview-1444--tresjs-docs.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.
🤖 Make changes Run an agent on this branch

To edit notification comments on pull requests, go to your Netlify project configuration.

- Add a new `<Text>` component that renders high-quality SDF (signed distance field) text using `troika-three-text`.
- Include features like kerning, ligatures, bidirectional text, unicode fallback, and automatic sync/disposal of the underlying instance.
- Update `pnpm-workspace.yaml` and `package.json` to include `troika-three-text`.
- Add playground demo, API documentation, and examples to showcase the component’s capabilities.
@pkg-pr-new

pkg-pr-new Bot commented Jun 21, 2026

Copy link
Copy Markdown

Open in StackBlitz

@tresjs/cientos

npm i https://pkg.pr.new/@tresjs/cientos@1444

@tresjs/core

npm i https://pkg.pr.new/@tresjs/core@1444

@tresjs/eslint-config

npm i https://pkg.pr.new/@tresjs/eslint-config@1444

@tresjs/leches

npm i https://pkg.pr.new/@tresjs/leches@1444

@tresjs/nuxt

npm i https://pkg.pr.new/@tresjs/nuxt@1444

@tresjs/post-processing

npm i https://pkg.pr.new/@tresjs/post-processing@1444

@tresjs/rapier

npm i https://pkg.pr.new/@tresjs/rapier@1444

commit: fb806bd

@Gazoon007
Gazoon007 marked this pull request as draft June 22, 2026 16:01
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant