Three.js Blocks

Home
Documentation
Examples
Tools

textLetterId

@three-blocks/coreWebGPUWebGL
const textLetterId : Node<float> = nodeImmutable( TextIndexNode, TextIndexNode.LETTER )
Value
nodeImmutable( TextIndexNode, TextIndexNode.LETTER )

Letter ID as a normalized float (0-1) representing the position of the current glyph within the text. First letter is 0, last letter is 1.

Works in both vertex shaders (positionNode) and fragment shaders (colorNode). For BatchedText, this is the letter position within each individual text member.

Example
import { Text, textLetterId } from '@three-blocks/core';
import { sin, time, positionLocal, mix, color, Fn } from 'three/tsl';

const text = new Text();
text.text = 'WAVE ANIMATION';

// Wave animation using letter position
text.material.positionNode = Fn(() => {
  const pos = positionLocal.toVar();
  pos.y.addAssign(sin(time.add(textLetterId.mul(5))).mul(0.3));
  return pos;
})();

// Color gradient from first to last letter
text.material.colorNode = mix(
  color(0xff0066),
  color(0x00ffff),
  textLetterId
);