OrillusionUIMultiPanel
ts
import { AtmosphericComponent, BillboardType, CEvent, CEventDispatcher, Camera3D, Color, DirectLight, Engine3D, HoverCameraController, ImageType, Object3D, Object3DUtil, PointerEvent3D, Scene3D, TextAnchor, Time, UIImage, UIInteractive, UITextField, Vector3, View3D, WorldPanel, clamp } from '@orillusion/core';
class GUIPanelPOI {
private readonly alpha = 0.8;
private objUI: Object3D;
private index: number;
private _originColor: Color = new Color();
private _remainTime: number = -1;
private _backImage: UIImage;
private _outColor = new Color(0, 0.5, 0.75, this.alpha);
constructor(obj, index: number) {
this.objUI = obj;
this.index = index;
this.displayUIDetail();
}
update(delta: number): void {
if (this._remainTime > 0) {
this._remainTime -= delta;
let progress = clamp(this._remainTime, 0, 500);
progress = 1 - progress / 500;
let color = this._backImage.color;
color.r = this._originColor.r * progress + (1.0 - progress) * 0.2;
color.g = this._originColor.g * progress + (1.0 - progress) * 0.2;
color.b = this._originColor.b * progress + (1.0 - progress) * 0.2;
this._backImage.color = color;
}
this.updateFrame();
}
private lastIndex: number = -1;
private frame: number = Math.floor(Math.random() * 10000);
private frameStart = 65; //65~77
private frameCount = 13;
private _icon: UIImage;
private _frameSpeed = 0.05 + 0.1 * Math.random();
updateFrame() {
this.frame++;
let newIndex = Math.floor(this.frame * this._frameSpeed) % this.frameCount;
if (newIndex != this.lastIndex) {
this.lastIndex = newIndex;
let frameKey = (this.lastIndex + this.frameStart).toString().padStart(5, '0');
this._icon.sprite = Engine3D.res.getGUISprite(frameKey);
}
}
private displayUIDetail(): void {
let uiChild = this.objUI.addChild(new Object3D()) as Object3D;
let r = Math.random() * 0.25 + 0.2;
let b = Math.random() * 0.25 + 0.2;
let g = Math.random() * 0.25 + 0.2;
this._originColor.setTo(r, g, b, this.alpha);
//back
this._backImage = this.addImage(uiChild, ' ', 200, 120, r, g, b, this.alpha);
this._backImage.uiTransform.x = 100;
this._backImage.uiTransform.y = -60;
uiChild.addEventListener(
PointerEvent3D.PICK_CLICK_GUI,
() => {
this._remainTime = 500;
sampleUIPanelClick.data = this.objUI;
sampleUIPanelDispatcher.dispatchEvent(sampleUIPanelClick);
},
this
);
uiChild.addEventListener(
PointerEvent3D.PICK_OVER_GUI,
() => {
this._backImage.color = this._outColor;
},
this
);
uiChild.addEventListener(
PointerEvent3D.PICK_OUT_GUI,
() => {
this._backImage.color = this._originColor;
},
this
);
let button = uiChild.addComponent(UIInteractive);
button.interactive = true;
//icon
{
let iconNode = uiChild.addChild(new Object3D()) as Object3D;
let icon = this.addImage(iconNode, '', 100, 100, 1, 1, 1);
icon.uiTransform.x = -75;
icon.uiTransform.y = 25;
this._icon = icon;
this.updateFrame();
}
//text
{
let textChild = this.objUI.addChild(new Object3D()) as Object3D;
let text = textChild.addComponent(UITextField);
text.uiTransform.resize(120, 60);
text.uiTransform.x = 110;
text.uiTransform.y = -48;
text.alignment = TextAnchor.UpperLeft;
text.text = 'Orilussion';
text.fontSize = 22;
text.color = new Color(0.9, 0.9, 0.9, 1.0);
}
//text
{
let textChild = this.objUI.addChild(new Object3D()) as Object3D;
let text = textChild.addComponent(UITextField);
text.uiTransform.resize(140, 60);
text.uiTransform.x = 110;
text.uiTransform.y = -100;
text.alignment = TextAnchor.UpperLeft;
text.text = '次时代WebGPU 3D Engine';
text.fontSize = 18;
text.color = new Color(0.8, 0.8, 0.8, 1.0);
}
}
private addImage(obj: Object3D, texture: string, w: number, h: number, r: number, g: number, b: number, a: number = 1): UIImage {
let image = obj.addComponent(UIImage);
image.sprite = Engine3D.res.getGUISprite(texture);
image.uiTransform.resize(w, h);
image.imageType = ImageType.Sliced;
image.color.setTo(r, g, b, a);
return image;
}
}
class GUIPanelBinder {
objUI: Object3D;
panel: GUIPanelPOI;
ball: Object3D;
constructor(ball: Object3D, ui: Object3D, index: number) {
this.ball = ball;
this.objUI = ui;
this.objUI.name = 'panel ' + index;
this.objUI.scaleX = this.objUI.scaleY = this.objUI.scaleZ = 0.1;
this.panel = new GUIPanelPOI(this.objUI, index);
}
update(delta: number) {
this.objUI.localPosition = this.ball.transform.worldPosition;
this.panel.update(delta);
}
}
let sampleUIPanelClick: CEvent = new CEvent('ClickUIPanel');
let sampleUIPanelDispatcher: CEventDispatcher = new CEventDispatcher();
class Sample_UIMultiPanel {
camera: Camera3D;
scene: Scene3D;
view: View3D;
async run() {
Engine3D.setting.shadow.autoUpdate = true;
Engine3D.setting.shadow.shadowBias = 0.0001;
Engine3D.setting.shadow.shadowBound = 200;
await Engine3D.init({
renderLoop: () => {
this.renderUpdate();
}
});
// 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, -10, 150, new Vector3(0, 15, 0));
// 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 = 21;
light.rotationY = 120;
component.lightColor = new Color(1.0, 1.0, 1.0, 1.0);
component.intensity = 30;
component.castShadow = true;
// add light object
scene3D.addChild(light);
let view = new View3D();
view.scene = scene3D;
view.camera = camera;
Engine3D.startRenderView(view);
this.scene = scene3D;
this.camera = view.camera;
this.view = view;
let model = await Engine3D.res.loadGltf('https://cdn.orillusion.com/gltfs/wukong/wukong.gltf');
model.localScale = new Vector3(1, 1, 1).multiplyScalar(50);
this.scene.addChild(model);
this.scene.addChild(Object3DUtil.GetSingleCube(400, 1, 400, 0.2, 0.2, 0.2));
await Engine3D.res.loadFont('https://cdn.orillusion.com/fnt/0.fnt');
await Engine3D.res.loadAtlas('https://cdn.orillusion.com/atlas/Sheet_atlas.json');
this.makeUIPanelList();
}
private nodeList: GUIPanelBinder[] = [];
private bindTarget3DRoot: Object3D;
private makeUIPanelList(): void {
this.bindTarget3DRoot = new Object3D();
this.bindTarget3DRoot.y = 50;
this.scene.addChild(this.bindTarget3DRoot);
let canvas = this.view.enableUICanvas();
for (let i = 0; i < 50; i++) {
//panel
let panelRoot: Object3D = new Object3D();
let panel = panelRoot.addComponent(WorldPanel);
panel.billboard = BillboardType.BillboardXYZ;
panel.needSortOnCameraZ = true;
canvas.addChild(panel.object3D);
//random position
let angle = Math.PI * 2 * Math.random();
let pos = new Vector3();
pos.set(Math.sin(angle), Math.cos(angle), (Math.random() - 0.5) * 2);
pos.multiplyScalar(50 * Math.sqrt(Math.random() + 0.25));
let ball = this.bindTarget3DRoot.addChild(new Object3D()) as Object3D;
ball.localPosition = pos;
//binder
let node = new GUIPanelBinder(ball, panelRoot, i);
this.nodeList.push(node);
}
sampleUIPanelDispatcher.addEventListener(
sampleUIPanelClick.type,
(e) => {
let target = e.data as Object3D;
let targetPos = this.view.camera.worldToScreenPoint(target.transform.worldPosition);
let orginPos = this.view.camera.worldToScreenPoint(new Vector3());
this.isSpeedAdd = targetPos.x > orginPos.x ? 1 : -1;
this.speedAngle += 50;
console.log(this.isSpeedAdd);
},
this
);
}
private speedAngle: number = 1;
private isSpeedAdd: number = 1;
renderUpdate() {
if (this.bindTarget3DRoot) {
this.speedAngle -= 0.2;
this.speedAngle = Math.max(this.speedAngle, 1);
this.bindTarget3DRoot.rotationY += 0.01 * this.speedAngle * this.isSpeedAdd;
for (let binder of this.nodeList) {
binder.update(Time.delta);
}
}
}
}
new Sample_UIMultiPanel().run();