@aibee/owlly 1.0.25

package/src/owlly/element/camera.ts

@@ -0,0 +1,389 @@
+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';
+
+/**
+ * 相机内参
+ */
+interface CameraIntrinsic {
+  /** Field Of View */
+  fov: NS_THREE.Vector2;
+  /** 分辨率 */
+  resolution: NS_THREE.Vector2;
+  /** 焦距 */
+  f: NS_THREE.Vector2;
+  /** 中心偏移 */
+  c: NS_THREE.Vector2;
+}
+
+/**
+ * @ignore
+ */
+class CameraPosition extends NS_THREE.Vector3 {
+  private callback: { (): void } | undefined;
+
+  constructor(x?: number, y?: number, z?: number, callback?: { (): void }) {
+    super(x, y, z);
+    if (callback) this.callback = callback;
+  }
+
+  set(x: number, y: number, z: number): this {
+    super.set(x, y, z);
+    if (this.callback) this.callback();
+    return this;
+  }
+}
+
+/** @ignore */
+class CameraHelper extends NS_THREE.CameraHelper {
+  constructor(camera: NS_THREE.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(): void {
+    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 {
+  private initialized: boolean;
+
+  private camera: NS_THREE.PerspectiveCamera;
+
+  private yaw: number;
+
+  private pitch: number;
+
+  private lookAtPoint: NS_THREE.Vector3;
+
+  intrinsic: CameraIntrinsic;
+
+  private helpers: NS_THREE.Group;
+
+  private cameraHelper: CameraHelper;
+
+  private updateLookAtThisFrame: boolean;
+
+  private eventListeners: {
+    onCameraSelected: Function;
+  };
+
+  private visibleScope: number;
+
+  /** 可碰撞元素 */
+  intersectables: NS_THREE.Object3D[];
+
+  readonly isCamera: true;
+
+  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: Element): void => {
+        this.cameraHelper.visible = camera === this;
+        this.updateLookAtThisFrame = true;
+      },
+    };
+    EventHub.on(OwllyEvents.ELEMENT_SELECTED, this.eventListeners.onCameraSelected);
+  }
+
+  public load(yaw = 0, pitch = -10, visibleScope = 20): void {
+    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,
+        // flatShading: 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;
+  }
+
+  public dispose(): void {
+    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);
+  }
+
+  private updatePitchYawFromLookVector(v: NS_THREE.Vector3): void {
+    const { yaw, pitch } = CameraUtils.getYawPitchFromCameraLookVector(v);
+    this.pitch = pitch;
+    this.yaw = yaw;
+  }
+
+  private onRotationChange(): void {
+    const rotation = this.rotation.clone();
+    const { THREE } = Externals.getInstance();
+    (this.rotation as { setFromQuaternion(q: NS_THREE.Quaternion, order?: string, update?: boolean): unknown })
+      .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;
+  }
+
+  private onQuaternionChange(): void {
+    const quaternion = this.quaternion.clone();
+    const { THREE } = Externals.getInstance();
+    (this.quaternion as { setFromEuler(e: NS_THREE.Euler, update?: boolean): unknown })
+      .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 */
+  public update(): ElementFrameContext {
+    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 */
+  public getThreeCamera(): NS_THREE.PerspectiveCamera {
+    return this.camera;
+  }
+
+  /**
+   * 获取相机内参
+   * @returns 相机内参
+   */
+  public getIntrinsic(): CameraIntrinsic {
+    return this.intrinsic;
+  }
+
+  /** 获取偏航角 */
+  public getYaw(): number {
+    return this.yaw;
+  }
+
+  /** 获取俯仰角 */
+  public getPitch(): number {
+    return this.pitch;
+  }
+
+  /** 获取相机Field Of View */
+  public getFov(): number {
+    return this.camera.fov;
+  }
+
+  /** 获取相机图像比例 */
+  public getAspect(): number {
+    return this.camera.aspect;
+  }
+
+  /** 获取相机姿态四元数 */
+  public getQuaternion(): NS_THREE.Quaternion {
+    return this.camera.quaternion.clone();
+  }
+
+  /**
+   * 设定偏航角
+   * @param yaw 偏航角
+   */
+  public setYaw(yaw: number): void {
+    this.yaw = yaw;
+    this.updateLookAtThisFrame = true;
+  }
+
+  /**
+   * 设定俯仰角
+   * @param pitch 俯仰角
+   */
+  public setPitch(pitch: number): void {
+    this.pitch = pitch;
+    this.updateLookAtThisFrame = true;
+  }
+
+  /** @ignore */
+  public setCameraHelperVisible(value: boolean, render?: boolean): void {
+    this.cameraHelper.visible = value;
+    this.updateLookAtThisFrame = !!render;
+  }
+
+  /** @ignore */
+  public lookAt(
+    vector: number | NS_THREE.Vector3,
+    y?: number,
+    z?: number,
+    updatePitchYaw = true,
+  ): void {
+    const { THREE } = Externals.getInstance();
+    if (updatePitchYaw) {
+      let v: NS_THREE.Vector3;
+      if (vector instanceof THREE.Vector3) {
+        v = this.position.clone().add(
+          (vector as NS_THREE.Vector3).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 */
+  public updateLookAt(): void {
+    this.updateLookAtThisFrame = true;
+  }
+
+  public get quaternion(): NS_THREE.Quaternion {
+    return this.camera.quaternion.clone();
+  }
+
+  public getViewingFrustumMesh(): { vertices: NS_THREE.Vector3[]; triangles: number[] } {
+    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, CameraIntrinsic };

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

@@ -0,0 +1,88 @@
+import { CSS2DObject } from '../../external/renderers/css-2d-renderer';
+import { Element, ElementFrameContext } from './element';
+
+/**
+ * 2D DOM 元素, 可以添加 2D DOM到场景内, 没有透视以及近大远小, 仅进行位置投影
+ */
+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) {
+    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 类名
+   */
+  public setWrapperCSSClass(className: string): void {
+    this.wrapper.className = className;
+  }
+
+  /**
+   * 设置DOM的ID
+   * @param name id名称
+   */
+  public setWrapperDomID(name: string): void {
+    this.wrapper.id = name;
+  }
+
+  update(): ElementFrameContext {
+    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;
+  }
+
+  // renderingViewChanged(view: View): void {
+  //   let container: HTMLElement = this.domElement;
+  //   for (let i = 0; i < 3; i++) {
+  //     if (!container.parentElement) return;
+  //     container = container.parentElement;
+  //   }
+  //   if (view.container !== container || !view.camera) return;
+
+  //   if (Number.isFinite(this.visibleRadius)) {
+  //     const distSquared = this.visibleRadius ** 2;
+  //     const visible = view.camera.position.distanceToSquared(this.position) < distSquared;
+  //     this.visible = visible;
+  //   }
+
+  //   this.wrapper.style.visibility = this.visible ? 'visible' : 'hidden';
+  // }
+}
+
+export { DOM2DElement };

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

@@ -0,0 +1,87 @@
+import { CSS3DObject } from '../../external/renderers/css-3d-renderer';
+import { Element, ElementFrameContext } from './element';
+
+/**
+ * 3D DOM 元素, 可以添加 3D DOM到场景内
+ */
+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) {
+    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(): ElementFrameContext {
+    const frameContext = new ElementFrameContext(this);
+    if (this.initialzed) {
+      frameContext.shouldPlaceElement = true;
+      this.initialzed = false;
+    }
+    return frameContext;
+  }
+
+  // renderingViewChanged(view: View): void {
+  //   const { THREE } = Externals.getInstance();
+  //   let container: HTMLElement = this.domElement;
+  //   for (let i = 0; i < 4; i++) {
+  //     if (!container.parentElement) return;
+  //     container = container.parentElement;
+  //   }
+  //   if (view.container !== container || !view.camera) return;
+
+  //   if (Number.isFinite(this.visibleRadius)) {
+  //     const distSquared = this.visibleRadius ** 2;
+  //     const visible = view.camera.position.distanceToSquared(this.position) < distSquared;
+  //     this.visible = visible;
+  //   }
+
+  //   this.wrapper.style.visibility = this.visible ? 'visible' : 'hidden';
+
+  //   if (this.faceToCamera) {
+  //     this.up.copy(view.camera.up).normalize();
+  //     if (this.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);
+  //     }
+  //   }
+  // }
+}
+
+export { DOM3DElement };