@aibee/owlly 1.0.25 → 1.0.29

package/lib/owlly/element/dom-2d-element.d.ts

@@ -0,0 +1,35 @@
+import { CSS2DObject } from '../../external/renderers/css-2d-renderer';
+import { Element, ElementFrameContext } from './element';
+/**
+ * 2D DOM 元素, 可以添加 2D DOM到场景内, 没有透视以及近大远小, 仅进行位置投影
+ */
+declare class DOM2DElement extends Element {
+    /** @ignore */
+    protected initialzed: boolean;
+    /** @ignore */
+    protected cssObject: CSS2DObject;
+    /** @ignore */
+    protected wrapper: HTMLDivElement;
+    /** @ignore */
+    protected needUpdate: boolean;
+    /** 传入的 dom 元素 */
+    domElement: HTMLElement;
+    /** 可见范围, 默认为 Infinity */
+    visibleRadius: number;
+    /**
+     * @param domElement 要显示的DOM元素
+     */
+    constructor(domElement: HTMLElement);
+    /**
+     * 设置DOM容器的CSS类, 可用来制定CSS样式
+     * @param className 类名
+     */
+    setWrapperCSSClass(className: string): void;
+    /**
+     * 设置DOM的ID
+     * @param name id名称
+     */
+    setWrapperDomID(name: string): void;
+    update(): ElementFrameContext;
+}
+export { DOM2DElement };

package/lib/owlly/element/dom-2d-element.js

@@ -0,0 +1,48 @@
+import { CSS2DObject } from '../../external/renderers/css-2d-renderer';
+import { Element, ElementFrameContext } from './element';
+/**
+ * 2D DOM 元素, 可以添加 2D DOM到场景内, 没有透视以及近大远小, 仅进行位置投影
+ */
+class DOM2DElement extends Element {
+    /**
+     * @param domElement 要显示的DOM元素
+     */
+    constructor(domElement) {
+        super();
+        this.domElement = domElement;
+        this.wrapper = document.createElement('div');
+        this.wrapper.appendChild(this.domElement);
+        this.cssObject = new CSS2DObject(this.wrapper);
+        this.add(this.cssObject);
+        this.up.set(0, 0, 1);
+        this.initialzed = true;
+        this.visibleRadius = Infinity;
+    }
+    /**
+     * 设置DOM容器的CSS类, 可用来制定CSS样式
+     * @param className 类名
+     */
+    setWrapperCSSClass(className) {
+        this.wrapper.className = className;
+    }
+    /**
+     * 设置DOM的ID
+     * @param name id名称
+     */
+    setWrapperDomID(name) {
+        this.wrapper.id = name;
+    }
+    update() {
+        const frameContext = new ElementFrameContext(this);
+        if (this.initialzed) {
+            frameContext.shouldPlaceElement = true;
+            this.initialzed = false;
+        }
+        if (this.needUpdate) {
+            frameContext.needUpdate = true;
+            this.needUpdate = false;
+        }
+        return frameContext;
+    }
+}
+export { DOM2DElement };

package/lib/owlly/element/dom-3d-element.d.ts

@@ -0,0 +1,27 @@
+import { CSS3DObject } from '../../external/renderers/css-3d-renderer';
+import { Element, ElementFrameContext } from './element';
+/**
+ * 3D DOM 元素, 可以添加 3D DOM到场景内
+ */
+declare class DOM3DElement extends Element {
+    /** @ignore */
+    protected initialzed: boolean;
+    /** @ignore */
+    protected cssObject: CSS3DObject;
+    /** @ignore */
+    protected wrapper: HTMLDivElement;
+    /** 传入的 dom 元素 */
+    domElement: HTMLElement;
+    /** 是否始终面向相机 */
+    faceToCamera: boolean;
+    /** 是否面向相机时保持z方向不变 */
+    keepZOnFaceToCamera: boolean;
+    /** 可见范围, 默认为 Infinity */
+    visibleRadius: number;
+    /**
+     * @param domElement 要显示的DOM元素, 注意: 在3D DOM中, 请使用像素(px)作为长度单位, 每个像素对应场景中0.005个单位(正常情况下为5毫米)
+     */
+    constructor(domElement: HTMLElement);
+    update(): ElementFrameContext;
+}
+export { DOM3DElement };

package/lib/owlly/element/dom-3d-element.js

@@ -0,0 +1,33 @@
+import { CSS3DObject } from '../../external/renderers/css-3d-renderer';
+import { Element, ElementFrameContext } from './element';
+/**
+ * 3D DOM 元素, 可以添加 3D DOM到场景内
+ */
+class DOM3DElement extends Element {
+    /**
+     * @param domElement 要显示的DOM元素, 注意: 在3D DOM中, 请使用像素(px)作为长度单位, 每个像素对应场景中0.005个单位(正常情况下为5毫米)
+     */
+    constructor(domElement) {
+        super();
+        this.domElement = domElement;
+        this.wrapper = document.createElement('div');
+        this.wrapper.appendChild(this.domElement);
+        this.cssObject = new CSS3DObject(this.wrapper);
+        this.add(this.cssObject);
+        this.up.set(0, 0, 1);
+        // this.scale.set(0.005, 0.005, 0.005);
+        this.initialzed = true;
+        this.visibleRadius = Infinity;
+        this.faceToCamera = false;
+        this.keepZOnFaceToCamera = false;
+    }
+    update() {
+        const frameContext = new ElementFrameContext(this);
+        if (this.initialzed) {
+            frameContext.shouldPlaceElement = true;
+            this.initialzed = false;
+        }
+        return frameContext;
+    }
+}
+export { DOM3DElement };

package/lib/owlly/element/dom-label-2d.d.ts

@@ -0,0 +1,116 @@
+import { NS_THREE } from '../stage/externals';
+import { DOM2DElement } from './dom-2d-element';
+import { ElementFrameContext } from './element';
+declare type AnchorPosition = 'center' | 'left' | 'right' | 'top' | 'bottom' | 'topleft' | 'topright' | 'bottomleft' | 'bottomright';
+declare type TextAttributes = {
+    content?: string;
+    visible?: boolean;
+    fontSize?: number;
+    color?: string;
+    padding?: {
+        left?: number;
+        right?: number;
+        top?: number;
+        bottom?: number;
+    };
+    anchor?: AnchorPosition;
+    offset?: {
+        x: number;
+        y: number;
+    };
+    align?: string;
+    borderWidth?: number;
+    borderColor?: string;
+    borderRadius?: number;
+    backgroundColor?: string;
+};
+declare type ImageAttributes = {
+    src?: string;
+    visible?: boolean;
+    size?: {
+        width: number;
+        height: number;
+    };
+    anchor?: AnchorPosition;
+    offset?: {
+        x: number;
+        y: number;
+    };
+};
+declare type LabelAttributes = {
+    position?: NS_THREE.Vector3;
+    visible?: boolean;
+    bBoxVisible?: boolean;
+    bBoxBorderWidth?: number;
+    bBoxBorderColor?: string;
+};
+/**
+ * 2D DOM 标签, 可展示文字与图片
+ */
+declare class DOMLabel2D extends DOM2DElement {
+    private static ANCHOR_MAP;
+    private boundingBox;
+    private textElement;
+    private textPositionInfo;
+    private imageElement;
+    private imagePositionInfo;
+    private calcBBoxNextFrame;
+    private needCalcBBox;
+    private listeners;
+    private status;
+    private mouseStart;
+    private mouseEnd;
+    labelID: number;
+    constructor();
+    private updateTextTransform;
+    private updateImageTransform;
+    private calcBBox;
+    private registerListeners;
+    private unregisterListeners;
+    private onImageLoaded;
+    private onMouseDown;
+    private onMouseMove;
+    private onMouseUp;
+    private onTouchStart;
+    private onTouchMove;
+    private onTouchEnd;
+    setAttributes({ labelAttrs, imageAttrs, textAttrs }: {
+        labelAttrs: LabelAttributes;
+        imageAttrs: ImageAttributes;
+        textAttrs: TextAttributes;
+    }): void;
+    setLabelAttrs(attrs: LabelAttributes): void;
+    setPosition(position: NS_THREE.Vector3): void;
+    setVisible(visible: boolean): void;
+    setBBoxVisible(visible: boolean): void;
+    setBBoxBorderWidth(width: number): void;
+    setBBoxBorderColor(color: string): void;
+    setImageAttrs(attrs: ImageAttributes): void;
+    setImageVisible(visible: boolean): void;
+    setImageSource(src: string): void;
+    setImageSize(width: number, height: number): void;
+    setImageAnchor(anchor: AnchorPosition): void;
+    setImageOffset(offsetX: number, offsetY: number): void;
+    setTextAttrs(attrs: TextAttributes): void;
+    setTextVisible(visible: boolean): void;
+    setTextContent(text: string): void;
+    setTextFontSize(size: number): void;
+    setTextColor(color: string): void;
+    setTextPadding(padding: {
+        left?: number;
+        right?: number;
+        top?: number;
+        bottom?: number;
+    }): void;
+    setTextAnchor(anchor: AnchorPosition): void;
+    setTextOffset(offsetX: number, offsetY: number): void;
+    setTextBorderWidth(width: number): void;
+    setTextAlign(align: string): void;
+    setTextBorderColor(color: string): void;
+    setTextBorderRadius(radius: number): void;
+    setTextBackgroundColor(color: string): void;
+    setLabelID(labelID: number): void;
+    update(): ElementFrameContext;
+    dispose(): void;
+}
+export { DOMLabel2D };

package/lib/owlly/element/dom-label-2d.js

@@ -0,0 +1,382 @@
+import { Externals } from '../stage/externals';
+import { DOM2DElement } from './dom-2d-element';
+import { ElementFrameContext } from './element';
+import { Events } from '../utils/events';
+/**
+ * 2D DOM 标签, 可展示文字与图片
+ */
+class DOMLabel2D extends DOM2DElement {
+    constructor() {
+        super(document.createElement('div')); // this.domElement === wrapper
+        const { THREE } = Externals.getInstance();
+        this.boundingBox = document.createElement('div');
+        this.textElement = document.createElement('div');
+        this.imageElement = document.createElement('img');
+        this.textPositionInfo = { anchor: 'center', offsetX: 0, offsetY: 0 };
+        this.imagePositionInfo = { anchor: 'center', offsetX: 0, offsetY: 0 };
+        this.imageElement.setAttribute('draggable', 'false');
+        this.textElement.style.cssText = `
+      position: absolute;
+      transform: translate(-50%, -50%);
+      white-space: nowrap;
+      border-style: solid;
+      border-width: 0;
+      border-color: white;
+      line-height: 1.5;
+    `;
+        this.imageElement.style.cssText = `
+      position: absolute;
+      transform: translate(-50%, -50%);
+    `;
+        this.boundingBox.style.cssText = `
+      position: absolute;
+      transform: translate(-50%, -50%);
+      display: none;
+      border-style: solid;
+      border-width: 2px;
+      border-color: red;
+      border-radius: 4px;
+      pointer-events: none;
+    `;
+        this.status = 'idle';
+        this.mouseStart = new THREE.Vector2();
+        this.mouseEnd = new THREE.Vector2();
+        this.listeners = {
+            onImageLoaded: () => { this.onImageLoaded(); },
+            onMouseDown: (e) => { this.onMouseDown(e); },
+            onMouseMove: (e) => { this.onMouseMove(e); },
+            onMouseUp: (e) => { this.onMouseUp(e); },
+            onTouchStart: (e) => { this.onTouchStart(e); },
+            onTouchMove: (e) => { this.onTouchMove(e); },
+            onTouchEnd: (e) => { this.onTouchEnd(e); },
+        };
+        this.registerListeners();
+        this.domElement.appendChild(this.imageElement);
+        this.domElement.appendChild(this.textElement);
+        this.domElement.appendChild(this.boundingBox);
+        this.calcBBoxNextFrame = true;
+    }
+    updateTextTransform() {
+        const { offsetX, offsetY, anchor } = this.textPositionInfo;
+        const { x, y } = DOMLabel2D.ANCHOR_MAP[anchor];
+        this.textElement.style.transform = `translate(${x}, ${y}) translate(${offsetX}px, ${offsetY}px)`;
+    }
+    updateImageTransform() {
+        const { offsetX, offsetY, anchor } = this.imagePositionInfo;
+        const { x, y } = DOMLabel2D.ANCHOR_MAP[anchor];
+        this.imageElement.style.transform = `translate(${x}, ${y}) translate(${offsetX}px, ${offsetY}px)`;
+    }
+    calcBBox() {
+        if (!this.visible || this.boundingBox.style.display === 'none')
+            return;
+        const wrapperBoundingRect = this.domElement.getBoundingClientRect();
+        const textBoundingRect = this.textElement.getBoundingClientRect();
+        const imageBoundingRect = this.imageElement.getBoundingClientRect();
+        const { left: textMinX, right: textMaxX, top: textMinY, bottom: textMaxY, } = textBoundingRect;
+        const { left: imageMinX, right: imageMaxX, top: imageMinY, bottom: imageMaxY, } = imageBoundingRect;
+        const points = [];
+        const { THREE } = Externals.getInstance();
+        if (this.textElement.style.display !== 'none') {
+            points.push(new THREE.Vector2(textMinX, textMinY));
+            points.push(new THREE.Vector2(textMaxX, textMaxY));
+        }
+        if (this.imageElement.style.display !== 'none') {
+            points.push(new THREE.Vector2(imageMinX, imageMinY));
+            points.push(new THREE.Vector2(imageMaxX, imageMaxY));
+        }
+        let width = 0;
+        let height = 0;
+        let offsetX = 0;
+        let offsetY = 0;
+        if (points.length) {
+            const box2 = new THREE.Box2().setFromPoints(points);
+            const { x, y } = wrapperBoundingRect;
+            width = box2.max.x - box2.min.x + 12;
+            height = box2.max.y - box2.min.y + 12;
+            offsetX = box2.min.x - x - 6;
+            offsetY = box2.min.y - y - 6;
+        }
+        this.boundingBox.style.transform = `translate(${offsetX}px, ${offsetY}px)`;
+        this.boundingBox.style.width = `${width}px`;
+        this.boundingBox.style.height = `${height}px`;
+    }
+    /* EventListeners */
+    registerListeners() {
+        this.imageElement.addEventListener('load', this.listeners.onImageLoaded);
+        this.imageElement.addEventListener('pointerdown', this.listeners.onMouseDown);
+        this.imageElement.addEventListener('touchstart', this.listeners.onTouchStart);
+        this.imageElement.addEventListener('touchmove', this.listeners.onTouchMove);
+        this.imageElement.addEventListener('touchend', this.listeners.onTouchEnd);
+        this.textElement.addEventListener('pointerdown', this.listeners.onMouseDown);
+        this.textElement.addEventListener('touchstart', this.listeners.onTouchStart);
+        this.textElement.addEventListener('touchmove', this.listeners.onTouchMove);
+        this.textElement.addEventListener('touchend', this.listeners.onTouchEnd);
+    }
+    unregisterListeners() {
+        this.imageElement.removeEventListener('load', this.listeners.onImageLoaded);
+        this.imageElement.removeEventListener('pointerdown', this.listeners.onMouseDown);
+        this.imageElement.removeEventListener('touchstart', this.listeners.onTouchStart);
+        this.imageElement.removeEventListener('touchmove', this.listeners.onTouchMove);
+        this.imageElement.removeEventListener('touchend', this.listeners.onTouchEnd);
+        this.textElement.removeEventListener('pointerdown', this.listeners.onMouseDown);
+        this.textElement.removeEventListener('touchstart', this.listeners.onTouchStart);
+        this.textElement.removeEventListener('touchmove', this.listeners.onTouchMove);
+        this.textElement.removeEventListener('touchend', this.listeners.onTouchEnd);
+    }
+    onImageLoaded() {
+        if (this.imageElement.style.width === '') {
+            this.imageElement.style.width = `${this.imageElement.width}px`;
+        }
+        if (this.imageElement.style.height === '') {
+            this.imageElement.style.height = `${this.imageElement.height}px`;
+        }
+        this.calcBBoxNextFrame = true;
+    }
+    onMouseDown(e) {
+        if (this.status !== 'idle' || e.pointerType !== 'mouse' || e.button !== 0)
+            return;
+        this.mouseStart.set(e.clientX, e.clientY);
+        this.emit(Events.LABEL_DOWN, this, null, 0);
+        this.imageElement.ownerDocument.addEventListener('pointermove', this.listeners.onMouseMove);
+        this.imageElement.ownerDocument.addEventListener('pointerup', this.listeners.onMouseUp);
+        this.status = 'down';
+    }
+    onMouseMove(e) {
+        if (this.status !== 'down' || e.pointerType !== 'mouse' || e.button !== 0)
+            return;
+        this.status = 'move';
+    }
+    onMouseUp(e) {
+        if (this.status === 'idle' || e.pointerType !== 'mouse')
+            return;
+        this.mouseEnd.set(e.clientX, e.clientY);
+        if (this.status === 'down' || this.mouseStart.distanceToSquared(this.mouseEnd) < 100) {
+            this.emit(Events.ELEMENT_SELECTED, this, null, 0);
+        }
+        this.imageElement.ownerDocument.removeEventListener('pointermove', this.listeners.onMouseMove);
+        this.imageElement.ownerDocument.removeEventListener('pointerup', this.listeners.onMouseUp);
+        this.status = 'idle';
+    }
+    onTouchStart(e) {
+        if (this.status !== 'idle' || e.touches.length > 1)
+            return;
+        this.mouseStart.set(e.touches[0].pageX, e.touches[0].pageY);
+        this.emit(Events.LABEL_DOWN, this, null, 0);
+        this.status = 'down';
+    }
+    onTouchMove(e) {
+        if (this.status !== 'down' || e.touches.length > 1)
+            return;
+        this.status = 'move';
+    }
+    onTouchEnd(e) {
+        if (this.status === 'idle')
+            return;
+        this.mouseEnd.set(e.changedTouches[0].pageX, e.changedTouches[0].pageY);
+        if (this.status === 'down' || this.mouseStart.distanceToSquared(this.mouseEnd) < 100) {
+            this.emit(Events.ELEMENT_SELECTED, this, null, 0);
+        }
+        this.status = 'idle';
+    }
+    /* LABEL WRAPPER */
+    setAttributes({ labelAttrs, imageAttrs, textAttrs }) {
+        if (labelAttrs !== undefined)
+            this.setLabelAttrs(labelAttrs);
+        if (imageAttrs !== undefined)
+            this.setImageAttrs(imageAttrs);
+        if (textAttrs !== undefined)
+            this.setTextAttrs(textAttrs);
+    }
+    setLabelAttrs(attrs) {
+        if (attrs.position !== undefined)
+            this.setPosition(attrs.position);
+        if (attrs.visible !== undefined)
+            this.setVisible(attrs.visible);
+        if (attrs.bBoxVisible !== undefined)
+            this.setBBoxVisible(attrs.bBoxVisible);
+        if (attrs.bBoxBorderWidth !== undefined)
+            this.setBBoxBorderWidth(attrs.bBoxBorderWidth);
+        if (attrs.bBoxBorderColor !== undefined)
+            this.setBBoxBorderColor(attrs.bBoxBorderColor);
+    }
+    setPosition(position) {
+        this.position.copy(position);
+        this.needUpdate = true;
+    }
+    setVisible(visible) {
+        this.visible = visible;
+        this.cssObject.visible = visible;
+        this.needUpdate = true;
+    }
+    setBBoxVisible(visible) {
+        this.boundingBox.style.display = visible ? 'block' : 'none';
+        if (visible)
+            this.calcBBoxNextFrame = true;
+    }
+    setBBoxBorderWidth(width) {
+        this.boundingBox.style.borderWidth = `${width}px`;
+    }
+    setBBoxBorderColor(color) {
+        this.boundingBox.style.borderColor = color;
+    }
+    /* LABEL IMAGE */
+    setImageAttrs(attrs) {
+        if (attrs.src !== undefined)
+            this.setImageSource(attrs.src);
+        if (attrs.visible !== undefined)
+            this.setImageVisible(attrs.visible);
+        if (attrs.size !== undefined)
+            this.setImageSize(attrs.size.width, attrs.size.height);
+        if (attrs.anchor !== undefined)
+            this.setImageAnchor(attrs.anchor);
+        if (attrs.offset !== undefined)
+            this.setImageOffset(attrs.offset.x, attrs.offset.y);
+    }
+    setImageVisible(visible) {
+        this.imageElement.style.display = visible ? 'block' : 'none';
+    }
+    setImageSource(src) {
+        this.imageElement.src = src;
+    }
+    setImageSize(width, height) {
+        this.imageElement.style.height = `${height}px`;
+        this.imageElement.style.width = `${width}px`;
+        this.calcBBoxNextFrame = true;
+    }
+    setImageAnchor(anchor) {
+        this.imagePositionInfo.anchor = anchor;
+        this.updateImageTransform();
+        this.calcBBoxNextFrame = true;
+    }
+    setImageOffset(offsetX, offsetY) {
+        this.imagePositionInfo.offsetX = offsetX;
+        this.imagePositionInfo.offsetY = offsetY;
+        this.updateImageTransform();
+        this.calcBBoxNextFrame = true;
+    }
+    /* LABEL TEXT */
+    setTextAttrs(attrs) {
+        if (attrs.content !== undefined)
+            this.setTextContent(attrs.content);
+        if (attrs.visible !== undefined)
+            this.setTextVisible(attrs.visible);
+        if (attrs.fontSize !== undefined)
+            this.setTextFontSize(attrs.fontSize);
+        if (attrs.color !== undefined)
+            this.setTextColor(attrs.color);
+        if (attrs.padding !== undefined)
+            this.setTextPadding(attrs.padding);
+        if (attrs.anchor !== undefined)
+            this.setTextAnchor(attrs.anchor);
+        if (attrs.offset !== undefined)
+            this.setTextOffset(attrs.offset.x, attrs.offset.y);
+        if (attrs.align !== undefined)
+            this.setTextAlign(attrs.align);
+        if (attrs.borderWidth !== undefined)
+            this.setTextBorderWidth(attrs.borderWidth);
+        if (attrs.borderColor !== undefined)
+            this.setTextBorderColor(attrs.borderColor);
+        if (attrs.borderRadius !== undefined)
+            this.setTextBorderRadius(attrs.borderRadius);
+        if (attrs.backgroundColor !== undefined)
+            this.setTextBackgroundColor(attrs.backgroundColor);
+    }
+    setTextVisible(visible) {
+        this.textElement.style.display = visible ? 'block' : 'none';
+        this.calcBBoxNextFrame = true;
+    }
+    setTextContent(text) {
+        this.textElement.innerText = text;
+        this.calcBBoxNextFrame = true;
+    }
+    setTextFontSize(size) {
+        this.textElement.style.fontSize = `${size}px`;
+        this.calcBBoxNextFrame = true;
+    }
+    setTextColor(color) {
+        this.textElement.style.color = color;
+    }
+    setTextPadding(padding) {
+        const targetPadding = {
+            left: 0, right: 0, top: 0, bottom: 0,
+        };
+        if (padding.left !== undefined)
+            targetPadding.left = padding.left;
+        if (padding.right !== undefined)
+            targetPadding.right = padding.right;
+        if (padding.top !== undefined)
+            targetPadding.top = padding.top;
+        if (padding.bottom !== undefined)
+            targetPadding.bottom = padding.bottom;
+        const { left, right, top, bottom, } = targetPadding;
+        this.textElement.style.padding = `${top}px ${right}px ${bottom}px ${left}px`;
+        this.calcBBoxNextFrame = true;
+    }
+    setTextAnchor(anchor) {
+        this.textPositionInfo.anchor = anchor;
+        this.updateTextTransform();
+        this.calcBBoxNextFrame = true;
+    }
+    setTextOffset(offsetX, offsetY) {
+        this.textPositionInfo.offsetX = offsetX;
+        this.textPositionInfo.offsetY = offsetY;
+        this.updateTextTransform();
+        this.calcBBoxNextFrame = true;
+    }
+    setTextBorderWidth(width) {
+        this.textElement.style.borderWidth = `${width}px`;
+        this.calcBBoxNextFrame = true;
+    }
+    setTextAlign(align) {
+        this.textElement.style.textAlign = align;
+    }
+    setTextBorderColor(color) {
+        this.textElement.style.borderColor = color;
+    }
+    setTextBorderRadius(radius) {
+        this.textElement.style.borderRadius = `${radius}px`;
+    }
+    setTextBackgroundColor(color) {
+        this.textElement.style.backgroundColor = color;
+    }
+    setLabelID(labelID) {
+        this.labelID = labelID;
+    }
+    update() {
+        const frameContext = new ElementFrameContext(this);
+        if (this.needCalcBBox)
+            this.calcBBox();
+        this.needCalcBBox = false;
+        if (this.calcBBoxNextFrame)
+            this.needCalcBBox = true;
+        this.calcBBoxNextFrame = false;
+        if (this.initialzed) {
+            frameContext.shouldPlaceElement = true;
+            this.initialzed = false;
+        }
+        if (this.needUpdate) {
+            frameContext.needUpdate = true;
+            this.needUpdate = false;
+        }
+        return frameContext;
+    }
+    dispose() {
+        this.unregisterListeners();
+        this.domElement.removeChild(this.boundingBox);
+        this.domElement.removeChild(this.textElement);
+        this.domElement.removeChild(this.imageElement);
+        super.dispose();
+    }
+}
+DOMLabel2D.ANCHOR_MAP = {
+    center: { x: '-50%', y: '-50%' },
+    left: { x: '0', y: '-50%' },
+    right: { x: '-100%', y: '-50%' },
+    top: { x: '-50%', y: '0' },
+    bottom: { x: '-50%', y: '-100%' },
+    topleft: { x: '0', y: '0' },
+    topright: { x: '-100%', y: '0' },
+    bottomleft: { x: '0', y: '-100%' },
+    bottomright: { x: '-100%', y: '-100%' },
+};
+export { DOMLabel2D };

package/lib/owlly/element/element.d.ts

@@ -0,0 +1,53 @@
+import { NS_THREE } from '../stage/externals';
+/** @ignore */
+declare class ElementFrameContext {
+    element: Element;
+    needUpdate: boolean;
+    shouldPlaceElement: boolean;
+    constructor(element: Element, needsUpdate?: boolean);
+}
+/** 元素类 */
+declare abstract class Element extends NS_THREE.Object3D {
+    /** @ignore */
+    abstract update(): ElementFrameContext;
+    private universalId?;
+    private elementListeners;
+    protected eventMap: Map<string, Set<Function>>;
+    constructor();
+    private onElementSelected;
+    /**
+     * 获取元素的uuid
+     */
+    getUUID(): string | undefined;
+    /**
+     * 设置元素的uuid
+     * @param uuid 配置的uuid
+     */
+    setUUID(uuid: string): void;
+    dispose(): void;
+    /**
+     * 注册事件监听
+     * @param event 事件名
+     * @param callback 回调函数
+     */
+    on(event: string, callback: Function): void;
+    protected emit(event: string, ...args: unknown[]): void;
+    /**
+     * 注销事件监听
+     * @param event 事件名
+     * @param callback 回调函数
+     */
+    off(event: string, callback: Function): void;
+}
+interface Element {
+    /** 可碰撞成员元素 */
+    intersectables?: NS_THREE.Object3D[];
+    /**
+     * 加载数据
+     * @param args 加载数据所需要的参数
+     */
+    load?(...args: unknown[]): unknown;
+    resize?(width: number, height: number): void;
+    render?(): void;
+}
+export { Element, ElementFrameContext };