OrillusionUITextField
UITextField 组件可以加载基于 Bitmap Font 的字体图集，在引擎中提供高性能的文本渲染能力。
ts
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;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 获取更多帮助
ts
// e.g. 加载支持微软雅黑的 Bitmap Font 字体文件
await Engine3D.res.loadFont('path/to/font.fnt');
text.font = '微软雅黑';// e.g. 加载支持微软雅黑的 Bitmap Font 字体文件
await Engine3D.res.loadFont('path/to/font.fnt');
text.font = '微软雅黑';设置内容
ts
// 修改组件text
text.text = 'Hello，Orillusion！';// 修改组件text
text.text = 'Hello，Orillusion！';字体大小
ts
text.fontSize = 32;text.fontSize = 32;对齐方式
参考 TextAnchor，有九种对齐方式
ts
text.alignment = TextAnchor.UpperLeft;text.alignment = TextAnchor.UpperLeft;字体颜色
ts
text.color = new Color(1.0, 0.0, 0.0, 1.0);// 默认为白色text.color = new Color(1.0, 0.0, 0.0, 1.0);// 默认为白色行间距
ts
text.lineSpacing = 1.5; //设置行距为字号尺寸的1.5倍。text.lineSpacing = 1.5; //设置行距为字号尺寸的1.5倍。文本框大小
ts
text.uiTransform.resize(200, 200);//设置文本块为（200,200）。text.uiTransform.resize(200, 200);//设置文本块为（200,200）。设置组件visible（可见/隐藏）
ts
text.visible = false;//truetext.visible = false;//true销毁文本
ts
text.destroy();text.destroy();ts
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.MiddleCenterimport { 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