@aibee/owlly 1.0.25 → 1.0.29

package/lib/owlly/element/polygon-mesh.js

@@ -0,0 +1,307 @@
+import earcut from 'earcut';
+import { Externals } from '../stage/externals';
+import { Element, ElementFrameContext } from './element';
+import { BasicTools } from '../utils/basic-tools';
+import { PathCommand } from './map-kit/shape';
+class PolygonMesh extends Element {
+    /**
+     * 生成三角化多边形网格
+     * 通过一个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, zShape, optionalParams) {
+        super();
+        const { THREE } = Externals.getInstance();
+        this.shape = shape;
+        this.zShape = zShape;
+        this.group = new THREE.Group();
+        this.add(this.group);
+        const shapeData = shape.getData();
+        const options = optionalParams || {};
+        const material = options.material || new THREE.MeshBasicMaterial({
+            color: shape.getData().fill || 0xffff00,
+            transparent: shapeData.opacity !== 1.0,
+            opacity: shapeData.opacity || 1.0,
+            side: THREE.DoubleSide,
+            depthWrite: false,
+        });
+        this.vertices = [];
+        const vertices2D = [];
+        const holes = [];
+        const pathSteps = shape.getSteps();
+        const zPathSteps = zShape.getSteps();
+        pathSteps.forEach((pathStep, index) => {
+            if (index > 0 && pathStep.command === PathCommand.MOVE) {
+                holes.push(index);
+            }
+            const coord = pathStep.coords[0];
+            const zCoord = zPathSteps[index].coords[0];
+            this.vertices.push(coord[0], coord[1], zCoord[0]);
+            vertices2D.push(...coord);
+        });
+        const shapeType = shape.getShapeType();
+        if (shapeType === 'shape') {
+            const vertexBuffer = new Float32Array(this.vertices);
+            const bufferGeometry = new THREE.BufferGeometry();
+            bufferGeometry.setAttribute('position', new THREE.BufferAttribute(vertexBuffer, 3));
+            const indices = earcut(vertices2D, holes, 2);
+            bufferGeometry.setIndex(indices);
+            const mesh = new THREE.Mesh(bufferGeometry, material);
+            mesh.renderOrder = shapeData.zIndex || 1000;
+            this.group.add(mesh);
+        }
+        else if (shapeType === 'line') {
+            const oneSideVertexCount = vertices2D.length / 2;
+            pathSteps.forEach((pathStep, index) => {
+                const coord = pathStep.coords[0];
+                const zCoord = zPathSteps[index].coords[0];
+                this.vertices.push(coord[0], coord[1], zCoord[1]);
+            });
+            const vertexBuffer = new Float32Array(this.vertices);
+            let endIndices;
+            if (holes) {
+                endIndices = holes.concat([oneSideVertexCount]);
+            }
+            else {
+                endIndices = [oneSideVertexCount];
+            }
+            let startIndex = 0;
+            endIndices.forEach((endIndex) => {
+                const bufferGeometry = new THREE.BufferGeometry();
+                bufferGeometry.setAttribute('position', new THREE.BufferAttribute(vertexBuffer, 3));
+                const indices = [];
+                for (let i = startIndex; i < endIndex - 1; i += 1) {
+                    indices.push(i, i + oneSideVertexCount, i + 1, i + 1, i + oneSideVertexCount, i + oneSideVertexCount + 1);
+                }
+                startIndex = endIndex;
+                bufferGeometry.setIndex(indices);
+                const mesh = new THREE.Mesh(bufferGeometry, material);
+                mesh.renderOrder = shapeData.zIndex || 1000;
+                this.group.add(mesh);
+            });
+        }
+        if (shapeData.x !== undefined && shapeData.y !== undefined) {
+            this.group.position.set(shapeData.x, shapeData.y, shapeData.height || 0.0);
+        }
+        if (shapeData.rotation !== undefined) {
+            this.group.quaternion.set(...shapeData.rotation);
+        }
+        if (shapeData.scale !== undefined) {
+            this.group.scale.set(...shapeData.scale);
+        }
+        this.initialized = false;
+        this.loaded = true;
+        this.verticesInvalidated = false;
+    }
+    updateGeometries() {
+        const { THREE } = Externals.getInstance();
+        const vertexBuffer = new Float32Array(this.vertices);
+        this.group.children.forEach((child) => {
+            const mesh = child;
+            const bufferGeometry = mesh.geometry;
+            bufferGeometry.setAttribute('position', new THREE.BufferAttribute(vertexBuffer, 3));
+        });
+    }
+    updateMaterials(material) {
+        this.group.children.forEach((child) => {
+            const mesh = child;
+            mesh.material = material;
+        });
+    }
+    /**
+     * 以当前Shape成员更新Mesh
+     */
+    applyShapes(shape, zShape) {
+        const { THREE } = Externals.getInstance();
+        if (shape)
+            this.shape = shape;
+        if (zShape)
+            this.zShape = zShape;
+        this.vertices = [];
+        const pathSteps = this.shape.getSteps();
+        const zPathSteps = this.zShape.getSteps();
+        pathSteps.forEach((pathStep, index) => {
+            const coord = pathStep.coords[0];
+            const zCoord = zPathSteps[index].coords[0];
+            this.vertices.push(coord[0], coord[1], zCoord[0]);
+        });
+        if (this.shape.getShapeType() === 'line') {
+            pathSteps.forEach((pathStep, index) => {
+                const coord = pathStep.coords[0];
+                const zCoord = zPathSteps[index].coords[0];
+                this.vertices.push(coord[0], coord[1], zCoord[1]);
+            });
+        }
+        this.updateGeometries();
+        const material = new THREE.MeshBasicMaterial({
+            color: this.shape.getData().fill || 0xffff00,
+            transparent: this.shape.getData().opacity !== 1.0,
+            opacity: this.shape.getData().opacity || 1.0,
+            side: THREE.DoubleSide,
+            depthWrite: false,
+        });
+        this.updateMaterials(material);
+    }
+    setColor(color, opacity) {
+        const { THREE } = Externals.getInstance();
+        const material = new THREE.MeshBasicMaterial({
+            color,
+            transparent: opacity !== 1.0,
+            opacity: opacity || this.shape.getData().opacity,
+            side: THREE.DoubleSide,
+            depthWrite: false,
+        });
+        this.updateMaterials(material);
+    }
+    /**
+     * 把当前顶点数组同步到Mesh的Geometry以及Shape成员的PathSteps中
+     */
+    applyVertices() {
+        const pathSteps = this.shape.getSteps();
+        const zPathSteps = this.zShape.getSteps();
+        let pathStepIndex = 0;
+        if (this.shape.getShapeType() === 'line') {
+            for (let i = 0; i < this.vertices.length / 2; i += 3) {
+                const coord = pathSteps[pathStepIndex].coords[0];
+                coord[0] = this.vertices[i];
+                coord[1] = this.vertices[i + 1];
+                const zCoord = zPathSteps[pathStepIndex].coords[0];
+                zCoord[0] = this.vertices[i + 2];
+                pathStepIndex += 1;
+            }
+            pathStepIndex = 0;
+            for (let i = this.vertices.length / 2; i < this.vertices.length; i += 3) {
+                const coord = pathSteps[pathStepIndex].coords[0];
+                coord[0] = this.vertices[i];
+                coord[1] = this.vertices[i + 1];
+                const zCoord = zPathSteps[pathStepIndex].coords[0];
+                zCoord[1] = this.vertices[i + 2];
+                pathStepIndex += 1;
+            }
+        }
+        else {
+            for (let i = 0; i < this.vertices.length; i += 3) {
+                const zCoord = zPathSteps[pathStepIndex].coords[0];
+                zCoord[0] = this.vertices[i + 2];
+                pathStepIndex += 1;
+            }
+        }
+        this.updateGeometries();
+        this.verticesInvalidated = false;
+    }
+    /**
+     * 设置单个已有顶点的位置
+     * @param index 顶点序号
+     * @param position 三维坐标
+     * @returns 若顶点序号越界，则返回false
+     */
+    setVertex(index, position) {
+        if (index < 0 || index >= this.vertices.length / 3) {
+            return false;
+        }
+        this.group.updateMatrixWorld();
+        const matrix = this.group.matrixWorld.clone().invert();
+        const newPosition = position.clone().applyMatrix4(matrix);
+        this.vertices[3 * index] = newPosition.x;
+        this.vertices[3 * index + 1] = newPosition.y;
+        this.vertices[3 * index + 2] = newPosition.z;
+        this.verticesInvalidated = true;
+        return true;
+    }
+    /**
+     * 获得从顶点序号到顶点位置的映射Map
+     */
+    getVertexMap() {
+        const { THREE } = Externals.getInstance();
+        this.group.updateMatrixWorld();
+        const matrix = this.group.matrixWorld;
+        const ret = new Map();
+        for (let i = this.vertices.length / 3 - 1; i >= 0; --i) {
+            const position = new THREE.Vector3(this.vertices[3 * i], this.vertices[3 * i + 1], this.vertices[3 * i + 2]);
+            ret.set(i, position.applyMatrix4(matrix));
+        }
+        return ret;
+    }
+    /**
+     * 得到当前用以描述顶面/线的Shape对象
+     */
+    getShape() { return this.shape; }
+    /**
+     * 得到当前用以描述侧面的Shape对象
+     */
+    getZShape() { return this.zShape; }
+    update() {
+        const frameContext = new ElementFrameContext(this);
+        if (!this.initialized && this.loaded) {
+            this.initialized = true;
+            frameContext.needUpdate = true;
+        }
+        else if (this.verticesInvalidated) {
+            this.applyVertices();
+            frameContext.needUpdate = true;
+        }
+        if (this.initialized && !this.parent) {
+            frameContext.shouldPlaceElement = true;
+        }
+        return frameContext;
+    }
+    dispose() {
+        super.dispose();
+        BasicTools.dispose(this, true);
+    }
+}
+export { PolygonMesh };

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

@@ -0,0 +1,79 @@
+import { NS_THREE } from '../stage/externals';
+import { Element, ElementFrameContext } from './element';
+declare class RingElement extends Element {
+    torus: NS_THREE.Mesh;
+    downArrow: NS_THREE.Mesh;
+    textArrowMesh: NS_THREE.Mesh;
+    tubeMesh: NS_THREE.Mesh;
+    signMesh: NS_THREE.Mesh;
+    downMesh: NS_THREE.Mesh;
+    tubeRadius: number;
+    textMeshMap: Map<string, {
+        mesh: NS_THREE.Mesh;
+        textWidth: number;
+        spacing: number;
+        spacingLeft: number;
+    }>;
+    private leftMeshGroup;
+    private centerMeshGroup;
+    private rightMeshGroup;
+    private leftTextMeshGroup;
+    private rightTextMeshGroup;
+    private maskCenterMesh;
+    private textValuePre;
+    private initialized;
+    private needUpdate;
+    private viewWidth;
+    private viewHeight;
+    private enabled;
+    private directionPre;
+    private innerRadius;
+    private outerRadius;
+    private showTopArrow;
+    private isStop;
+    private angle;
+    private text;
+    private direction;
+    private navRadius;
+    private maxLeftAngle;
+    private maxRightAngle;
+    constructor(option: {
+        innerRadius: number;
+        outerRadius: number;
+        textArrowMesh?: NS_THREE.Mesh;
+        tubeMesh?: NS_THREE.Mesh;
+        tubeRadius?: number;
+        downMesh?: NS_THREE.Mesh;
+        signMesh?: NS_THREE.Mesh;
+        textMeshMap?: Map<string, {
+            mesh: NS_THREE.Mesh;
+            textWidth: number;
+            spacing: number;
+            spacingLeft: number;
+        }>;
+        maxLeftAngle?: number;
+        maxRightAngle?: number;
+    });
+    private createSign;
+    private createDown;
+    private createMask;
+    updateText(angle: number, value: string | number): void;
+    private renderText;
+    setDirection(direction: string): void;
+    setAngle(angle: number): void;
+    setText(text: string): void;
+    setRing(angle: number, text: string, direction?: string): void;
+    setToursPosition(x: number, y: number, z: number): void;
+    setTopArrowVisible(visible: boolean): void;
+    /**
+     * 设置是否更新
+     * @param value 开关值
+     */
+    setEnabled(value: boolean): void;
+    play(): void;
+    stop(): void;
+    resize(width: number, height: number): void;
+    update(): ElementFrameContext;
+    dispose(): void;
+}
+export { RingElement };