Orillusion

Appearance

本页内容

UIButton ​

UIButton 继承自 UIInteractive（可交互组件）, 实现基本的按钮功能。 按钮组件内部封装有 UIImage 用于显示背景图，集成自可交互组件 UIInteractive，使用内置的 UITransform 描述的方形区域作为感应热区。

组件贴图 ​

组件有多种状态 UIInteractiveStyle，每种状态对应一个贴图

  • upTexture - 默认状态对应的贴图
  • downTexture - 鼠标按下时对应的贴图
  • overTexture - 鼠标 over 时对应的贴图
  • disableTexture - 组件被禁用时的贴图

我们可以设置组件各种状态下对应的背景图，即可获得按钮随状态切换变换样式的效果。

组件交互 ​

我们可以使用事件监听器，监听组件的 object3D 对象的GUI 系列事件，即可获得用户操作响应函数回调:

  • PointerEvent3D.PICK_CLICK_GUI：鼠标点击
  • PointerEvent3D.PICK_OVER_GUI：鼠标滑入
  • PointerEvent3D.PICK_OUT_GUI：鼠标移除
  • PointerEvent3D.PICK_UP_GUI：鼠标抬起
  • PointerEvent3D.PICK_DOWN_GUI：鼠标按下

启用/禁用 ​

设置组件是否有效：

  • true - 按钮会响应鼠标事件
  • false - 不响应鼠标事件，并且呈现 disableTexture 的贴图
ts
image.enable = true; //false


Orillusion powered by WebGPU on Chrome/Edge 113+
Please upgrade to latest Chrome/Edge

<
ts
import {
    Engine3D, Scene3D, Object3D, Camera3D, ForwardRenderJob, ViewPanel, UIButton, DirectLight, HoverCameraController, Color, PointerEvent3D
} from "@orillusion/core";

export class Sample_button {
    async run() {
        // initializa engine
        await Engine3D.init();
        // create new scene as root node
        let scene3D: Scene3D = new Scene3D();
        // create camera
        let cameraObj: Object3D = new Object3D();
        let camera = cameraObj.addComponent(Camera3D);
        // adjust camera view
        camera.perspective(60, window.innerWidth / window.innerHeight, 1, 5000.0);
        // set camera controller
        let controller = cameraObj.addComponent(HoverCameraController);
        controller.setCamera(0, -20, 15);
        // 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);

        await Engine3D.res.loadAtlas('https://cdn.orillusion.com/atlas/UI_atlas.json');

        // create new forward rendering job
        let renderJob: ForwardRenderJob = new ForwardRenderJob(scene3D);
        // start rendering
        Engine3D.startRender(renderJob);

        // create panel root
        let panelRoot: Object3D = new Object3D();
        panelRoot.addComponent(ViewPanel);

        renderJob.guiCanvas.addGUIChild(panelRoot);

        // create button node
        let buttonQuad = new Object3D();
        panelRoot.addChild(buttonQuad);
        // create button component
        let button: UIButton = buttonQuad.addComponent(UIButton);
        // set button size
        button.uiTransform.resize(180, 60);

        button.upTexture = Engine3D.res.getSubTexture('button-up');
        button.downTexture = Engine3D.res.getSubTexture('button-down');
        button.overTexture = Engine3D.res.getSubTexture('button-over');
        button.disableTexture = Engine3D.res.getSubTexture('button-disable');

        // add listener
        buttonQuad.addEventListener(PointerEvent3D.PICK_CLICK_GUI, this.onClick, this);
        buttonQuad.addEventListener(PointerEvent3D.PICK_OUT_GUI, this.onOut, this);
        buttonQuad.addEventListener(PointerEvent3D.PICK_OVER_GUI, this.onOver, this);
        buttonQuad.addEventListener(PointerEvent3D.PICK_DOWN_GUI, this.onDown, this);
    }

    private onClick() {

    }

    private onOut() {

    }

    private onOver() {

    }

    private onDown() {
        alert('clicked me!')
    }

}
new Sample_button().run();