57 lines
2.0 KiB
Plaintext
57 lines
2.0 KiB
Plaintext
// A normal Endor UI tree rendered on a transformed plane in the 3D world.
|
|
class WorldActions {
|
|
view: Viewport3D
|
|
panel: Panel3D
|
|
canvas: CanvasViewport
|
|
function reset(self: WorldActions): Unit {
|
|
self.view.camera.x = 0
|
|
self.view.camera.y = 0.5
|
|
self.view.camera.z = 7
|
|
self.view.camera.targetX = 0
|
|
self.view.camera.targetY = 0
|
|
self.view.camera.targetZ = 0
|
|
}
|
|
function turn(self: WorldActions): Unit { self.panel.rotate(0, 15, 0) }
|
|
function fit(self: WorldActions): Unit { self.canvas.mounts().at(0).fitView() }
|
|
}
|
|
count = ui.state(0)
|
|
increment = Button("点击：世界里的真实按钮")
|
|
increment.onClick(count.increment)
|
|
card = Column(10, 6, TextBlock("CanvasViewport", 1), RectBlock(180, 26, 6, "#9CB8A8"))
|
|
card.boxWidth = 240
|
|
card.x = 10
|
|
card.y = 4
|
|
canvas = CanvasViewport(280, 80, Scene2D(card))
|
|
ui_root = Column(8, 8, TextBlock("世界空间 UI", 2), ui.textOf(count, "value", 2), increment, canvas)
|
|
ui_root.crossAlign = "stretch"
|
|
panel = Panel3D(4, 3, ui_root)
|
|
panel.uiWidth = 320
|
|
panel.uiHeight = 240
|
|
panel.x = -1.2
|
|
panel.rotationY = 15
|
|
cube = Box3D(1.4, 1.4, 1.4, "#7B9CB7")
|
|
cube.x = 2
|
|
cube.rotationY = 25
|
|
floor = Box3D(10, 0.08, 5, "#D8DEE6")
|
|
floor.y = -1.8
|
|
scene = Scene3D(panel, cube, floor, DirectionalLight(-1, -2, -3, "#FFFFFF", 0.9))
|
|
scene.ambient = 0.35
|
|
view = Viewport3D(960, 520, scene)
|
|
view.flex = 1
|
|
view.camera.y = 0.5
|
|
view.camera.z = 7
|
|
actions = WorldActions(view, panel, canvas)
|
|
reset = Button("重置摄像机")
|
|
reset.onClick(actions.reset)
|
|
turn = Button("转动 UI 面板")
|
|
turn.onClick(actions.turn)
|
|
fit = Button("适配面板内的画布")
|
|
fit.onClick(actions.fit)
|
|
body = Column(24, 16, TextBlock("UI → 3D 世界 → UI → Canvas", 2), view, Row(0, 12, reset, turn, fit), TextBlock("空白处左键拖动旋转 3D · 中键/空格平移 · 滚轮缩放\n面板里的按钮、文本、布局和画布都由同一份 Endor 对象驱动。"))
|
|
body.flex = 1
|
|
body.crossAlign = "stretch"
|
|
page = Page()
|
|
page.title = "世界空间 UI"
|
|
page.crossAlign = "stretch"
|
|
page.render(body)
|