UITextField

UITextField 组件可以加载基于 Bitmap Font 的字体图集，在引擎中提供高性能的文本渲染能力。

import { Engine3D } from '@orillusion/core';
// 加载 Bitmap Font 字体文件
await Engine3D.res.loadFont('fnt/0.fnt');
// 激活UICanvas
let canvas = this.scene.view.enableUICanvas();
// 创建用于显示UI的面板
let panelRoot: Object3D = new Object3D();
panelRoot.addComponent(ViewPanel);
// 面板加入到系统canvas中
canvas.addChild(panelRoot);
// 创建文本节点
let textQuad = new Object3D();
panelRoot.addChild(textQuad);
this.text = textQuad.addComponent(UITextField);
// 设置Rect尺寸，该尺寸会影响文本框大小
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;

设置字体

文本组件依赖于 Bitmap Font 图集，你需要先加载 fnt 图集文件到引擎中，然后文本才能被正常显示出来

制作 Bitmap Font 字体依赖外部第三方工具，可以参考 Hiero 以及 Distance field fonts 获取更多帮助

// e.g. 加载 Bitmap Font 字体文件
await Engine3D.res.loadFont('path/to/font.fnt');
text.font = 'fontName'; // 设定字体

设置内容

// 修改组件text
text.text = 'Hello，Orillusion！';

字体大小

text.fontSize = 32;

对齐方式

参考 TextAnchor，有九种对齐方式

text.alignment = TextAnchor.UpperLeft;

字体颜色

text.color = new Color(1.0, 0.0, 0.0, 1.0);// 默认为白色

行间距

text.lineSpacing = 1.5; //设置行距为字号尺寸的1.5倍。

文本框大小

text.uiTransform.resize(200, 200);//设置文本块为（200,200）。

设置组件visible（可见/隐藏）

text.visible = false;//true

销毁文本

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;