UIShadow

UIShadow 组件可以赋予具备 GUIRenderer 组件投影效果。若同一个 Object3D 注册了多个渲染组件 GUIRenderer，比如同时拥有 UITextField 和 UIImage，则需要给每一个 GUIRenderer 添加单独的 UIShadow 组件

import { Engine3D } from '@orillusion/core';

// 创建用于显示UI的面板
let panelRoot: Object3D = new Object3D();
panelRoot.addComponent(ViewPanel);
// 激活UICanvas
let canvas = this.scene.view.enableUICanvas();
// 面板加入到系统canvas中
canvas.addChild(panelRoot);
// 创建图片节点
let imageQuad = new Object3D();
panelRoot.addChild(imageQuad);
this.image = imageQuad.addComponent(UIImage);
this.image.uiTransform.resize(400, 60);
this.image.uiTransform.y = 100;
// 注册投影组件
let shadow = panelRoot.addComponent(UIShadow);
shadow.quality = 1;//[0-4] 0：取消投影，1，单投影，2/3/4多投影

shadowQuality

通过设置 shadowQuality 可以调节投影品质, 品质越高，越消耗系统性能

0	1	2	3	4
无阴影	单阴影	双阴影	三重阴影	四重阴影

let shadow: UIShadow;
shadow.shadowQuality = 1;

shadowOffset

通过设置 shadowOffset 可以调节阴影相对原渲染单位偏移量

let shadow: UIShadow;
shadow.shadowOffset = new Vector2(4.0, -4.0); // +x: right, +y: up

shadowRadius

通过设置 shadowRadius 可以调节各个投影的扩散距离

let shadow: UIShadow;
shadow.shadowRadius = 2;

shadowColor

通过设置 shadowRadius 可以调节投影的颜色，透明度

let shadow: UIShadow;
shadow.shadowColor = new Color(0.1, 0.5, 0.0, 0.8);

isShadowless

当有多个 GUIRenderer 组件挂载在同一个 Object3D上时，可以通过设置组件的 isShadowless 的属性来手动屏蔽指定组件的投影能力，只保留你想要投影的组件：

// 创建ui节点
let root = new Object3D();
// 挂载 UIImage
let image = root.addComponent(UIImage);
//image 将不产生投影
image.isShadowless = true;
//挂载 TextField
let textField = root.addComponent(UITextField);

// 挂载投影组件 UIShadow
let shadow = root.addComponent(UIShadow);
// 设置投影属性
shadow.shadowQuality = 1;
shadow.shadowColor = new Color(0.1, 0.5, 0.0, 0.8);
shadow.shadowOffset = new Vector2(4.0, -4.0);
shadow.shadowRadius = 4.0;

由于 image 屏蔽了投影能力，UIShadow 将只会作用于 textField 上。

WebGPU is not supported in your browser
Please upgrade to latest Chrome/Edge

<

import { Engine3D, Scene3D, Object3D, Camera3D, View3D, ViewPanel, UIImage, HoverCameraController, Color, AtmosphericComponent, UIShadow, UITextField, TextAnchor, Vector2, Time } from '@orillusion/core';
import * as dat from 'dat.gui';

class Sample_button {
    async run() {
        // 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, 0, 15);
        // add camera node
        scene3D.addChild(cameraObj);

        let view = new View3D();
        view.scene = scene3D;
        view.camera = camera;
        Engine3D.startRenderView(view);

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

        let canvas = view.enableUICanvas();
        canvas.addChild(panelRoot);
        await Engine3D.res.loadFont('https://cdn.orillusion.com/fnt/0.fnt');

        // create image node
        let imageQuad = new Object3D();
        panelRoot.addChild(imageQuad);
        // create image component
        let image: UIImage = imageQuad.addComponent(UIImage);
        image.color = new Color(0.2, 0.2, 0.2, 0.5);
        image.isShadowless = true;
        // set image size
        image.uiTransform.resize(480, 120);

        let text = imageQuad.addComponent(UITextField);
        text.fontSize = 42;
        text.alignment = TextAnchor.MiddleCenter;
        text.color = new Color(0.8, 0.8, 0.8, 1.0);
        text.text = 'Orillusion';

        // add shadow
        let shadow = imageQuad.addComponent(UIShadow);
        let shadowColor = new Color(1.0, 0.5, 0.5, 0.8);
        shadow.shadowQuality = 4;
        shadow.shadowOffset = new Vector2(2, -2);
        shadow.shadowRadius = 2;

        let GUIHelp = new dat.GUI();
        let f = GUIHelp.addFolder('GUI Shadow');
        f.add(shadow, 'shadowQuality', 0, 4, 1);
        f.add(shadow, 'shadowRadius', 0, 10, 0.01);
        f.add(shadow.shadowOffset, 'x', -100, 100, 0.1).onChange(() => {
            shadow.shadowOffset = shadow.shadowOffset;
        });
        f.add(shadow.shadowOffset, 'y', -100, 100, 0.1).onChange(() => {
            shadow.shadowOffset = shadow.shadowOffset;
        });
        f.addColor({ color: Object.values(shadowColor).map((v) => v * 255) }, 'color').onChange((v) => {
            shadowColor.copyFromArray(v);
            shadow.shadowColor = shadowColor;
        });
        f.open();
    }
}

new Sample_button().run();