@threlte/extras
<Text>
The <Text> component uses troika-three-text to render text.
<script lang="ts">
import { Canvas } from '@threlte/core'
import { Checkbox, Pane, Slider, Textarea } from 'svelte-tweakpane-ui'
import { DEG2RAD } from 'three/src/math/MathUtils.js'
import Scene from './Scene.svelte'
let text = 'Hello\nWorld'
let bevelEnabled = true
let bevelOffset = 0
let bevelSegments = 20
let bevelSize = 0.2
let bevelThickness = 0.1
let curveSegments = 12
let depth = 1
let size = 5
let smooth = 0.1
</script>
<Pane
title="Text3DGeometry"
position="fixed"
>
<Textarea
bind:value={text}
label="text"
/>
<Checkbox
label="bevelEnabled"
bind:value={bevelEnabled}
/>
<Slider
label="bevelOffset"
bind:value={bevelOffset}
min={0}
max={2}
/>
<Slider
label="bevelSegments"
bind:value={bevelSegments}
step={1}
min={0}
max={50}
/>
<Slider
label="bevelSize"
bind:value={bevelSize}
min={0}
max={2}
/>
<Slider
label="bevelThickness"
bind:value={bevelThickness}
min={0}
max={2}
/>
<Slider
label="curveSegments"
bind:value={curveSegments}
step={1}
min={0}
max={50}
/>
<Slider
label="depth"
bind:value={depth}
min={0}
max={5}
/>
<Slider
label="size"
bind:value={size}
min={0}
max={10}
/>
<Slider
label="smooth"
bind:value={smooth}
min={0}
max={180 * DEG2RAD}
/>
</Pane>
<div>
<Canvas>
<Scene
{text}
{bevelEnabled}
{bevelOffset}
{bevelSegments}
{bevelSize}
{bevelThickness}
{curveSegments}
{depth}
{size}
{smooth}
/>
</Canvas>
</div>
<style>
div {
height: 100%;
}
</style><script lang="ts">
import { T } from '@threlte/core'
import { Align, Environment, Float, OrbitControls, Text3DGeometry } from '@threlte/extras'
export let text: string
export let bevelEnabled: boolean
export let bevelOffset: number
export let bevelSegments: number
export let bevelSize: number
export let bevelThickness: number
export let curveSegments: number
export let depth: number
export let size: number
export let smooth: number
</script>
<Align>
{#snippet children({ align })}
<T.Mesh>
<Text3DGeometry
font={'/fonts/Inter-semibold.blob'}
{text}
{bevelEnabled}
{bevelOffset}
{bevelSegments}
{bevelSize}
{bevelThickness}
{curveSegments}
{depth}
{size}
{smooth}
oncreate={() => {
align()
}}
/>
<T.MeshStandardMaterial
color="#FD3F00"
toneMapped={false}
metalness={1.0}
roughness={0.1}
/>
</T.Mesh>
{/snippet}
</Align>
<Environment files="/hdr/shanghai_riverside_1k.hdr" />
<Float
rotationIntensity={[0, 3, 0]}
rotationSpeed={1}
floatingRange={[-5, 5]}
speed={1}
>
<T.PerspectiveCamera
makeDefault
position.y={0}
position.z={20}
fov={90}
>
<OrbitControls
enableDamping
enablePan={false}
enableZoom={false}
/>
</T.PerspectiveCamera>
</Float><script lang="ts">
import { Canvas } from '@threlte/core'
import Scene from './Scene.svelte'
import { Pane, Slider, Text } from 'svelte-tweakpane-ui'
let text = 'hello world'
let fontSize = 1
</script>
<Pane
title="Text"
position="fixed"
>
<Text bind:value={text} />
<Slider
bind:value={fontSize}
min={0.1}
max={2}
/>
</Pane>
<div>
<Canvas>
<Scene
{text}
{fontSize}
/>
</Canvas>
</div>
<style>
div {
height: 100%;
background-color: rgb(254 61 0 / 0.2);
}
</style><script lang="ts">
import { T, useTask } from '@threlte/core'
import { Grid, Text } from '@threlte/extras'
let rotation = 0
export let text: string
export let fontSize: number
useTask((delta) => {
const f = 1 / 60 / delta // ~1 at 60fps
rotation += 0.002 * f
})
</script>
<T.Group rotation.y={rotation}>
<T.OrthographicCamera
zoom={80}
position={[0, 5, 10]}
makeDefault
oncreate={({ ref }) => {
ref.lookAt(0, 0, 0)
}}
/>
</T.Group>
<Text
{text}
color="white"
{fontSize}
anchorX="50%"
anchorY="100%"
/>
<Grid sectionColor="#FF3E00" />Example
<script>
import { Text } from '@threlte/extras'
let value = ''
</script>
<input
type="text"
bind:value
/>
<Text text={value} /><Text> is suspense-ready and will suspend while the font is loading. You can use the characters prop to preload a specific set of characters to prevent FOUC.
<script>
import { Text, Suspense } from '@threlte/extras'
</script>
<Suspense>
<Text
text="HELLO WORLD"
characters="ABCDEFGHIJKLMNOPQRSTUVWXYZ"
/>
{#snippet fallback()}
<!-- show fallback content while font data is loading -->
{/snippet}
</Suspense>