RedGPU V3.9.1-Alpha

English

한국어

English

한국어

Appearance

TextField3D ​

TextField3D is a text object placed at actual coordinates (x, y, z) in 3D space. It is useful for creating signposts in the world, name tags above character heads, or explanatory text attached to specific objects.

1. Basic Usage ​

TextField3D is treated the same as a general Mesh and is physically located in 3D space.

javascript
const textField = new RedGPU.Display.TextField3D(redGPUContext, "3D World Text");
textField.y = 5; // Place in the air
scene.addChild(textField);

2. Billboard Feature ​

3D text may be seen from the side or back depending on the camera position. To make the text always visible from the front, activate the Billboard feature.

  • useBillboard: When activated, the text always faces the front even if the camera rotates.
  • useBillboardPerspective: Determines whether to maintain size changes due to perspective. (Default: true)
javascript
textField.useBillboard = true;

3. Practical Example: Configuring 3D Text ​

Let's configure 3D text placed together with a GLTF model.

javascript
import * as RedGPU from "https://redcamel.github.io/RedGPU/dist/index.js";

RedGPU.init(canvas, (redGPUContext) => {
    const scene = new RedGPU.Display.Scene();
    
    // 1. Create and Place 3D Text
    const text3D = new RedGPU.Display.TextField3D(redGPUContext, "Damaged Helmet");
    text3D.y = 2.5;
    text3D.fontSize = 24;
    text3D.background = "rgba(0, 204, 153, 0.8)";
    text3D.padding = 10;
    text3D.useBillboard = true; // Rotate with camera
    
    scene.addChild(text3D);

    // 2. Setup Model and Environment
    const ibl = new RedGPU.Resource.IBL(redGPUContext, 'https://redcamel.github.io/RedGPU/examples/assets/hdr/2k/the_sky_is_on_fire_2k.hdr');
    const controller = new RedGPU.Camera.OrbitController(redGPUContext);
    controller.distance = 5;
    
    const view = new RedGPU.Display.View3D(redGPUContext, scene, controller);
    view.ibl = ibl;
    redGPUContext.addView(view);

    new RedGPU.GLTFLoader(redGPUContext, 'https://raw.githubusercontent.com/KhronosGroup/glTF-Sample-Assets/main/Models/DamagedHelmet/glTF-Binary/DamagedHelmet.glb', (loader) => {
        scene.addChild(loader.resultMesh);
    });

    new RedGPU.Renderer().start(redGPUContext);
});

Live Demo ​

Check out the differences between the 4 text fields based on setting combinations in the example below. Rotating the camera with the mouse clearly reveals the difference in the billboard effect.

Key Summary ​

  • TextField3D: A text object placed at actual coordinates in world space.
  • CSS Styles: Web standard styles such as color, background, and border can be applied as is.
  • Billboard: Can be set so that 3D text always faces the camera to improve readability.

Next Steps ​

Learn about the interaction system to create dynamic content that reacts to user input.