@aibee/owlly 1.0.26 → 1.0.29

package/lib/owlly/element/path.js

@@ -0,0 +1,531 @@
+import { Externals } from '../stage/externals';
+import { ElementFrameContext, Element } from './element';
+import { BasicTools } from '../utils/basic-tools';
+import { PathUtils } from '../utils/path-utils';
+import { FloorModel } from './floor-model';
+import { EventHub } from '../utils/event-hub';
+import { OwllyEvents } from '../utils/events';
+/**
+ * 路径元素, 渲染路径箭头(暂未引入箭头Mesh)
+ * @noInheritDoc
+ */
+class Path extends Element {
+    /**
+     * @param path 路径
+     * @param options 可选参数集
+     * @param floorModel FloorModel对象，用于计算地面高度坐标
+     * @param groundParams GroundParameters对象，用于计算地面高度坐标
+     * @param color 路劲的颜色
+     * 当有groundParams时则优先使用它计算，忽略floorModel参数
+     */
+    constructor(path, options) {
+        super();
+        this.modelInitialized = false;
+        this.pointMap = new Map();
+        this.gradientDistance = 2;
+        this.viewDistance = (options || {}).viewDistance || 30;
+        // this.gradientDistance = options?.gradientDistance || 2;
+        // this.dynamicPathEnabled = options?.dynamicPathEnabled || false;
+        // this.jointHintDistance = 10;
+        if (path)
+            this.load(path, options);
+    }
+    /**
+     *
+     * @param path 路径点二维坐标数组
+     * @param params 其它可选参数
+     * @param arrowImageRatio 箭头图像的宽高比，用于生成纹理坐标
+     * @param arrowImageURL 箭头图像URL
+     * @param floorModel FloorModel对象，用于计算地面高度坐标
+     * @param groundParams GroundParameters对象，用于计算地面高度坐标
+     * @param color 路劲的颜色
+     * 当存在groundParams时优先用它计算，忽略floorModel
+     */
+    static generatePathMesh(path, params) {
+        const { viewDistance = 10, gradientDistance = 2, arrowImageRatio = 1, arrowImageURL, floorModel, groundParams, color, dynamicPathEnabled, width = 0.3, } = params || {};
+        // const simplifiedPath = PathUtils.simplify(path, true).map((p) => ({ x: p.x, y: -p.y }));
+        const simplifiedPath = PathUtils.simplify(path, true);
+        const smoothedPath = PathUtils.smoothPath(simplifiedPath.map((p) => ([p.x, p.y])));
+        const centerNormals = [];
+        const pathDistance = [0];
+        const pathProgress = [0];
+        const { THREE } = Externals.getInstance();
+        smoothedPath.reduce(([x0, y0], [x1, y1], i) => {
+            centerNormals.push(new THREE.Vector2(y0 - y1, x1 - x0).normalize());
+            const len = Math.sqrt((Math.pow((x0 - x1), 2)) + (Math.pow((y0 - y1), 2)));
+            pathDistance.push(pathDistance[i - 1] + len);
+            return [x1, y1];
+        });
+        for (let i = 0, pathLen = pathDistance.length; i < pathLen; i += 1) {
+            pathProgress[i] = pathDistance[i] / pathDistance[pathLen - 1];
+        }
+        const sideAPath = [];
+        const sideBPath = [];
+        const halfWidth = width;
+        centerNormals.forEach((n, i) => {
+            if (i === 0) {
+                const [x0, y0] = smoothedPath[0];
+                sideAPath.push([x0 + n.x * halfWidth, y0 + n.y * halfWidth]);
+                sideBPath.push([x0 - n.x * halfWidth, y0 - n.y * halfWidth]);
+                // console.log(`#Path# SideA[${i}]=(${x0 + n.x * halfWidth}, ${y0 + n.y * halfWidth}), SideB[${i}]=(${x0 - n.x * halfWidth}, ${y0 - n.y * halfWidth})`);
+            }
+            const [x, y] = smoothedPath[i + 1];
+            sideAPath.push([x + n.x * halfWidth, y + n.y * halfWidth]);
+            sideBPath.push([x - n.x * halfWidth, y - n.y * halfWidth]);
+            // console.log(`#Path# SideA[${i}+1]=(${x + n.x * halfWidth}, ${y + n.y * halfWidth}), SideB[${i}+1]=(${x - n.x * halfWidth}, ${y - n.y * halfWidth})`);
+        });
+        sideBPath.reverse();
+        const shape = new THREE.Shape();
+        shape.moveTo(...sideAPath[0]);
+        sideAPath.forEach((p, i) => {
+            if (i === 0)
+                return;
+            shape.lineTo(...p);
+        });
+        sideBPath.forEach((p) => {
+            shape.lineTo(...p);
+        });
+        shape.lineTo(...sideAPath[0]);
+        const geometry = new THREE.ShapeBufferGeometry(shape);
+        const arrowTexcoordScaleT = arrowImageRatio / halfWidth * 0.5;
+        let dynamicPath = false;
+        if (dynamicPathEnabled) {
+            dynamicPath = true;
+        }
+        const uniforms = {
+            // arrowTexture: {
+            //   value: null,
+            // },
+            arrowTexcoordScaleT: {
+                value: arrowTexcoordScaleT,
+            },
+            current: { value: 0.0 },
+            dynamic: { value: dynamicPath },
+            /* eslint-disable @typescript-eslint/camelcase */
+            full_length: { value: pathDistance[pathDistance.length - 1] },
+            view_distance: { value: viewDistance },
+            gradient_distance: { value: gradientDistance },
+        };
+        if (arrowImageURL) {
+            new THREE.TextureLoader().load(arrowImageURL, (texture) => {
+                texture.wrapS = THREE.RepeatWrapping;
+                texture.wrapT = THREE.RepeatWrapping;
+                texture.generateMipmaps = true;
+                texture.minFilter = THREE.LinearMipMapLinearFilter;
+                texture.magFilter = THREE.LinearMipMapLinearFilter;
+                // uniforms.arrowTexture.value = texture;
+                if (texture.image && texture.image.width && texture.image.height) {
+                    uniforms.arrowTexcoordScaleT.value = texture.image.width / texture.image.height / halfWidth * 0.5;
+                }
+            });
+        }
+        const material = new THREE.ShaderMaterial({
+            vertexShader: `
+        attribute vec3 a_color;
+        attribute vec2 a_texcoord;
+        attribute float progress;
+        varying float vProgress;
+        varying vec3 vColor;
+        varying vec2 vTexcoord;
+        void main() {
+            gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
+            vProgress = progress;
+            vColor = a_color;
+            vTexcoord = a_texcoord;
+        }
+        `,
+            fragmentShader: `
+        precision mediump float;
+        varying float vProgress;
+        varying vec3 vColor;
+        varying vec2 vTexcoord;
+        uniform float current;
+        uniform bool dynamic;
+        uniform float full_length;
+        uniform float view_distance;
+        uniform float gradient_distance;
+        // uniform sampler2D arrowTexture;
+        uniform float arrowTexcoordScaleT;
+        float alpha;
+        float cur;
+        bool dy;
+        void main() {
+            alpha = 0.8;
+            cur = current;
+            dy = dynamic;
+            if (vProgress < cur) {
+            alpha = 0.0;
+            } else {
+            if (vProgress > cur + view_distance) {
+                alpha = 0.0;
+            } else {
+                if (vProgress > cur + gradient_distance) {
+                  alpha = 0.8;
+                  if (cur > full_length - view_distance) {
+                      cur = full_length - view_distance;
+                  }
+                  if (vProgress > cur + view_distance - gradient_distance) {
+                      alpha = abs(cur + view_distance - vProgress) / gradient_distance * 0.8;
+                  }
+                } else {
+                  alpha = abs(vProgress - cur) / gradient_distance * 0.8;
+                }
+            }
+            }
+
+            // vec4 textureColor = texture2D(arrowTexture, vec2(vTexcoord.s, vTexcoord.t * arrowTexcoordScaleT));
+            // gl_FragColor = vec4((1.0 - textureColor.a) * vColor + textureColor.a * textureColor.rgb, 0.8);
+            if(dy) {
+              gl_FragColor = vec4(vColor,alpha);
+            } else {
+              gl_FragColor = vec4(vColor,0.8);
+            }
+
+        }
+        `,
+            uniforms,
+            side: THREE.DoubleSide,
+            depthTest: !dynamicPath,
+        });
+        let minX = Number.MAX_SAFE_INTEGER;
+        let minY = Number.MAX_SAFE_INTEGER;
+        const { array, count } = geometry.attributes.position;
+        for (let i = 0, j = 0; i < count; i += 1, j += 3) {
+            const x = array[j];
+            const y = array[j + 1];
+            if (array[j] < minX)
+                minX = x;
+            if (array[j + 1] < minY)
+                minY = y;
+        }
+        // const { index: indices } = geometry;
+        if (groundParams && groundParams.groundPlane) {
+            for (let i = 0, j = 0; i < count; i += 1, j += 3) {
+                const x = array[j];
+                const y = array[j + 1];
+                let z = 0.5;
+                const groundPoint = FloorModel.intersectWithGroundPlane(new THREE.Vector3(x, y, z), groundParams);
+                if (groundPoint) {
+                    z = groundPoint.z + PathUtils.PathMeshOffsetZ;
+                }
+                array[j + 2] = z;
+            }
+        }
+        else {
+            const updateZWithFloorModel = () => {
+                if (!floorModel || !floorModel.isModelLoaded())
+                    return;
+                for (let i = 0, j = 0; i < count; i += 1, j += 3) {
+                    const x = array[j];
+                    const y = array[j + 1];
+                    let z = 0.5;
+                    const groundPoint = floorModel.intersectGround(new THREE.Vector3(x, y, z));
+                    // console.info('#PathArrow# groundPoint:', groundPoint);
+                    if (groundPoint) {
+                        z = groundPoint.z + PathUtils.PathMeshOffsetZ;
+                    }
+                    array[j + 2] = z;
+                }
+                geometry.attributes.position.needsUpdate = true;
+            };
+            if (floorModel && floorModel.isModelLoaded()) {
+                updateZWithFloorModel();
+            }
+            EventHub.on(OwllyEvents.ELEMENT_LOADED, (element) => {
+                if (!(element instanceof FloorModel))
+                    return;
+                if (element !== floorModel)
+                    return;
+                updateZWithFloorModel();
+            });
+        }
+        geometry.attributes.position.needsUpdate = true;
+        // TODO(jyfang): arrow meshes not needed now
+        const arrowMeshes = [];
+        if (arrowImageURL) {
+            const geom = new THREE.PlaneBufferGeometry(0.5 * halfWidth / 0.3, 0.5 * halfWidth / 0.3);
+            const materialTop = new THREE.MeshBasicMaterial({
+                color: 0xFFFFFF,
+                transparent: true,
+                opacity: 0.8,
+                blending: THREE.NormalBlending,
+                side: THREE.DoubleSide,
+                depthTest: !dynamicPath,
+            });
+            const texture = new THREE.TextureLoader().load(arrowImageURL);
+            texture.needsUpdate = true;
+            materialTop.needsUpdate = true;
+            materialTop.map = texture;
+            const baseArrowMesh = new THREE.Mesh(geom, materialTop);
+            for (let i = 0, threshold = 0.8, pathLen = smoothedPath.length; i < pathLen; i += 1) {
+                if (pathDistance[i] > threshold) {
+                    threshold += 0.8;
+                    const [x, y] = smoothedPath[i];
+                    const { x: nx, y: ny } = centerNormals[i === pathLen - 1 ? i - 1 : i];
+                    const newMesh = baseArrowMesh.clone();
+                    newMesh.position.set(x, y, -0.5);
+                    if (groundParams) {
+                        const floorPos = FloorModel.intersectWithGroundPlane(new THREE.Vector3(x, y, 2), groundParams);
+                        if (floorPos) {
+                            floorPos.z += PathUtils.ArrowMeshOffsetZ;
+                            newMesh.position.copy(floorPos);
+                        }
+                    }
+                    else if (floorModel) {
+                        const floorPos = floorModel.intersectGround(new THREE.Vector3(x, y, 2));
+                        if (floorPos) {
+                            floorPos.z += PathUtils.ArrowMeshOffsetZ;
+                            newMesh.position.copy(floorPos);
+                        }
+                    }
+                    newMesh.material = materialTop.clone();
+                    newMesh.rotateZ(new THREE.Vector2(ny, -nx).angle() - 0.5 * Math.PI);
+                    arrowMeshes.push({ arrowMesh: newMesh, index: i });
+                }
+            }
+        }
+        const pathMinX = Math.floor(minX);
+        const pathMinY = Math.floor(minY);
+        const pointMap = new Map();
+        smoothedPath.forEach(([x, y], i) => {
+            const [row, col] = PathUtils.getPointHash(x, y, pathMinX, pathMinY, 25);
+            if (!pointMap.has(`${row}`))
+                pointMap.set(`${row}`, new Map());
+            const mapRow = pointMap.get(`${row}`);
+            if (!mapRow.has(`${col}`))
+                mapRow.set(`${col}`, []);
+            mapRow.get(`${col}`).push([i, x, y]);
+        });
+        // TODO(jyfang): no floating arrows right now.
+        // const floatingArrows = [];
+        // let lastTurnIndex = 0;
+        // for (let i = 0; i < simplifiedPath.length - 2; i += 1) {
+        //     const p0 = simplifiedPath[i];
+        //     const p1 = simplifiedPath[i + 1];
+        //     const p2 = simplifiedPath[i + 2];
+        //     const v0 = new Vector2(p0.x - p1.x, p0.y - p1.y);
+        //     const v1 = new Vector2(p2.x - p1.x, p2.y - p1.y);
+        //     const deg = NavigationPath.getAngle(v0, v1) / Math.PI * 180;
+        //     if (deg < 135) {
+        //     const newMesh = this.baseFloatingArrowMesh.clone();
+        //     newMesh.position.setX(p1.x);
+        //     newMesh.position.setY(p1.y);
+        //     newMesh.material = this.baseFloatingArrowMesh.material.clone();
+        //     newMesh.up.set(0, 0, 1);
+        //     newMesh.rotateZ(Math.PI + v1.angle());
+        //     newMesh.rotateX(Math.PI / 2);
+        //     newMesh.renderOrder = 250;
+        //     newMesh.scale.set(2, 2, 2);
+        //     const pathPointIndex = NavigationPath.findNeareastPathPoint(
+        //         p1.x, p1.y, pathMinX, pathMinY, pointMap, true,
+        //     );
+        //     if (pathDistance[pathPointIndex] - pathDistance[lastTurnIndex] > this.jointHintDistance) {
+        //         floatingArrows.push({ mesh: newMesh, index: pathPointIndex });
+        //         lastTurnIndex = pathPointIndex;
+        //     }
+        //     }
+        // }
+        const progressBuffer = new Float32Array(count);
+        const colorBuffer = new Float32Array(count * 3);
+        // rgb(255, 140, 0) rgb(240, 68, 55)
+        /* eslint-disable */
+        let rs = 1.0, gs = 140 / 255, bs = 0;
+        let rd = 240 / 255, gd = 68 / 255, bd = 55 / 255;
+        if (color) {
+            const colorChange = [];
+            for (let i = 2; i < 8; i += 2) {
+                colorChange.push(parseInt(`0x${color.slice(i, i + 2)}`));
+            }
+            rs = colorChange[0] / 255, gs = colorChange[1] / 255, bs = colorChange[2] / 255;
+            rd = colorChange[0] / 255, gd = colorChange[1] / 255, bd = colorChange[2] / 255;
+        }
+        const rdiff = rd - rs, gdiff = gd - gs, bdiff = bd - bs;
+        /* eslint-enable */
+        for (let i = 0, j = 0; i < count; i += 1, j += 3) {
+            const px = array[j];
+            const py = array[j + 1];
+            const [row, col] = PathUtils.getPointHash(px, py, pathMinX, pathMinY, 25);
+            let dist = Number.MAX_SAFE_INTEGER;
+            if (pointMap.has(`${row}`)
+                && pointMap.get(`${row}`).has(`${col}`)) {
+                pointMap.get(`${row}`).get(`${col}`).forEach(([index, x, y]) => {
+                    const d2 = (Math.pow((px - x), 2)) + (Math.pow((py - y), 2));
+                    if (d2 > dist)
+                        return;
+                    dist = d2;
+                    const l = pathDistance[index];
+                    const p = pathProgress[index];
+                    progressBuffer[i] = l;
+                    colorBuffer[i * 3] = rs + p * rdiff;
+                    colorBuffer[i * 3 + 1] = gs + p * gdiff;
+                    colorBuffer[i * 3 + 2] = bs + p * bdiff;
+                });
+            }
+        }
+        // const texcoordBuffer = new Float32Array(count * 2);
+        // let x0 = (array[0] + array[(count - 1) * 3]) / 2;
+        // let y0 = (array[1] + array[(count - 1) * 3 + 1]) / 2;
+        // let totalDistance = 0;
+        // for (let i = 0; i < count / 2; i += 1) {
+        //   const x1 = (array[i * 3] + array[(count - 1 - i) * 3]) / 2;
+        //   const y1 = (array[i * 3 + 1] + array[(count - 1 - i) * 3 + 1]) / 2;
+        //   totalDistance += Math.sqrt((x1 - x0) * (x1 - x0) + (y1 - y0) * (y1 - y0));
+        //   x0 = x1;
+        //   y0 = y1;
+        //   texcoordBuffer[i * 2] = 0.0;
+        //   texcoordBuffer[(count - 1 - i) * 2] = 1.0;
+        //   if (i === count / 2 - 1) {
+        //     texcoordBuffer[i * 2 + 1] = totalDistance;
+        //     texcoordBuffer[(count - 1 - i) * 2 + 1] = totalDistance;
+        //   } else {
+        //     const vAB = new Vector2(
+        //       array[(count - 1 - i) * 3] - array[i * 3],
+        //       array[(count - 1 - i) * 3 + 1] - array[i * 3 + 1],
+        //     );
+        //     const crossProduct = vAB.cross(centerNormals[i]);
+        //     const offset = crossProduct / 2;
+        //     texcoordBuffer[i * 2 + 1] = totalDistance - offset;
+        //     texcoordBuffer[(count - 1 - i) * 2 + 1] = totalDistance + offset;
+        //   }
+        //   // if (i % 2 === 0) {
+        //   //   texcoordBuffer[i * 2 + 1] = 0.0;
+        //   //   texcoordBuffer[(count - 1 - i) * 2 + 1] = 0.0;
+        //   // } else {
+        //   //   texcoordBuffer[i * 2 + 1] = 1.0;
+        //   //   texcoordBuffer[(count - 1 - i) * 2 + 1] = 1.0;
+        //   // }
+        // }
+        // geometry.addAttribute('a_texcoord', new BufferAttribute(texcoordBuffer, 2));
+        geometry.addAttribute('progress', new THREE.BufferAttribute(progressBuffer, 1));
+        geometry.addAttribute('a_color', new THREE.BufferAttribute(colorBuffer, 3));
+        material.transparent = true;
+        const mesh = new THREE.Mesh(geometry, material);
+        return {
+            mesh,
+            arrowMeshes,
+            newPath: smoothedPath,
+            pointMap,
+            pathMinX,
+            pathMinY,
+            progressBuffer,
+            pathDistance,
+        };
+    }
+    /**
+     * 载入路径
+     * @param path 路径
+     */
+    load(path, options) {
+        const { groundParams, floorModel, arrowImageURL, color, dynamicPathEnabled, // / = 'imgs/arrow.png',
+        width, viewDistance, } = options || {};
+        const { mesh, arrowMeshes, 
+        // newPath,
+        pathMinX, pathMinY, pointMap, pathDistance, } = Path.generatePathMesh(path, {
+            groundParams,
+            floorModel,
+            arrowImageURL,
+            color,
+            dynamicPathEnabled,
+            width,
+            viewDistance,
+        });
+        this.pathMesh = mesh;
+        this.pathMesh.up.set(0, 0, 1);
+        this.pathMesh.renderOrder = 200;
+        this.add(this.pathMesh);
+        this.arrowMeshes = [];
+        this.pathArrowMeshes = arrowMeshes;
+        arrowMeshes.forEach(({ arrowMesh }) => {
+            arrowMesh.renderOrder = 201;
+            this.arrowMeshes.push(arrowMesh);
+            this.add(arrowMesh);
+        });
+        // this.path = newPath;
+        this.pathMinX = pathMinX;
+        this.pathMinY = pathMinY;
+        this.pointMap = pointMap;
+        this.pathDistance = pathDistance;
+        this.modelInitialized = true;
+    }
+    /** @ignore */
+    update() {
+        const frameContext = new ElementFrameContext(this);
+        if (this.modelInitialized) {
+            this.modelInitialized = false;
+            frameContext.needUpdate = true;
+        }
+        const { THREE } = Externals.getInstance();
+        // TODO(jyfang): dynamic path
+        if (this.dynamicPathEnabled && this.pathMesh && this.bindedCamera) {
+            const { position: { x: cameraX, y: cameraY } } = this.bindedCamera;
+            const [row, col] = PathUtils.getPointHash(cameraX, cameraY, this.pathMinX, this.pathMinY, 25);
+            let dist = Number.MAX_SAFE_INTEGER;
+            let currentProgress = 0;
+            if (this.pointMap.get(`${row}`)) {
+                const mapRow = this.pointMap.get(`${row}`).get(`${col}`);
+                if (this.pointMap.get(`${row}`) && mapRow) {
+                    // console.log(mapRow, this.viewDistance, this.position, [row, col], this.pathDistance, this.pointMap);
+                    mapRow.forEach(([index, x, y]) => {
+                        const d2 = (Math.pow((cameraX - x), 2)) + (Math.pow((cameraY - y), 2));
+                        if (d2 > dist)
+                            return;
+                        dist = d2;
+                        currentProgress = this.pathDistance[index];
+                    });
+                    const fullLength = this.pathDistance[this.pathDistance.length - 1];
+                    if (currentProgress < 5)
+                        currentProgress = 0;
+                    this.pathArrowMeshes.forEach(({ arrowMesh: m, index: pathIndex }) => {
+                        const prog = this.pathDistance[pathIndex];
+                        let cur = currentProgress;
+                        if (m.isMesh && m.material instanceof THREE.Material) {
+                            m.material.opacity = 0;
+                        }
+                        if (prog > cur && prog < cur + this.viewDistance) {
+                            if (m.isMesh && m.material instanceof THREE.Material) {
+                                m.material.opacity = 0.8;
+                            }
+                            if (prog < cur + this.gradientDistance) {
+                                if (m.isMesh && m.material instanceof THREE.Material) {
+                                    m.material.opacity = Math.abs(prog - cur) / this.gradientDistance * 0.8;
+                                }
+                            }
+                            else {
+                                if (cur > fullLength - this.viewDistance) {
+                                    cur = fullLength - this.viewDistance;
+                                }
+                                if (prog > cur + this.viewDistance - this.gradientDistance) {
+                                    if (m.isMesh && m.material instanceof THREE.Material) {
+                                        m.material.opacity = Math.abs(cur + this.viewDistance - prog)
+                                            / this.gradientDistance * 0.8;
+                                    }
+                                }
+                            }
+                        }
+                        if (m.isMesh && m.material instanceof THREE.Material) {
+                            m.material.needsUpdate = true;
+                        }
+                    });
+                }
+                if (this.pathMesh.material instanceof THREE.ShaderMaterial) {
+                    this.pathMesh.material.uniforms.current.value = currentProgress;
+                    this.pathMesh.material.needsUpdate = true;
+                }
+            }
+        }
+        if (this.modelInitialized && !this.parent) {
+            frameContext.shouldPlaceElement = true;
+        }
+        return frameContext;
+    }
+    dispose() {
+        super.dispose();
+        BasicTools.dispose(this, true);
+    }
+    setPathSettings(camera, viewDistance, dynamicPathEnabled) {
+        this.bindedCamera = camera;
+        this.viewDistance = viewDistance;
+        this.dynamicPathEnabled = dynamicPathEnabled;
+    }
+}
+export { Path };

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

@@ -0,0 +1,158 @@
+import { NS_THREE } from '../stage/externals';
+import { Element, ElementFrameContext } from './element';
+import { View } from '../view/view';
+/**
+ * @param targetView  指定的View
+ * @param faceToCamera  是否始终朝向摄像机，即公告牌模式。默认为true
+ * @param keepZOnFaceToCamera 是否保持Z轴垂直于地面
+ * @param visibilities  全景图pid与可见性对应关系的数组
+ * 其中如果有某个元素的pid为-1，表示其对应的visible属性会应用到所有未特别设置的全景点上
+ * @param positions  全景图pid与位置对应关系的数组
+ * 其中如果有某个元素的pid为-1，表示其对应的position属性会应用到所有未特别设置的全景点上
+ */
+interface Placeable2DViewConfiguration {
+    targetView: View;
+    visibilities?: {
+        pid: number;
+        visible: boolean;
+    }[];
+    positions?: {
+        pid: number;
+        position: NS_THREE.Vector3;
+    }[];
+    faceToCamera?: boolean;
+    keepZOnFaceToCamera?: boolean;
+    showMesh?: boolean;
+    showDom?: boolean;
+    visibleScope?: number;
+}
+interface Placeable2DViewConfigurationInternal {
+    targetView: View;
+    visibilities?: Map<number, boolean>;
+    positions?: Map<number, NS_THREE.Vector3>;
+    faceToCamera?: boolean;
+    keepZOnFaceToCamera?: boolean;
+    showMesh?: boolean;
+    showDom?: boolean;
+    visibleScope?: number;
+}
+/**
+ * 2D贴图对象
+ * @noInheritDoc
+ */
+declare class Placeable2D extends Element {
+    private initialized;
+    private needUpdate;
+    private material;
+    private uniforms;
+    private labelMesh;
+    private gif;
+    private gifLabelMesh;
+    private currentDisplayTime;
+    private frameIndex;
+    private gifMaterial;
+    private frames;
+    private tileDispDuration;
+    private gifCanvas;
+    private gifContext;
+    private giftexture;
+    private width;
+    private height;
+    labelID: number;
+    viewConfigurations: Map<View, Placeable2DViewConfigurationInternal>;
+    private eventListeners;
+    private currentPID;
+    private isEditingInView;
+    private movedToNewPanorama;
+    private cssObject;
+    private imgElement;
+    private outOfRange;
+    private currentPanoramaPosition;
+    isDomElement: boolean;
+    private hidden;
+    private depthTest;
+    /**
+     * 注意：最好在[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: number, url: string, options?: {
+        width?: number;
+        height?: number;
+        depthTest?: boolean;
+    });
+    load(url: string): Promise<void>;
+    private drawCanvas;
+    update(): ElementFrameContext;
+    dispose(): void;
+    /**
+     * 设置在指定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: Placeable2DViewConfiguration): void;
+    /**
+     * 设置当前标签是否处于编辑模式
+     * @param editingMode 是否设置为编辑模式
+     */
+    setEditingMode(targetView: View, editingMode: boolean): void;
+    isEditing(targetView: View): boolean;
+    /**
+     * 设置标签尺寸
+     * @param width 宽度
+     * @param height 高度
+     */
+    setSize(width: number, height: number): void;
+    /**
+       * 查询当前设置的标签尺寸
+       * @returns number数组，依次是width, height
+       */
+    getSize(): number[];
+    /**
+     * 设置imgElement Css
+     * @param cssText string
+     * @param width 宽
+     * @param height 高
+     */
+    setDomCSS(width: number, height: number, cssText?: string): void;
+    getViewConfigurationByPanoramaId(view: View, pid: number): {
+        visible: boolean;
+        position: NS_THREE.Vector3;
+    };
+    updateViewConfigurationByPanoramaId(view: View, pid: number, { visible, position }: {
+        visible?: boolean;
+        position?: NS_THREE.Vector3;
+    }): void;
+    /**
+     * 手动更新Placeable2D当前所在全景点位
+     * @param pid 点位id
+     * @param position 全景点位坐标
+     */
+    updateCurrentBindingPanorama(pid: number, position: NS_THREE.Vector3): void;
+    /**
+     * 将Placeable2D设置为不可见
+     */
+    setHidden(hidden: boolean): void;
+}
+export { Placeable2D, Placeable2DViewConfiguration };