@aibee/owlly 1.0.25

package/src/external/renderers/css-2d-renderer.ts

@@ -0,0 +1,185 @@
+/* eslint-disable max-len, no-continue, @typescript-eslint/no-explicit-any, no-underscore-dangle, func-names, @typescript-eslint/no-this-alias, no-console, consistent-return */
+import { Externals, NS_THREE } from '../../owlly/stage/externals';
+
+class CSS2DObject extends NS_THREE.Object3D {
+  element: any;
+
+  constructor(element: any) {
+    super();
+    this.element = element || document.createElement('div');
+
+    this.element.style.position = 'absolute';
+
+    this.addEventListener('removed', () => {
+      this.traverse((object: any) => {
+        if (object.element instanceof Element && object.element.parentNode !== null) {
+          object.element.parentNode.removeChild(object.element);
+        }
+      });
+    });
+  }
+
+  copy(source: any, recursive: any): any {
+    const { THREE } = Externals.getInstance();
+    THREE.Object3D.prototype.copy.call(this, source, recursive);
+
+    this.element = source.element.cloneNode(true);
+
+    return this;
+  }
+}
+
+class CSS2DRenderer {
+  domElement: any;
+
+  getSize: Function;
+
+  setSize: Function;
+
+  filterAndFlatten: Function;
+
+  zOrder: Function;
+
+  render: Function;
+
+  constructor() {
+    const _this = this;
+    const { THREE } = Externals.getInstance();
+
+    let _width: any;
+    let _height: any;
+    let _widthHalf: any;
+    let _heightHalf: any;
+
+    const vector = new THREE.Vector3();
+    const viewMatrix = new THREE.Matrix4();
+    const viewProjectionMatrix = new THREE.Matrix4();
+
+    const cache = {
+      objects: new WeakMap(),
+    };
+
+    const domElement = document.createElement('div');
+    domElement.style.overflow = 'hidden';
+
+    this.domElement = domElement;
+
+    this.getSize = function (): any {
+      return {
+        width: _width,
+        height: _height,
+      };
+    };
+
+    this.setSize = function (width: any, height: any): any {
+      _width = width;
+      _height = height;
+
+      _widthHalf = _width / 2;
+      _heightHalf = _height / 2;
+
+      domElement.style.width = `${width}px`;
+      domElement.style.height = `${height}px`;
+    };
+
+    const getDistanceToSquared = (function (): any {
+      const a = new THREE.Vector3();
+      const b = new THREE.Vector3();
+
+      return function (object1: any, object2: any): any {
+        a.setFromMatrixPosition(object1.matrixWorld);
+        b.setFromMatrixPosition(object2.matrixWorld);
+
+        return a.distanceToSquared(b);
+      };
+    }());
+
+    const filterAndFlatten = function (scene: any): any {
+      const result: any = [];
+
+      scene.traverse((object: any): any => {
+        if (object instanceof CSS2DObject) result.push(object);
+      });
+
+      return result;
+    };
+
+    const zOrder = function (scene: any): any {
+      const sorted = filterAndFlatten(scene).sort((a: any, b: any): any => {
+        const distanceA = cache.objects.get(a).distanceToCameraSquared;
+        const distanceB = cache.objects.get(b).distanceToCameraSquared;
+
+        return distanceA - distanceB;
+      });
+
+      const zMax = sorted.length;
+
+      for (let i = 0, l = sorted.length; i < l; i++) {
+        sorted[i].element.style.zIndex = zMax - i;
+      }
+    };
+
+    const renderObject = function (object: any, scene: any, camera: any): any {
+      if (object instanceof CSS2DObject) {
+        object.onBeforeRender(
+          ((_this as unknown) as NS_THREE.WebGLRenderer),
+          scene,
+          camera,
+          ((null as unknown) as NS_THREE.BufferGeometry),
+          ((null as unknown) as NS_THREE.Material),
+          ((null as unknown) as NS_THREE.Group),
+        );
+
+        vector.setFromMatrixPosition(object.matrixWorld);
+        vector.applyMatrix4(viewProjectionMatrix);
+
+        const { element } = object;
+
+        if (/apple/i.test(navigator.vendor)) {
+          // https://github.com/mrdoob/three.js/issues/21415
+          element.style.transform = `translate(-50%,-50%) translate(${Math.round(vector.x * _widthHalf + _widthHalf)}px,${Math.round(-vector.y * _heightHalf + _heightHalf)}px)`;
+        } else {
+          element.style.transform = `translate(-50%,-50%) translate(${vector.x * _widthHalf + _widthHalf}px,${-vector.y * _heightHalf + _heightHalf}px)`;
+        }
+
+        element.style.display = (object.visible && vector.z >= -1 && vector.z <= 1) ? '' : 'none';
+
+        const objectData = {
+          distanceToCameraSquared: getDistanceToSquared(camera, object),
+        };
+
+        cache.objects.set(object, objectData);
+
+        if (element.parentNode !== domElement) {
+          domElement.appendChild(element);
+        }
+
+        object.onAfterRender(
+          ((_this as unknown) as NS_THREE.WebGLRenderer),
+          scene,
+          camera,
+          ((null as unknown) as NS_THREE.BufferGeometry),
+          ((null as unknown) as NS_THREE.Material),
+          ((null as unknown) as NS_THREE.Group),
+        );
+      }
+
+      for (let i = 0, l = object.children.length; i < l; i++) {
+        renderObject(object.children[i], scene, camera);
+      }
+    };
+
+    this.render = function (scene: any, camera: any): any {
+      if (scene.autoUpdate === true) scene.updateMatrixWorld();
+      if (camera.parent === null) camera.updateMatrixWorld();
+
+      viewMatrix.copy(camera.matrixWorldInverse);
+      viewProjectionMatrix.multiplyMatrices(camera.projectionMatrix, viewMatrix);
+
+      renderObject(scene, scene, camera);
+      zOrder(scene);
+    };
+  }
+}
+
+export { CSS2DObject, CSS2DRenderer };

package/src/external/renderers/css-3d-renderer.ts

@@ -0,0 +1,245 @@
+/* eslint-disable max-len, no-continue, @typescript-eslint/no-explicit-any, no-underscore-dangle, func-names, @typescript-eslint/no-this-alias, no-console, consistent-return, no-shadow */
+import { Externals, NS_THREE } from '../../owlly/stage/externals';
+
+class CSS3DObject extends NS_THREE.Object3D {
+  element: any;
+
+  constructor(element: any) {
+    super();
+
+    this.element = element || document.createElement('div');
+    this.element.style.position = 'absolute';
+    this.element.style.pointerEvents = 'auto';
+
+    this.addEventListener('removed', () => {
+      this.traverse((object: any) => {
+        if (object.element instanceof Element && object.element.parentNode !== null) {
+          object.element.parentNode.removeChild(object.element);
+        }
+      });
+    });
+  }
+
+  copy(source: any, recursive: any): any {
+    const { THREE } = Externals.getInstance();
+    THREE.Object3D.prototype.copy.call(this, source, recursive);
+
+    this.element = source.element.cloneNode(true);
+
+    return this;
+  }
+}
+
+class CSS3DSprite extends CSS3DObject {}
+
+class CSS3DRenderer {
+  domElement: any;
+
+  getSize: Function;
+
+  setSize: Function;
+
+  filterAndFlatten: Function;
+
+  zOrder: Function;
+
+  render: Function;
+
+  constructor() {
+    const _this = this;
+    const { THREE } = Externals.getInstance();
+
+    let _width: any;
+    let _height: any;
+    let _widthHalf: any;
+    let _heightHalf: any;
+
+    const matrix = new THREE.Matrix4();
+
+    const cache = {
+      camera: { fov: 0, style: '' },
+      objects: new WeakMap(),
+    };
+
+    const domElement = document.createElement('div');
+    domElement.style.overflow = 'hidden';
+
+    this.domElement = domElement;
+
+    const cameraElement = document.createElement('div');
+
+    cameraElement.style.transformStyle = 'preserve-3d';
+    cameraElement.style.pointerEvents = 'none';
+
+    domElement.appendChild(cameraElement);
+
+    this.getSize = function (): any {
+      return {
+        width: _width,
+        height: _height,
+      };
+    };
+
+    this.setSize = function (width: any, height: any): any {
+      _width = width;
+      _height = height;
+      _widthHalf = _width / 2;
+      _heightHalf = _height / 2;
+
+      domElement.style.width = `${width}px`;
+      domElement.style.height = `${height}px`;
+
+      cameraElement.style.width = `${width}px`;
+      cameraElement.style.height = `${height}px`;
+    };
+
+    function epsilon(value: any): any {
+      return Math.abs(value) < 1e-10 ? 0 : value;
+    }
+
+    function getCameraCSSMatrix(matrix: any): any {
+      const { elements } = matrix;
+
+      return `matrix3d(${
+        epsilon(elements[0])},${
+        epsilon(-elements[1])},${
+        epsilon(elements[2])},${
+        epsilon(elements[3])},${
+        epsilon(elements[4])},${
+        epsilon(-elements[5])},${
+        epsilon(elements[6])},${
+        epsilon(elements[7])},${
+        epsilon(elements[8])},${
+        epsilon(-elements[9])},${
+        epsilon(elements[10])},${
+        epsilon(elements[11])},${
+        epsilon(elements[12])},${
+        epsilon(-elements[13])},${
+        epsilon(elements[14])},${
+        epsilon(elements[15])
+      })`;
+    }
+
+    function getObjectCSSMatrix(matrix: any): any {
+      const { elements } = matrix;
+      const matrix3d = `matrix3d(${
+        epsilon(elements[0])},${
+        epsilon(elements[1])},${
+        epsilon(elements[2])},${
+        epsilon(elements[3])},${
+        epsilon(-elements[4])},${
+        epsilon(-elements[5])},${
+        epsilon(-elements[6])},${
+        epsilon(-elements[7])},${
+        epsilon(elements[8])},${
+        epsilon(elements[9])},${
+        epsilon(elements[10])},${
+        epsilon(elements[11])},${
+        epsilon(elements[12])},${
+        epsilon(elements[13])},${
+        epsilon(elements[14])},${
+        epsilon(elements[15])
+      })`;
+
+      return `translate(-50%,-50%)${matrix3d}`;
+    }
+
+    function renderObject(object: any, scene: any, camera: any, cameraCSSMatrix: any): any {
+      if (object instanceof CSS3DObject) {
+        object.onBeforeRender(
+          ((_this as unknown) as NS_THREE.WebGLRenderer),
+          scene,
+          camera,
+          ((null as unknown) as NS_THREE.BufferGeometry),
+          ((null as unknown) as NS_THREE.Material),
+          ((null as unknown) as NS_THREE.Group),
+        );
+
+        let style;
+
+        if (object instanceof CSS3DSprite) {
+          // http://swiftcoder.wordpress.com/2008/11/25/constructing-a-billboard-matrix/
+
+          matrix.copy(camera.matrixWorldInverse);
+          matrix.transpose();
+          matrix.copyPosition(object.matrixWorld);
+          matrix.scale(object.scale);
+
+          matrix.elements[3] = 0;
+          matrix.elements[7] = 0;
+          matrix.elements[11] = 0;
+          matrix.elements[15] = 1;
+
+          style = getObjectCSSMatrix(matrix);
+        } else {
+          style = getObjectCSSMatrix(object.matrixWorld);
+        }
+
+        const { element } = object;
+        const cachedObject = cache.objects.get(object);
+
+        if (cachedObject === undefined || cachedObject.style !== style) {
+          element.style.transform = style;
+
+          const objectData = { style };
+          cache.objects.set(object, objectData);
+        }
+
+        element.style.display = object.visible ? '' : 'none';
+
+        if (element.parentNode !== cameraElement) {
+          cameraElement.appendChild(element);
+        }
+
+        object.onAfterRender(
+          ((_this as unknown) as NS_THREE.WebGLRenderer),
+          scene,
+          camera,
+          ((null as unknown) as NS_THREE.BufferGeometry),
+          ((null as unknown) as NS_THREE.Material),
+          ((null as unknown) as NS_THREE.Group),
+        );
+      }
+
+      for (let i = 0, l = object.children.length; i < l; i++) {
+        renderObject(object.children[i], scene, camera, cameraCSSMatrix);
+      }
+    }
+
+    this.render = function (scene: any, camera: any): any {
+      const fov = camera.projectionMatrix.elements[5] * _heightHalf;
+
+      if (cache.camera.fov !== fov) {
+        domElement.style.perspective = camera.isPerspectiveCamera ? `${fov}px` : '';
+        cache.camera.fov = fov;
+      }
+
+      if (scene.autoUpdate === true) scene.updateMatrixWorld();
+      if (camera.parent === null) camera.updateMatrixWorld();
+
+      let tx;
+      let ty;
+      if (camera.isOrthographicCamera) {
+        tx = -(camera.right + camera.left) / 2;
+        ty = (camera.top + camera.bottom) / 2;
+      }
+
+      const cameraCSSMatrix = camera.isOrthographicCamera
+        ? `scale(${fov})` + `translate(${epsilon(tx)}px,${epsilon(ty)}px)${getCameraCSSMatrix(camera.matrixWorldInverse)}` // eslint-disable-line
+        : `translateZ(${fov}px)${getCameraCSSMatrix(camera.matrixWorldInverse)}`;
+
+      const style = `${cameraCSSMatrix
+      }translate(${_widthHalf}px,${_heightHalf}px)`;
+
+      if (cache.camera.style !== style) {
+        cameraElement.style.transform = style;
+
+        cache.camera.style = style;
+      }
+
+      renderObject(scene, scene, camera, cameraCSSMatrix);
+    };
+  }
+}
+
+export { CSS3DObject, CSS3DSprite, CSS3DRenderer };