UITextField

UITextField component can load font atlas based on Bitmap Font, and provide high-performance text rendering capability in the engine.

import { Engine3D } from '@orillusion/core';
// Load Bitmap Font file
await Engine3D.res.loadFont('fnt/0.fnt');
// Activate UICanvas
let canvas = this.scene.view.enableUICanvas();
// Create a panel object for displaying UI
let panelRoot: Object3D = new Object3D();
panelRoot.addComponent(ViewPanel);
// Add panel to system canvas
canvas.addChild(panelRoot);
// Create text node
let textQuad = new Object3D();
panelRoot.addChild(textQuad);
this.text = textQuad.addComponent(UITextField);
// Set the Rect size, which will affect the text box size
this.text.uiTransform.resize(400, 60);
this.text.uiTransform.y = 100;

this.text.text = 'Hello，Orillusion！';
this.text.fontSize = 32;
this.text.alignment = TextAnchor.MiddleCenter;

Set Font

The text component depends on the Bitmap Font atlas. You need to load the fnt atlas file into the engine first, and then the text can be displayed normally

Making Bitmap Font font files depends on external third-party tools, users can refer to Hiero or Distance field fonts for more help

// Load a BMFont font file
await Engine3D.res.loadFont('path/to/font.fnt');
text.font = 'fontName'; // set by font name

Set Content

// Modify component text
text.text = 'Hello，Orillusion！';

Font Size

text.fontSize = 32;

Alignment

Refer to TextAnchor, which has 9 alignment methods

text.alignment = TextAnchor.UpperLeft;

Font Color

text.color = new Color(1.0, 0.0, 0.0, 1.0);// Default is white

Line Spacing

text.lineSpacing = 1.5; // Set the line spacing to 1.5 times the font size.

Text Box Size

text.uiTransform.resize(200, 200);// Set the text block to (200,200).

Set component visible (visible / hidden)

text.visible = false;//true

Destroy Text

text.destroy();

WebGPU is not supported in your browser
Please upgrade to latest Chrome/Edge

<

import { Engine3D, Scene3D, Object3D, Camera3D, View3D, ViewPanel, TextAnchor, UITextField, DirectLight, HoverCameraController, Color, AtmosphericComponent, WorldPanel, GPUCullMode, UIPanel } from '@orillusion/core';

// initializa engine
await Engine3D.init();
// create new scene as root node
let scene3D: Scene3D = new Scene3D();
scene3D.addComponent(AtmosphericComponent);
// create camera
let cameraObj: Object3D = new Object3D();
let camera = cameraObj.addComponent(Camera3D);
// adjust camera view
camera.perspective(60, Engine3D.aspect, 1, 5000.0);
// set camera controller
let controller = cameraObj.addComponent(HoverCameraController);
controller.setCamera(0, -20, 30);
// add camera node
scene3D.addChild(cameraObj);
// create light
let light: Object3D = new Object3D();
// add direct light component
let component: DirectLight = light.addComponent(DirectLight);
// adjust lighting
light.rotationX = 45;
light.rotationY = 30;
component.lightColor = new Color(1.0, 1.0, 1.0, 1.0);
component.intensity = 1;
// add light object
scene3D.addChild(light);

let view = new View3D();
view.scene = scene3D;
view.camera = camera;
Engine3D.startRenderView(view);

// create UIpanel root
let panelRoot: Object3D = new Object3D();
let panel: UIPanel = panelRoot.addComponent(WorldPanel);
panel.cullMode = GPUCullMode.none;
// add to UIcanvas
let canvas = view.enableUICanvas();
canvas.addChild(panelRoot);

// load base font
await Engine3D.res.loadFont('https://cdn.orillusion.com/fnt/0.fnt');
// create text node
let textQuad = new Object3D();
textQuad.localScale.set(0.1, 0.1, 0.1);
panelRoot.addChild(textQuad);
// create textfield component
let text: UITextField = textQuad.addComponent(UITextField);
// set textfield size
text.uiTransform.resize(300, 60);
// set text value
text.text = 'Hello, Orillusion!';
text.fontSize = 32;
text.alignment = TextAnchor.MiddleCenter;