import type { ReadonlyVector2 } from "../../../engine/math/ReadonlyVector2"; import { Component } from "../../hierarchy_object/Component"; import { CSS3DObject } from "../../render/CSS3DRenderer"; import { CssFilter } from "./filter/CssFilter"; /** * Options for rendering css objects of unknown size. */ export interface IUnknownSizeCssRenderOption { /** * element viewScale * * value to scaling html element. the smaller value, the higher resolution of element. * * note: if the viewScale is greater than 1, render will have different behaviour depending on the browser. In the case of firefox, normal operation is guaranteed. * @param value */ viewScale: number; /** * if true, pointerEvents is auto that means is receive pointerEvent like onClick. * otherwise, pointerEvents is none. */ pointerEvents: boolean; /** * css filter */ filter: CssFilter; } /** * Options used on most css objects with finite size. */ export interface ICssRenderOption extends IUnknownSizeCssRenderOption { /** * centerOffset is offset from center of object. * * if centerOffset is (0.5, 0), object center is left center. * if centerOffset is (0.5, 0.5), object center is top left center. */ centerOffset: ReadonlyVector2; } /** * precision problems occur when css space and actual game space are 1:1 * * This constant specifies the ratio of css space to match the game space * * The default value is 0.1, and the css space and game space correspond to 10:1 * * This value is not designed to be changed by default. However, if an engine bug occurs in the future, the value may change. */ export declare const enum CssRendererConst { LengthUnitScalar = 0.1 } /** * css renderer base class * * you can't use this class directly, but you can use its subclasses e.g. `CssSpriteRenderer`, `CssTextRenderer` */ export declare class CssRenderer extends Component implements ICssRenderOption { protected css3DObject: CSS3DObject | null; protected htmlElement: T | null; private readonly _centerOffset; private _viewScale; private _pointerEvents; private readonly onFilterUpdate; private readonly _filter; private _readyToDraw; /** * start method will initialize css3DObject and add it to scene. * * process: * 1. set `readyToDraw` to true. * 2. call `renderInitialize()` method. */ start(): void; /** * when object is destroyed, this method will be called. * * process: * 1. enqueue css3DObject to render queue for update viewport * 2. remove css3DObject from scene * 3. set `css3DObject` and `htmlElement` to null */ onDestroy(): void; /** * when object is enabled, this method will be called. * * process: * 1. show css3DObject * 2. enqueue css3DObject to render queue for update viewport */ onEnable(): void; /** * when object is disabled, this method will be called. * * process: * 1. hide css3DObject * 2. enqueue css3DObject to render queue for update viewport */ onDisable(): void; /** * when world matrix is updated, this method will be called * * process: * 1. enqueue css3DObject to render queue for update viewport * 2. update raw Three.js object's matrix recursively */ onWorldMatrixUpdated(): void; /** * initialize css3DObject. you must implement this method in derived class. * * this method is called when start() message is invoked. * * this method must set `css3DObject` and `htmlElement` to non-null value. */ protected renderInitialize(): void; /** * create css3DObject with basic properties * you must call this method in renderInitialize() for create css3DObject * * @param reCreate if true, recreate css3DObject else use existing css3DObject * @returns css3DObject */ protected initializeBaseComponents(reCreate: boolean): CSS3DObject; /** * update centerOffset. you must implement this method in derived class. * @param _updateTransform if true, matrix will be updated and render will be enqueued */ protected updateCenterOffset(_updateTransform: boolean): void; /** * update viewScale. you must implement this method in derived class. * @param _updateTransform if true, matrix will be updated and render will be enqueued */ protected updateViewScale(_updateTransform: boolean): void; /** * centerOffset is offset from center of object. * * if centerOffset is (0.5, 0), object center is left center. * if centerOffset is (0.5, 0.5), object center is top left center. */ get centerOffset(): ReadonlyVector2; /** * centerOffset is offset from center of object. * * if centerOffset is (0.5, 0), object center is left center. * if centerOffset is (0.5, 0.5), object center is top left center. */ set centerOffset(value: ReadonlyVector2); /** * element viewScale * * value to scaling html element. the smaller value, the higher resolution of element. * * note: if the viewScale is greater than 1, render will have different behaviour depending on the browser. In the case of firefox, normal operation is guaranteed. * @param value */ get viewScale(): number; /** * element viewScale * * value to scaling html element. the smaller value, the higher resolution of element. * * note: if the viewScale is greater than 1, render will have different behaviour depending on the browser. In the case of firefox, normal operation is guaranteed. * @param value */ set viewScale(value: number); /** * if true, pointerEvents is auto that means is receive pointerEvent like onClick. * otherwise, pointerEvents is none. */ get pointerEvents(): boolean; /** * if true, pointerEvents is auto that means is receive pointerEvent like onClick. * otherwise, pointerEvents is none. */ set pointerEvents(value: boolean); /** * css filter */ get filter(): CssFilter; /** * on start() message is invoked, this value will be set to true. */ protected get readyToDraw(): boolean; /** * html element events */ get htmlElementEventHandler(): GlobalEventHandlers | null; }