@aibee/owlly 1.0.26 → 1.0.29

package/lib/owlly/element/bottom-nav-element.d.ts

@@ -0,0 +1,65 @@
+import { NS_THREE } from '../stage/externals';
+import { Element, ElementFrameContext } from './element';
+declare class BottomNavElement extends Element {
+    torus: NS_THREE.Mesh;
+    centerArrowMesh: NS_THREE.Mesh;
+    textMeshMap: Map<string, {
+        mesh: NS_THREE.Mesh;
+        textWidth: number;
+        spacing: number;
+        spacingLeft: number;
+    }>;
+    private leftMeshGroup;
+    private centerMeshGroup;
+    private rightMeshGroup;
+    private textMeshGroup;
+    private textValuePre;
+    private enabled;
+    private initialized;
+    private needUpdate;
+    private viewWidth;
+    private viewHeight;
+    private bottomWidth;
+    private bottomRadius;
+    private directionPre;
+    private r;
+    private h;
+    private isStop;
+    private angle;
+    private text;
+    private direction;
+    private maxLeftAngle;
+    private maxRightAngle;
+    constructor(option: {
+        centerArrowMesh: NS_THREE.Mesh;
+        textMeshMap?: Map<string, {
+            mesh: NS_THREE.Mesh;
+            textWidth: number;
+            spacing: number;
+            spacingLeft: number;
+        }>;
+        maxLeftAngle?: number;
+        maxRightAngle?: number;
+        bottomWidth: number;
+        bottomRadius: number;
+    });
+    private createBottomNav;
+    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;
+    setOpacity(opacity: number): void;
+    /**
+     * 设置是否更新
+     * @param value 开关值
+     */
+    setEnabled(value: boolean): void;
+    play(): void;
+    resize(width: number, height: number): void;
+    update(): ElementFrameContext;
+    dispose(): void;
+}
+export { BottomNavElement };

package/lib/owlly/element/bottom-nav-element.js

@@ -0,0 +1,257 @@
+import { NS_THREE } from '../stage/externals';
+import { Element, ElementFrameContext } from './element';
+class BottomNavElement extends Element {
+    constructor(option) {
+        super();
+        const { centerArrowMesh, 
+        // textArrowMesh,
+        textMeshMap, maxLeftAngle, maxRightAngle, bottomWidth, bottomRadius, } = option;
+        // this.textArrowMesh = textArrowMesh!;
+        // this.textArrowMesh.visible = false;
+        // this.torus.add(this.textArrowMesh);
+        this.enabled = true;
+        this.bottomWidth = bottomWidth;
+        this.bottomRadius = bottomRadius;
+        this.textMeshMap = textMeshMap;
+        this.textValuePre = 0;
+        this.maxLeftAngle = maxLeftAngle || 0;
+        this.maxRightAngle = maxRightAngle || 0;
+        this.centerArrowMesh = centerArrowMesh.clone();
+        this.createBottomNav();
+        this.setRing(0, '定位中', 'center');
+        this.initialized = false;
+        this.needUpdate = true;
+        this.directionPre = 'center';
+    }
+    ;
+    ;
+    createBottomNav() {
+        const material = new NS_THREE.MeshBasicMaterial({
+            color: 0xffffff,
+            wireframe: false,
+            transparent: true,
+            blending: NS_THREE.CustomBlending,
+            blendSrc: NS_THREE.OneFactor,
+        });
+        material.needsUpdate = true;
+        material.visible = true;
+        material.opacity = 1;
+        const h = this.bottomWidth;
+        const r = this.bottomRadius;
+        const count = 128;
+        const points = [];
+        for (let i = 0; i < count; i++) {
+            const x = r * Math.sin(Math.PI * 2 * i / count);
+            const y = r * Math.cos(Math.PI * 2 * i / count);
+            if (i > count / 2) {
+                points.push(new NS_THREE.Vector2(x - h / 2, y));
+            }
+            else {
+                points.push(new NS_THREE.Vector2(x + h / 2, y));
+            }
+        }
+        const heartShape = new NS_THREE.Shape(points);
+        const geometry = new NS_THREE.ShapeGeometry(heartShape);
+        this.torus = new NS_THREE.Mesh(geometry, material);
+        this.torus.position.set(0, 0, 1);
+        this.torus.lookAt(0, 0, 1);
+        this.add(this.torus);
+    }
+    // 控制圆盘的偏移以及文字显示
+    updateText(angle, value) {
+        if (this.leftMeshGroup)
+            this.leftMeshGroup.visible = false;
+        // if (this.centerMeshGroup) this.centerMeshGroup.visible = false;
+        if (this.rightMeshGroup)
+            this.rightMeshGroup.visible = false;
+        // if (this.textArrowMesh) this.textArrowMesh.visible = false;
+        // 分别处理左、右、中
+        const valueText = [];
+        valueText.push(...value.toString());
+        // 判断是否更新文字
+        let textUpdate = false;
+        if (this.textValuePre !== value) {
+            textUpdate = true;
+        }
+        if (this.directionPre !== this.direction) {
+            textUpdate = true;
+        }
+        this.textValuePre = value;
+        this.directionPre = this.direction;
+        if (this.direction === 'left') {
+            // debugger;
+            // 定位在左侧
+            if (textUpdate) {
+                if (this.textMeshGroup)
+                    this.torus.remove(this.textMeshGroup);
+                this.textMeshGroup = this.renderText(valueText, 0);
+                this.textMeshGroup.position.set(-this.textMeshGroup.groupOffsetAngle / 2, 0, 0);
+                this.torus.add(this.textMeshGroup);
+            }
+        }
+        else if (this.direction === 'right') {
+            // debugger;
+            // // 定位在右侧
+            if (textUpdate) {
+                if (this.textMeshGroup)
+                    this.torus.remove(this.textMeshGroup);
+                this.textMeshGroup = this.renderText(valueText, 0);
+                this.textMeshGroup.position.set(-this.textMeshGroup.groupOffsetAngle / 2, 0, 0);
+                this.torus.add(this.textMeshGroup);
+            }
+        }
+        else if (this.direction === 'center') {
+            // debugger;
+            if (!this.centerMeshGroup) {
+                // 文字
+                this.centerMeshGroup = this.centerArrowMesh;
+                this.centerMeshGroup.position.set(0, this.bottomRadius + 11, 3);
+                this.torus.add(this.centerMeshGroup);
+                // 对正
+                // this.centerMeshGroup.rotateZ(this.centerMeshGroup.groupOffsetAngle / 2);
+            }
+            this.centerMeshGroup.visible = true;
+            if (textUpdate) {
+                if (this.textMeshGroup)
+                    this.torus.remove(this.textMeshGroup);
+                this.textMeshGroup = this.renderText(valueText, 0);
+                this.textMeshGroup.position.set(-this.textMeshGroup.groupOffsetAngle / 2, 0, 0);
+                this.torus.add(this.textMeshGroup);
+            }
+        }
+        else if (this.direction === 'stop') {
+            if (textUpdate) {
+                if (this.textMeshGroup)
+                    this.torus.remove(this.textMeshGroup);
+                this.textMeshGroup = this.renderText(valueText, 0);
+                this.textMeshGroup.position.set(-this.textMeshGroup.groupOffsetAngle / 2, 0, 0);
+                this.torus.add(this.textMeshGroup);
+            }
+        }
+    }
+    // 绘制文字
+    renderText(values, angle = 0, reverse = false) {
+        const textList = reverse ? values.reverse() : values;
+        // 弧度累计
+        let groupOffsetAngle = 0;
+        if (reverse) {
+            groupOffsetAngle = -angle;
+        }
+        else {
+            groupOffsetAngle = angle;
+        }
+        // debugger;
+        const textMeshGroup = new NS_THREE.Group();
+        let firstAngle = 0;
+        let lastAngle = 0;
+        textList.forEach((item, index) => {
+            const textMeshData = this.textMeshMap.get(item);
+            if (!textMeshData)
+                return;
+            const textMesh = textMeshData.mesh.clone();
+            // textMesh.material.visible = true;
+            // 文字自身宽度
+            const radian = textMeshData.textWidth;
+            if (index === 0)
+                firstAngle = radian;
+            if (index === textList.length - 1)
+                lastAngle = radian;
+            groupOffsetAngle += radian / 2;
+            // 左间距
+            if (textMeshData.spacingLeft) {
+                const rad = textMeshData.spacingLeft / 2;
+                groupOffsetAngle += rad;
+            }
+            // 定位
+            textMesh.position.set(groupOffsetAngle, 0, 15);
+            // 横向偏移量累加
+            if (reverse) {
+                groupOffsetAngle -= radian / 2;
+            }
+            else {
+                groupOffsetAngle += radian / 2;
+            }
+            // 右间距
+            if (textMeshData.spacing) {
+                const rad = textMeshData.spacing;
+                if (reverse) {
+                    groupOffsetAngle -= rad;
+                }
+                else {
+                    groupOffsetAngle += rad;
+                }
+            }
+            textMeshGroup.add(textMesh);
+        });
+        // 文字整体弧度
+        textMeshGroup.groupOffsetAngle = Math.abs(groupOffsetAngle);
+        textMeshGroup.lastAngle = lastAngle;
+        textMeshGroup.firstAngle = firstAngle;
+        return textMeshGroup;
+    }
+    setDirection(direction) {
+        this.direction = direction;
+    }
+    setAngle(angle) {
+        this.angle = angle;
+    }
+    setText(text) {
+        this.text = text;
+    }
+    setRing(angle, text, direction = 'center') {
+        this.setAngle(angle);
+        this.setText(text);
+        this.setDirection(direction);
+    }
+    setToursPosition(x, y, z) {
+        this.torus.position.set(x, y, z);
+    }
+    setOpacity(opacity) {
+        this.torus.traverse((o) => {
+            const mesh = o;
+            if (mesh.isMesh && !Array.isArray(mesh.material)) {
+                mesh.material.blending = NS_THREE.CustomBlending;
+                mesh.material.blendSrc = NS_THREE.SrcAlphaFactor;
+                mesh.material.transparent = true;
+                mesh.material.opacity = opacity;
+            }
+        });
+    }
+    /**
+     * 设置是否更新
+     * @param value 开关值
+     */
+    setEnabled(value) {
+        this.enabled = value;
+    }
+    play() {
+        this.isStop = false;
+    }
+    /*
+     暂停时隐藏箭头，角度锁定为0
+    */
+    resize(width, height) {
+        if (this.viewWidth === width && this.viewHeight === height)
+            return;
+        this.viewWidth = width;
+        this.viewHeight = height;
+    }
+    update() {
+        const frameContext = new ElementFrameContext(this);
+        frameContext.needUpdate = this.needUpdate;
+        // 添加圆盘
+        if (!this.initialized && this.torus) {
+            frameContext.shouldPlaceElement = true;
+            this.initialized = true;
+        }
+        if (this.enabled) {
+            this.updateText(-this.angle, this.text);
+        }
+        return frameContext;
+    }
+    dispose() {
+        this.torus.remove();
+        this.textMeshMap.clear();
+    }
+}
+export { BottomNavElement };

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

@@ -0,0 +1,82 @@
+import { NS_THREE } from '../stage/externals';
+import { Element, ElementFrameContext } from './element';
+/**
+ * 相机内参
+ */
+interface CameraIntrinsic {
+    /** Field Of View */
+    fov: NS_THREE.Vector2;
+    /** 分辨率 */
+    resolution: NS_THREE.Vector2;
+    /** 焦距 */
+    f: NS_THREE.Vector2;
+    /** 中心偏移 */
+    c: NS_THREE.Vector2;
+}
+/**
+ * 相机元素
+ * @noInheritDoc
+ */
+declare class Camera extends Element {
+    private initialized;
+    private camera;
+    private yaw;
+    private pitch;
+    private lookAtPoint;
+    intrinsic: CameraIntrinsic;
+    private helpers;
+    private cameraHelper;
+    private updateLookAtThisFrame;
+    private eventListeners;
+    private visibleScope;
+    /** 可碰撞元素 */
+    intersectables: NS_THREE.Object3D[];
+    readonly isCamera: true;
+    constructor(yaw?: number, pitch?: number, visibleScope?: number);
+    load(yaw?: number, pitch?: number, visibleScope?: number): void;
+    dispose(): void;
+    private updatePitchYawFromLookVector;
+    private onRotationChange;
+    private onQuaternionChange;
+    /** @ignore */
+    update(): ElementFrameContext;
+    /** @ignore */
+    getThreeCamera(): NS_THREE.PerspectiveCamera;
+    /**
+     * 获取相机内参
+     * @returns 相机内参
+     */
+    getIntrinsic(): CameraIntrinsic;
+    /** 获取偏航角 */
+    getYaw(): number;
+    /** 获取俯仰角 */
+    getPitch(): number;
+    /** 获取相机Field Of View */
+    getFov(): number;
+    /** 获取相机图像比例 */
+    getAspect(): number;
+    /** 获取相机姿态四元数 */
+    getQuaternion(): NS_THREE.Quaternion;
+    /**
+     * 设定偏航角
+     * @param yaw 偏航角
+     */
+    setYaw(yaw: number): void;
+    /**
+     * 设定俯仰角
+     * @param pitch 俯仰角
+     */
+    setPitch(pitch: number): void;
+    /** @ignore */
+    setCameraHelperVisible(value: boolean, render?: boolean): void;
+    /** @ignore */
+    lookAt(vector: number | NS_THREE.Vector3, y?: number, z?: number, updatePitchYaw?: boolean): void;
+    /** @ignore */
+    updateLookAt(): void;
+    get quaternion(): NS_THREE.Quaternion;
+    getViewingFrustumMesh(): {
+        vertices: NS_THREE.Vector3[];
+        triangles: number[];
+    };
+}
+export { Camera, CameraIntrinsic };

package/lib/owlly/element/camera.js

@@ -0,0 +1,283 @@
+import { Externals, NS_THREE } from '../stage/externals';
+import { Element, ElementFrameContext } from './element';
+import { Camera as CameraUtils } from '../utils/camera';
+import { EventHub } from '../utils/event-hub';
+import { BasicTools } from '../utils/basic-tools';
+import { OwllyEvents } from '../utils/events';
+import { GeometryUtils } from '../utils/geometry-utils';
+/**
+ * @ignore
+ */
+class CameraPosition extends NS_THREE.Vector3 {
+    constructor(x, y, z, callback) {
+        super(x, y, z);
+        if (callback)
+            this.callback = callback;
+    }
+    set(x, y, z) {
+        super.set(x, y, z);
+        if (this.callback)
+            this.callback();
+        return this;
+    }
+}
+/** @ignore */
+class CameraHelper extends NS_THREE.CameraHelper {
+    constructor(camera) {
+        super(camera);
+        const { THREE } = Externals.getInstance();
+        const elements = camera.matrixWorld.elements.slice();
+        elements[12] = 0;
+        elements[13] = 0;
+        elements[14] = 0;
+        this.matrix = new THREE.Matrix4().fromArray(elements);
+    }
+    update() {
+        const elements = this.camera.matrixWorld.elements.slice();
+        elements[12] = 0;
+        elements[13] = 0;
+        elements[14] = 0;
+        this.matrix.fromArray(elements);
+        super.update();
+    }
+}
+/**
+ * 相机元素
+ * @noInheritDoc
+ */
+class Camera extends Element {
+    constructor(yaw = 0, pitch = -10, visibleScope = 20) {
+        super();
+        const { THREE } = Externals.getInstance();
+        this.initialized = false;
+        this.camera = new THREE.PerspectiveCamera();
+        this.lookAtPoint = new THREE.Vector3();
+        this.helpers = new THREE.Group();
+        // TODO(jyfang): make intrinsic dynamic
+        this.intrinsic = {
+            resolution: new THREE.Vector2(2560, 1440),
+            fov: new THREE.Vector2(48.1, 28.2),
+            f: new THREE.Vector2(2782.6289319729026, 2775.8932388798476),
+            c: new THREE.Vector2(1300.2770029742769, 729.80388257009895),
+        };
+        this.intersectables = [];
+        this.renderOrder = 250;
+        this.load(yaw, pitch, visibleScope);
+        // Override position, rotation, quaternion settings
+        Object.defineProperty(this, 'position', {
+            value: new CameraPosition(this.position.x, this.position.y, this.position.z, () => { this.updateLookAtThisFrame = true; }),
+            enumerable: true,
+            configurable: true,
+        });
+        /* eslint-disable no-underscore-dangle */
+        this.rotation._onChange(() => { this.onRotationChange(); });
+        this.quaternion._onChange(() => { this.onQuaternionChange(); });
+        /* eslint-enable no-underscore-dangle */
+        this.eventListeners = {
+            onCameraSelected: (camera) => {
+                this.cameraHelper.visible = camera === this;
+                this.updateLookAtThisFrame = true;
+            },
+        };
+        EventHub.on(OwllyEvents.ELEMENT_SELECTED, this.eventListeners.onCameraSelected);
+    }
+    load(yaw = 0, pitch = -10, visibleScope = 20) {
+        this.yaw = yaw;
+        this.pitch = pitch;
+        this.visibleScope = visibleScope;
+        this.camera.fov = this.intrinsic.fov.y;
+        this.camera.aspect = this.intrinsic.fov.x / this.intrinsic.fov.y;
+        this.camera.near = 0.1;
+        this.camera.far = 200;
+        this.camera.up.set(0, 0, 1);
+        this.up.set(0, 0, 1);
+        if (this.helpers) {
+            const { children } = this.helpers;
+            this.helpers.remove(...children);
+            children.forEach((c) => { BasicTools.dispose(c, true); });
+            this.intersectables = [];
+        }
+        const { THREE } = Externals.getInstance();
+        this.cameraHelper = new CameraHelper(this.camera);
+        const cameraCube = new THREE.Mesh(new THREE.BoxGeometry(0.2, 0.2, 0.2), new THREE.MeshLambertMaterial({
+            color: 0x0000ff,
+            emissive: 0x072534,
+            depthWrite: true,
+            depthTest: true,
+        }));
+        this.helpers.add(cameraCube);
+        this.add(this.camera);
+        this.add(this.helpers);
+        this.add(this.cameraHelper);
+        this.camera.renderOrder = 250;
+        this.helpers.renderOrder = 250;
+        this.cameraHelper.renderOrder = 250;
+        this.camera.far = this.visibleScope;
+        this.camera.updateProjectionMatrix();
+        this.cameraHelper.update();
+        this.camera.far = 200;
+        this.camera.updateProjectionMatrix();
+        this.cameraHelper.visible = false;
+        this.intersectables.push(cameraCube);
+        this.initialized = true;
+        this.updateLookAtThisFrame = true;
+    }
+    dispose() {
+        super.dispose();
+        this.remove(this.camera);
+        this.remove(this.helpers);
+        this.remove(this.cameraHelper);
+        BasicTools.dispose(this.helpers, true);
+        BasicTools.dispose(this.cameraHelper, true);
+        EventHub.off(OwllyEvents.ELEMENT_SELECTED, this.eventListeners.onCameraSelected);
+    }
+    updatePitchYawFromLookVector(v) {
+        const { yaw, pitch } = CameraUtils.getYawPitchFromCameraLookVector(v);
+        this.pitch = pitch;
+        this.yaw = yaw;
+    }
+    onRotationChange() {
+        const rotation = this.rotation.clone();
+        const { THREE } = Externals.getInstance();
+        this.rotation
+            .setFromQuaternion(new THREE.Quaternion(0, 0, 0, 1), undefined, false);
+        this.camera.rotation.copy(rotation);
+        this.helpers.rotation.copy(rotation);
+        this.camera.updateProjectionMatrix();
+        const lookAtVector = this.camera.getWorldDirection(new THREE.Vector3(0, 0, -1));
+        this.updatePitchYawFromLookVector(lookAtVector);
+        this.updateLookAtThisFrame = true;
+    }
+    onQuaternionChange() {
+        const quaternion = this.quaternion.clone();
+        const { THREE } = Externals.getInstance();
+        this.quaternion
+            .setFromEuler(new THREE.Euler(0, 0, 0), false);
+        this.camera.quaternion.copy(quaternion);
+        this.helpers.quaternion.copy(quaternion);
+        this.camera.updateProjectionMatrix();
+        const lookAtVector = this.camera.getWorldDirection(new THREE.Vector3(0, 0, -1));
+        this.updatePitchYawFromLookVector(lookAtVector);
+        this.updateLookAtThisFrame = true;
+    }
+    /** @ignore */
+    update() {
+        const frameContext = new ElementFrameContext(this);
+        if (this.initialized && !this.parent) {
+            frameContext.shouldPlaceElement = true;
+            frameContext.needUpdate = true;
+        }
+        if (this.updateLookAtThisFrame) {
+            this.lookAtPoint = CameraUtils.getCameraLookAtPositionByYawPitch(this.position.clone(), this.yaw, this.pitch).position;
+            this.lookAt(this.lookAtPoint, 0, 0, false);
+            frameContext.needUpdate = true;
+            this.updateLookAtThisFrame = false;
+        }
+        return frameContext;
+    }
+    /** @ignore */
+    getThreeCamera() {
+        return this.camera;
+    }
+    /**
+     * 获取相机内参
+     * @returns 相机内参
+     */
+    getIntrinsic() {
+        return this.intrinsic;
+    }
+    /** 获取偏航角 */
+    getYaw() {
+        return this.yaw;
+    }
+    /** 获取俯仰角 */
+    getPitch() {
+        return this.pitch;
+    }
+    /** 获取相机Field Of View */
+    getFov() {
+        return this.camera.fov;
+    }
+    /** 获取相机图像比例 */
+    getAspect() {
+        return this.camera.aspect;
+    }
+    /** 获取相机姿态四元数 */
+    getQuaternion() {
+        return this.camera.quaternion.clone();
+    }
+    /**
+     * 设定偏航角
+     * @param yaw 偏航角
+     */
+    setYaw(yaw) {
+        this.yaw = yaw;
+        this.updateLookAtThisFrame = true;
+    }
+    /**
+     * 设定俯仰角
+     * @param pitch 俯仰角
+     */
+    setPitch(pitch) {
+        this.pitch = pitch;
+        this.updateLookAtThisFrame = true;
+    }
+    /** @ignore */
+    setCameraHelperVisible(value, render) {
+        this.cameraHelper.visible = value;
+        this.updateLookAtThisFrame = !!render;
+    }
+    /** @ignore */
+    lookAt(vector, y, z, updatePitchYaw = true) {
+        const { THREE } = Externals.getInstance();
+        if (updatePitchYaw) {
+            let v;
+            if (vector instanceof THREE.Vector3) {
+                v = this.position.clone().add(vector.clone().multiplyScalar(-1)).normalize();
+            }
+            else {
+                v = this.position.clone().add(new THREE.Vector3(vector, y, z).multiplyScalar(-1)).normalize();
+            }
+            this.updatePitchYawFromLookVector(v);
+        }
+        this.helpers.lookAt(vector, y, z);
+        this.camera.lookAt(vector, y, z);
+        this.camera.updateProjectionMatrix();
+        if (this.cameraHelper) {
+            this.camera.far = this.visibleScope;
+            this.camera.updateProjectionMatrix();
+            this.cameraHelper.update();
+            this.camera.far = 200;
+            this.camera.updateProjectionMatrix();
+        }
+    }
+    /** @ignore */
+    updateLookAt() {
+        this.updateLookAtThisFrame = true;
+    }
+    get quaternion() {
+        return this.camera.quaternion.clone();
+    }
+    getViewingFrustumMesh() {
+        this.updateLookAt();
+        this.update();
+        this.camera.far = this.visibleScope;
+        this.camera.updateProjectionMatrix();
+        this.cameraHelper.update();
+        const cam = this.camera;
+        const eye = this.position.clone();
+        const { THREE } = Externals.getInstance();
+        const target = new THREE.Vector3(0, 0, -1).multiplyScalar(this.visibleScope)
+            .applyMatrix4(cam.matrixWorld);
+        const up = new THREE.Vector3(0, 0, 1);
+        const fovYDegrees = cam.fov;
+        const aspectRatio = cam.aspect;
+        const { near, far } = cam;
+        // console.info(`## eye, target, fovY=${fovYDegrees}, aspect=${aspectRatio}, near=${near}, far=${far}`, eye, target);
+        const frustumMesh = GeometryUtils.FrustumMesh(eye, target, up, fovYDegrees, aspectRatio, near, far);
+        this.camera.far = 200;
+        this.camera.updateProjectionMatrix();
+        return frustumMesh;
+    }
+}
+export { Camera };