@aibee/owlly 1.0.25 → 1.0.29

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

@@ -0,0 +1,470 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { Externals } from '../stage/externals';
+import { CSS2DObject } from '../../external/renderers/css-2d-renderer';
+import { Element, ElementFrameContext } from './element';
+import { EventHub } from '../utils/event-hub';
+import { OwllyEvents, Events } from '../utils/events';
+import { Gif } from './gif-kit/Gif';
+import { GifPresenter } from './gif-kit/GifPresenter';
+/**
+ * 2D贴图对象
+ * @noInheritDoc
+ */
+class Placeable2D extends Element {
+    /**
+     * 注意：最好在[PanoramaController]初始化视角之前就添加好，否则会漏掉初始所在全景图的[MOVE_TO_PANORAMA]事件通知
+     * @param labelID 唯一ID
+     * @param url 图片地址
+     * @param options 可选参数，如矩形宽高
+     * @example
+     * ```typescript
+     * const placeable = new Placeable2D(1, url,
+     *  {
+     *    width: 0.3,
+     *    height: 0.3,
+     *  });
+     * stage.bindElement(placeable);
+     * ```
+     */
+    constructor(labelID, url, options) {
+        super();
+        // eslint-disable-next-line
+        this.frames = [];
+        this.labelID = labelID;
+        this.initialized = false;
+        this.needUpdate = false;
+        this.isEditingInView = new Map();
+        this.currentPID = -1;
+        this.movedToNewPanorama = true;
+        this.outOfRange = true;
+        this.currentDisplayTime = 0;
+        this.frameIndex = 0;
+        this.tileDispDuration = 60;
+        this.hidden = false;
+        const { THREE } = Externals.getInstance();
+        const { width, height, depthTest, } = options || {};
+        this.width = width || 0.1;
+        this.height = height || 0.1;
+        this.depthTest = depthTest || false;
+        const geometry = new THREE.PlaneBufferGeometry(this.width, this.height);
+        // 顶点着色器
+        const vertexShader = `
+      varying vec2 vUv;
+      void main(){
+         vUv = uv;
+         gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+      }`;
+        // 片源着色器
+        const fragmentShader = `
+      uniform sampler2D map;
+      uniform vec4 blendColor;
+      uniform float opacity;
+      varying vec2 vUv;
+      void main(){
+         vec4 texColor = texture2D(map, vUv);
+         gl_FragColor = vec4((texColor * (1.0 - blendColor.a) + blendColor * blendColor.a).rgb, texColor.a) * vec4(1, 1, 1, opacity);
+      }`;
+        // uniform参数
+        this.uniforms = {
+            map: {
+                type: 't',
+                value: null,
+            },
+            blendColor: {
+                type: 'v4',
+                value: new THREE.Vector4(0, 0, 0, 0.0),
+            },
+            opacity: { value: 1 },
+        };
+        this.material = new THREE.ShaderMaterial({
+            // 设置透明属性，这样透过全景图就能看到标签
+            transparent: true,
+            vertexShader,
+            fragmentShader,
+            uniforms: this.uniforms,
+            depthTest: this.depthTest,
+            depthWrite: false,
+            name: 'placeable2DMaterial',
+            side: THREE.DoubleSide,
+        });
+        this.labelMesh = new THREE.Mesh(geometry, this.material);
+        this.labelMesh.renderOrder = 400;
+        this.add(this.labelMesh);
+        this.imgElement = document.createElement('div');
+        this.imgElement.style.pointerEvents = 'none';
+        this.imgElement.innerHTML = `<div><img width=50px height=50px src="${url}"></div>`;
+        this.cssObject = new CSS2DObject(this.imgElement);
+        this.add(this.cssObject);
+        this.viewConfigurations = new Map();
+        this.eventListeners = {
+            onMoveToPanorama: (pid, position) => {
+                this.updateCurrentBindingPanorama(pid, position);
+            },
+            onPositionChanged: (position, element, view) => {
+                if (element !== this)
+                    return;
+                const { visible } = this.getViewConfigurationByPanoramaId(view, this.currentPID);
+                this.updateViewConfigurationByPanoramaId(view, this.currentPID, { visible, position });
+            },
+        };
+        // EventHub.on(OwllyEvents.RENDERING_VIEW_CHANGED, this.eventListeners.onCurrentViewChanged);
+        EventHub.on(Events.MOVE_TO_PANORAMA, this.eventListeners.onMoveToPanorama);
+        EventHub.on(OwllyEvents.ELEMENT_POSITION_UPDATED, this.eventListeners.onPositionChanged);
+        if (url)
+            this.load(url);
+    }
+    // private async parseStream(stream: SuperGifStream): Promise<void> {
+    //   try {
+    //     const parser = new SuperGifParser(stream, this.handler);
+    //     await parser.parse();
+    //   } catch (err) {
+    //     //  this.handleError('parse');
+    //   }
+    // }
+    // private handler = {
+    //   img: (imgs: any) => {
+    //     console.log('-------------------------', imgs);
+    //   },
+    // }
+    load(url) {
+        return __awaiter(this, void 0, void 0, function* () {
+            this.initialized = false;
+            const regex = /\.gif$/;
+            const n = url.search(regex);
+            const { THREE } = Externals.getInstance();
+            if (n > 0) {
+                const xhr = new XMLHttpRequest();
+                xhr.open('GET', url, true);
+                xhr.responseType = 'arraybuffer';
+                xhr.onload = () => __awaiter(this, void 0, void 0, function* () {
+                    let arrayBuffer;
+                    arrayBuffer = xhr.response;
+                    this.gif = Gif.parse(arrayBuffer);
+                    if (arrayBuffer.toString().indexOf('ArrayBuffer') > 0) {
+                        arrayBuffer = new Uint8Array(arrayBuffer);
+                    }
+                    // const stream = new SuperGifStream(arrayBuffer);
+                    // await this.parseStream(stream);
+                    this.gif.split(true).forEach((i) => __awaiter(this, void 0, void 0, function* () {
+                        const img = new Image();
+                        const blob = GifPresenter.writeToBlob(i.writeToArrayBuffer());
+                        // img.src = GifPresenter.writeToDataUrl(i.writeToArrayBuffer());
+                        img.src = URL.createObjectURL(blob);
+                        img.onload = () => __awaiter(this, void 0, void 0, function* () {
+                            this.frames.push(img);
+                            if (this.gif.frames.length === this.frames.length) {
+                                this.frameIndex = 0;
+                                this.currentDisplayTime = new Date().getTime();
+                                const geometry = new THREE.PlaneBufferGeometry(this.width, this.height);
+                                this.gifCanvas = document.createElement('canvas');
+                                this.gifCanvas.width = this.gif.width;
+                                this.gifCanvas.height = this.gif.height;
+                                this.gifContext = this.gifCanvas.getContext('2d');
+                                // document.body.appendChild(cnv);
+                                if (this.gifContext) {
+                                    this.gifContext.drawImage(this.frames[this.frameIndex], 0, 0, this.gif.width, this.gif.height);
+                                }
+                                this.giftexture = new THREE.Texture(this.gifCanvas);
+                                this.giftexture.needsUpdate = true;
+                                this.gifMaterial = new THREE.MeshBasicMaterial({
+                                    map: this.giftexture,
+                                    transparent: true,
+                                    side: THREE.DoubleSide,
+                                });
+                                // this.gifMaterial = new MeshBasicMaterial({ color: 0x2194ce, transparent: true, side: DoubleSide });
+                                this.gifLabelMesh = new THREE.Mesh(geometry, this.gifMaterial);
+                                this.add(this.gifLabelMesh);
+                                // console.log('----texture-------', this.gif.width, this.gif.height, this.giftexture);
+                                this.needUpdate = true;
+                                this.emit(Events.ELEMENT_LOADED, this);
+                            }
+                        });
+                    }));
+                });
+                xhr.send();
+            }
+            else {
+                // console.log(`## Loading texture from:${url}`);
+                new THREE.TextureLoader().load(url, (texture) => {
+                    // console.log('## Texture loaded');
+                    this.uniforms.map.value = texture;
+                    this.needUpdate = true;
+                    this.emit(Events.ELEMENT_LOADED, this);
+                });
+                // url.slice();
+            }
+        });
+    }
+    drawCanvas() {
+        if (this.gifContext) {
+            this.gifContext.clearRect(0, 0, this.gif.width, this.gif.height);
+            this.gifContext.drawImage(this.frames[this.frameIndex], 0, 0, this.gif.width, this.gif.height);
+            this.giftexture.needsUpdate = true;
+            this.needUpdate = true;
+        }
+        // this._texture.needsUpdate = true;
+    }
+    update() {
+        const frameContext = new ElementFrameContext(this);
+        if (!this.initialized) {
+            this.initialized = true;
+            frameContext.needUpdate = true;
+        }
+        if (this.needUpdate) {
+            frameContext.needUpdate = true;
+            this.needUpdate = false;
+        }
+        if (this.gifLabelMesh !== null) {
+            const time = new Date().getTime();
+            if ((time - this.currentDisplayTime) >= this.tileDispDuration) {
+                this.currentDisplayTime = time;
+                this.frameIndex += 1;
+                if (this.frameIndex >= this.frames.length) {
+                    this.frameIndex = 0;
+                }
+                this.drawCanvas();
+                // console.log('Add Frame', this.frameIndex);
+            }
+        }
+        if (this.initialized && !this.parent) {
+            frameContext.shouldPlaceElement = true;
+        }
+        return frameContext;
+    }
+    dispose() {
+        const texture = this.uniforms.map.value;
+        if (texture) {
+            texture.dispose();
+        }
+        // EventHub.off(OwllyEvents.RENDERING_VIEW_CHANGED, this.eventListeners.onCurrentViewChanged);
+        EventHub.off(Events.MOVE_TO_PANORAMA, this.eventListeners.onMoveToPanorama);
+        EventHub.off(OwllyEvents.ELEMENT_POSITION_UPDATED, this.eventListeners.onPositionChanged);
+        this.imgElement = null;
+        this.cssObject.dispatchEvent({ type: 'remove' });
+        this.remove(this.cssObject);
+        this.cssObject = null;
+        super.dispose();
+    }
+    // renderingViewChanged(view: View): void {
+    //   const conf0 = this.viewConfigurations.get(view);
+    //   const { THREE } = Externals.getInstance();
+    //   if (!conf0) return;
+    //   const conf = {
+    //     faceToCamera: true,
+    //     keepZOnFaceToCamera: true,
+    //   } as Placeable2DViewConfigurationInternal;
+    //   if (undefined !== conf0.faceToCamera) {
+    //     conf.faceToCamera = conf0.faceToCamera;
+    //   }
+    //   if (undefined !== conf0.keepZOnFaceToCamera) {
+    //     conf.keepZOnFaceToCamera = conf0.keepZOnFaceToCamera;
+    //   }
+    //   conf.visibilities = conf0.visibilities;
+    //   if (this.movedToNewPanorama && this.currentPanoramaPosition) {
+    //     conf.positions = conf0.positions;
+    //     if (conf.positions) {
+    //       let position = conf.positions.get(this.currentPID);
+    //       if (!position) {
+    //         position = conf.positions.get(-1);
+    //       }
+    //       if (position) {
+    //         this.position.copy(position);
+    //       }
+    //     }
+    //     this.outOfRange = this.currentPanoramaPosition.distanceTo(this.position) >= conf0.visibleScope!;
+    //     this.movedToNewPanorama = false;
+    //   }
+    //   if (conf.visibilities) {
+    //     let visibility = conf.visibilities.get(this.currentPID);
+    //     if (undefined === visibility) {
+    //       visibility = conf.visibilities.get(-1);
+    //     }
+    //     visibility = visibility && !this.outOfRange;
+    //     const editing = !!this.isEditingInView.get(view);
+    //     this.labelMesh.visible = !!((visibility || editing) && conf0.showMesh) && !this.hidden;
+    //     this.cssObject!.visible = !!((visibility || editing) && conf0.showDom) && !this.hidden;
+    //     this.visible = this.labelMesh.visible || this.cssObject!.visible;
+    //     this.uniforms.opacity.value = 1;
+    //     if (this.cssObject!.visible && !conf0.showMesh) {
+    //       this.labelMesh.visible = true;
+    //       this.uniforms.opacity.value = 0;
+    //     }
+    //     if (this.isEditingInView.get(view) && !visibility) {
+    //       this.uniforms.blendColor.value = new THREE.Vector4(1, 0, 0, 0.5);
+    //     } else this.uniforms.blendColor.value = new THREE.Vector4(0, 0, 0, 0);
+    //   }
+    //   if (conf.faceToCamera && view.camera) {
+    //     this.up.copy(view.camera.up).normalize();
+    //     if (conf.keepZOnFaceToCamera) {
+    //       const v = new THREE.Vector3().copy(view.camera.position).sub(this.position);
+    //       const positionOnZ = view.camera.position.clone().addScaledVector(this.up, -v.dot(this.up));
+    //       this.lookAt(positionOnZ);
+    //     } else {
+    //       this.lookAt(view.camera.position);
+    //     }
+    //   }
+    // }
+    /**
+     * 设置在指定View中的显示配置参数
+     * @param configuration 显示配置对象
+     * @example
+     * ```typescript
+     * label2D.addViewConfiguration({
+     *   targetView: view,
+     *   positions: [
+     *     { pid: 6, position: labelPosition3 },
+     *     { pid: 3, position: labelPosition6 },
+     *   ],
+     *   visibilities: [{ pid: -1, visible: false }],
+     *   faceToCamera: true,
+     * });
+     * ```
+     */
+    addViewConfiguration(configuration) {
+        const config = {
+            targetView: configuration.targetView,
+            faceToCamera: configuration.faceToCamera,
+            keepZOnFaceToCamera: configuration.keepZOnFaceToCamera,
+            showDom: false,
+            showMesh: true,
+            visibleScope: 5,
+        };
+        const prevConfig = this.viewConfigurations.get(configuration.targetView);
+        if (prevConfig) {
+            config.visibilities = prevConfig.visibilities;
+            config.positions = prevConfig.positions;
+            if (undefined === config.faceToCamera) {
+                config.faceToCamera = prevConfig.faceToCamera;
+            }
+            if (undefined === config.keepZOnFaceToCamera) {
+                config.keepZOnFaceToCamera = prevConfig.keepZOnFaceToCamera;
+            }
+            config.showDom = prevConfig.showDom;
+            config.showMesh = prevConfig.showMesh;
+            config.visibleScope = prevConfig.visibleScope;
+        }
+        if (configuration.showDom !== undefined)
+            config.showDom = configuration.showDom;
+        if (configuration.showMesh !== undefined)
+            config.showMesh = configuration.showMesh;
+        if (configuration.visibleScope !== undefined)
+            config.visibleScope = configuration.visibleScope;
+        if (configuration.visibilities) {
+            if (!config.visibilities) {
+                config.visibilities = new Map();
+            }
+            configuration.visibilities.forEach((item) => {
+                config.visibilities.set(item.pid, item.visible);
+            });
+        }
+        if (configuration.positions) {
+            if (!config.positions) {
+                config.positions = new Map();
+            }
+            configuration.positions.forEach((item) => {
+                config.positions.set(item.pid, item.position);
+            });
+        }
+        this.viewConfigurations.set(config.targetView, config);
+    }
+    /**
+     * 设置当前标签是否处于编辑模式
+     * @param editingMode 是否设置为编辑模式
+     */
+    setEditingMode(targetView, editingMode) {
+        this.isEditingInView.set(targetView, editingMode);
+        this.needUpdate = true;
+        // if (editingMode) {
+        //   this.editViewConfiguration(targetView, {
+        //     position: this.position.clone(),
+        //     visibility: this.visible,
+        //   });
+        // }
+    }
+    isEditing(targetView) {
+        return !!this.isEditingInView.get(targetView);
+    }
+    /**
+     * 设置标签尺寸
+     * @param width 宽度
+     * @param height 高度
+     */
+    setSize(width, height) {
+        const { THREE } = Externals.getInstance();
+        this.width = width;
+        this.height = height;
+        const geometry = new THREE.PlaneBufferGeometry(width, height);
+        this.labelMesh.geometry = geometry;
+    }
+    /**
+       * 查询当前设置的标签尺寸
+       * @returns number数组，依次是width, height
+       */
+    getSize() {
+        return [this.width, this.height];
+    }
+    /**
+     * 设置imgElement Css
+     * @param cssText string
+     * @param width 宽
+     * @param height 高
+     */
+    setDomCSS(width, height, cssText) {
+        if (this.imgElement) {
+            const img = this.imgElement.getElementsByTagName('img')[0];
+            let css;
+            if (cssText) {
+                css = `${cssText};width:${width.toString()}px;height:${height.toString()}px;`;
+            }
+            else
+                css = `width:${width.toString()}px;height:${height.toString()}px;`;
+            img.style.cssText = css;
+            this.width = width;
+            this.height = height;
+            this.isDomElement = true;
+        }
+    }
+    getViewConfigurationByPanoramaId(view, pid) {
+        const conf = this.viewConfigurations.get(view);
+        if (!conf)
+            throw new Error('Cannot find view configuration');
+        const position = conf.positions.has(pid) ? conf.positions.get(pid) : conf.positions.get(-1);
+        const visible = conf.visibilities.has(pid) ? conf.visibilities.get(pid) : conf.visibilities.get(-1);
+        return { visible, position };
+    }
+    updateViewConfigurationByPanoramaId(view, pid, { visible, position }) {
+        const conf = this.viewConfigurations.get(view);
+        if (!conf)
+            throw new Error('Cannot find view configuration');
+        if (position !== undefined)
+            conf.positions.set(pid, position);
+        if (visible !== undefined)
+            conf.visibilities.set(pid, visible);
+        this.needUpdate = true;
+    }
+    /**
+     * 手动更新Placeable2D当前所在全景点位
+     * @param pid 点位id
+     * @param position 全景点位坐标
+     */
+    updateCurrentBindingPanorama(pid, position) {
+        this.currentPID = pid;
+        this.movedToNewPanorama = true;
+        this.currentPanoramaPosition = position ? position.clone() : null;
+    }
+    /**
+     * 将Placeable2D设置为不可见
+     */
+    setHidden(hidden) {
+        this.hidden = hidden;
+    }
+}
+export { Placeable2D };

package/lib/owlly/element/polygon-mesh.d.ts

@@ -0,0 +1,107 @@
+import { NS_THREE } from '../stage/externals';
+import { Element, ElementFrameContext } from './element';
+import { Shape } from './map-kit/shape';
+declare class PolygonMesh extends Element {
+    private initialized;
+    private loaded;
+    private verticesInvalidated;
+    private shape;
+    private zShape;
+    private vertices;
+    private group;
+    /**
+     * 生成三角化多边形网格
+     * 通过一个Shape描述形状, 通过第二个Shape来做高度的描述.
+     * @param shape 如果shape是一个"line", 则它是一个从折线描述的一个立面, 此时zShape的pathStep里面应该是和shape相同长度的PathStep数组, 里面的command和coords长度与第一个shape逐一对应, 但coords表示是z的起始位置和z的结束位置
+     * 并以每个类型为MOVE的PathStep作为折线段的起点
+     * 如果shape是一个'shape', 则它是一个从多边形描述的水平图形, 这时zShape的pathStep里面应该是和shape相同长度的PathStep数组, 里面的command和coords长度与第一个shape逐一对应, 但coords[0]表示其z高度
+     * 除第一个以外的类型为MOVE的PathStep作为一个孔的起点，可参考earcut的定义方式：https://github.com/mapbox/earcut
+     * @param zShape 见上述说明
+     * @example
+     * ```
+     const rectsLinesShapeData = {
+        id: 'rectsLines',
+        x: panoData[2].position.x,
+        y: panoData[2].position.y,
+        zIndex: 1000,
+        height: panoData[2].position.z - 0.5,
+        shapeType: 'line',
+        path: 'm-2,-2l-2,2l2,2l2,-2l-2,-2m-1,-1l-1,1l1,1l1,-1l-1,-1',
+        fill: 0x00ffff,
+        opacity: 1.0,
+        scale: [1.0, 1.0, 1.0],
+        rotation: [0.0, 0.0, 0.0, 1.0],
+      };
+      const rectsLines = new Shape(rectsLinesShapeData);
+  
+      const rectsSidesShapeData = {
+        id: 'rectsSides',
+        shapeType: 'line',
+        path: 'm1,0l1,0l1,0l1,0l1,0m1,-1l1,-1l1,-1l1,-1l1,-1',
+      };
+      const rectsSides = new Shape(rectsSidesShapeData);
+  
+      const facade = new PolygonMesh(
+        rectsLines,
+        rectsSides,
+      );
+      stage.bindElement(facade);
+  
+      const rectsPolygonShapeData = {
+        id: 'rectsPolygon',
+        x: panoData[2].position.x,
+        y: panoData[2].position.y,
+        zIndex: 1100,
+        height: panoData[2].position.z - 0.5,
+        shapeType: 'shape',
+        path: 'm-2,-2l-2,2l2,2l2,-2l-2,-2m-1,-1l-1,1l1,1l1,-1l-1,-1',
+        fill: 0xff00ff,
+        opacity: 1.0,
+        scale: [1.0, 1.0, 1.0],
+        rotation: [0.0, 0.0, 0.0, 1.0],
+      };
+      const rectsPolygon = new Shape(rectsPolygonShapeData);
+      const polygon = new PolygonMesh(
+        rectsPolygon,
+        rectsSides,
+      );
+      stage.bindElement(polygon);
+     * ```
+     */
+    constructor(shape: Shape, zShape: Shape, optionalParams?: {
+        material?: NS_THREE.Material;
+    });
+    private updateGeometries;
+    private updateMaterials;
+    /**
+     * 以当前Shape成员更新Mesh
+     */
+    applyShapes(shape?: Shape, zShape?: Shape): void;
+    setColor(color: NS_THREE.Color | string | number, opacity?: number): void;
+    /**
+     * 把当前顶点数组同步到Mesh的Geometry以及Shape成员的PathSteps中
+     */
+    private applyVertices;
+    /**
+     * 设置单个已有顶点的位置
+     * @param index 顶点序号
+     * @param position 三维坐标
+     * @returns 若顶点序号越界，则返回false
+     */
+    setVertex(index: number, position: NS_THREE.Vector3): boolean;
+    /**
+     * 获得从顶点序号到顶点位置的映射Map
+     */
+    getVertexMap(): Map<number, NS_THREE.Vector3>;
+    /**
+     * 得到当前用以描述顶面/线的Shape对象
+     */
+    getShape(): Shape;
+    /**
+     * 得到当前用以描述侧面的Shape对象
+     */
+    getZShape(): Shape;
+    update(): ElementFrameContext;
+    dispose(): void;
+}
+export { PolygonMesh };