@aibee/owlly 1.0.25 → 1.0.29

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

@@ -0,0 +1,16 @@
+import { NS_THREE } from '../../owlly/stage/externals';
+declare class CSS2DObject extends NS_THREE.Object3D {
+    element: any;
+    constructor(element: any);
+    copy(source: any, recursive: any): any;
+}
+declare class CSS2DRenderer {
+    domElement: any;
+    getSize: Function;
+    setSize: Function;
+    filterAndFlatten: Function;
+    zOrder: Function;
+    render: Function;
+    constructor();
+}
+export { CSS2DObject, CSS2DRenderer };

package/lib/external/renderers/css-2d-renderer.js

@@ -0,0 +1,121 @@
+/* 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 {
+    constructor(element) {
+        super();
+        this.element = element || document.createElement('div');
+        this.element.style.position = 'absolute';
+        this.addEventListener('removed', () => {
+            this.traverse((object) => {
+                if (object.element instanceof Element && object.element.parentNode !== null) {
+                    object.element.parentNode.removeChild(object.element);
+                }
+            });
+        });
+    }
+    copy(source, recursive) {
+        const { THREE } = Externals.getInstance();
+        THREE.Object3D.prototype.copy.call(this, source, recursive);
+        this.element = source.element.cloneNode(true);
+        return this;
+    }
+}
+class CSS2DRenderer {
+    constructor() {
+        const _this = this;
+        const { THREE } = Externals.getInstance();
+        let _width;
+        let _height;
+        let _widthHalf;
+        let _heightHalf;
+        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 () {
+            return {
+                width: _width,
+                height: _height,
+            };
+        };
+        this.setSize = function (width, height) {
+            _width = width;
+            _height = height;
+            _widthHalf = _width / 2;
+            _heightHalf = _height / 2;
+            domElement.style.width = `${width}px`;
+            domElement.style.height = `${height}px`;
+        };
+        const getDistanceToSquared = (function () {
+            const a = new THREE.Vector3();
+            const b = new THREE.Vector3();
+            return function (object1, object2) {
+                a.setFromMatrixPosition(object1.matrixWorld);
+                b.setFromMatrixPosition(object2.matrixWorld);
+                return a.distanceToSquared(b);
+            };
+        }());
+        const filterAndFlatten = function (scene) {
+            const result = [];
+            scene.traverse((object) => {
+                if (object instanceof CSS2DObject)
+                    result.push(object);
+            });
+            return result;
+        };
+        const zOrder = function (scene) {
+            const sorted = filterAndFlatten(scene).sort((a, b) => {
+                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, scene, camera) {
+            if (object instanceof CSS2DObject) {
+                object.onBeforeRender(_this, scene, camera, null, null, null);
+                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, scene, camera, null, null, null);
+            }
+            for (let i = 0, l = object.children.length; i < l; i++) {
+                renderObject(object.children[i], scene, camera);
+            }
+        };
+        this.render = function (scene, camera) {
+            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/lib/external/renderers/css-3d-renderer.d.ts

@@ -0,0 +1,18 @@
+import { NS_THREE } from '../../owlly/stage/externals';
+declare class CSS3DObject extends NS_THREE.Object3D {
+    element: any;
+    constructor(element: any);
+    copy(source: any, recursive: any): any;
+}
+declare class CSS3DSprite extends CSS3DObject {
+}
+declare class CSS3DRenderer {
+    domElement: any;
+    getSize: Function;
+    setSize: Function;
+    filterAndFlatten: Function;
+    zOrder: Function;
+    render: Function;
+    constructor();
+}
+export { CSS3DObject, CSS3DSprite, CSS3DRenderer };

package/lib/external/renderers/css-3d-renderer.js

@@ -0,0 +1,138 @@
+/* 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 {
+    constructor(element) {
+        super();
+        this.element = element || document.createElement('div');
+        this.element.style.position = 'absolute';
+        this.element.style.pointerEvents = 'auto';
+        this.addEventListener('removed', () => {
+            this.traverse((object) => {
+                if (object.element instanceof Element && object.element.parentNode !== null) {
+                    object.element.parentNode.removeChild(object.element);
+                }
+            });
+        });
+    }
+    copy(source, recursive) {
+        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 {
+    constructor() {
+        const _this = this;
+        const { THREE } = Externals.getInstance();
+        let _width;
+        let _height;
+        let _widthHalf;
+        let _heightHalf;
+        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 () {
+            return {
+                width: _width,
+                height: _height,
+            };
+        };
+        this.setSize = function (width, height) {
+            _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) {
+            return Math.abs(value) < 1e-10 ? 0 : value;
+        }
+        function getCameraCSSMatrix(matrix) {
+            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) {
+            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, scene, camera, cameraCSSMatrix) {
+            if (object instanceof CSS3DObject) {
+                object.onBeforeRender(_this, scene, camera, null, null, null);
+                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, scene, camera, null, null, null);
+            }
+            for (let i = 0, l = object.children.length; i < l; i++) {
+                renderObject(object.children[i], scene, camera, cameraCSSMatrix);
+            }
+        }
+        this.render = function (scene, camera) {
+            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 };

package/lib/external/transform-controls.d.ts

@@ -0,0 +1,106 @@
+import { NS_THREE } from '../owlly/stage/externals';
+declare class TransformControlsGizmo extends NS_THREE.Object3D {
+    isTransformControlsGizmo: boolean;
+    camera: NS_THREE.Camera;
+    object: NS_THREE.Object3D;
+    enabled: boolean;
+    axis: string | null;
+    mode: string;
+    translationSnap: number | null;
+    rotationSnap: number | null;
+    scaleSnap: number | null;
+    space: string;
+    size: number;
+    showX: boolean;
+    showY: boolean;
+    showZ: boolean;
+    worldPosition: NS_THREE.Vector3;
+    worldPositionStart: NS_THREE.Vector3;
+    worldQuaternion: NS_THREE.Quaternion;
+    worldQuaternionStart: NS_THREE.Quaternion;
+    cameraPosition: NS_THREE.Vector3;
+    cameraQuaternion: NS_THREE.Quaternion;
+    pointStart: NS_THREE.Vector3;
+    pointEnd: NS_THREE.Vector3;
+    rotationAxis: NS_THREE.Vector3;
+    rotationAngle: number;
+    eye: NS_THREE.Vector3;
+    helper: any;
+    picker: any;
+    dragging: any;
+    gizmo: any;
+    constructor();
+}
+declare class TransformControlsPlane extends NS_THREE.Mesh {
+    isTransformControlsPlane: boolean;
+    camera: NS_THREE.Camera;
+    object: NS_THREE.Object3D;
+    enabled: boolean;
+    axis: string | null;
+    mode: string;
+    translationSnap: number | null;
+    rotationSnap: number | null;
+    scaleSnap: number | null;
+    space: string;
+    size: number;
+    showX: boolean;
+    showY: boolean;
+    showZ: boolean;
+    worldPosition: NS_THREE.Vector3;
+    worldPositionStart: NS_THREE.Vector3;
+    worldQuaternion: NS_THREE.Quaternion;
+    worldQuaternionStart: NS_THREE.Quaternion;
+    cameraPosition: NS_THREE.Vector3;
+    cameraQuaternion: NS_THREE.Quaternion;
+    pointStart: NS_THREE.Vector3;
+    pointEnd: NS_THREE.Vector3;
+    rotationAxis: NS_THREE.Vector3;
+    rotationAngle: number;
+    eye: NS_THREE.Vector3;
+    constructor();
+}
+declare class TransformControls extends NS_THREE.Object3D {
+    camera: NS_THREE.Camera;
+    object: NS_THREE.Object3D | undefined;
+    enabled: boolean;
+    axis: string | null;
+    mode: string;
+    translationSnap: number | null;
+    rotationSnap: number | null;
+    scaleSnap: number | null;
+    space: string;
+    size: number;
+    showX: boolean;
+    showY: boolean;
+    showZ: boolean;
+    worldPosition: NS_THREE.Vector3;
+    worldPositionStart: NS_THREE.Vector3;
+    worldQuaternion: NS_THREE.Quaternion;
+    worldQuaternionStart: NS_THREE.Quaternion;
+    cameraPosition: NS_THREE.Vector3;
+    cameraQuaternion: NS_THREE.Quaternion;
+    pointStart: NS_THREE.Vector3;
+    pointEnd: NS_THREE.Vector3;
+    rotationAxis: NS_THREE.Vector3;
+    rotationAngle: number;
+    eye: NS_THREE.Vector3;
+    domElement: any;
+    attach: (object: NS_THREE.Object3D) => this;
+    detach: Function;
+    dispose: Function;
+    pointerDown: Function;
+    pointerMove: Function;
+    pointerUp: Function;
+    pointerHover: Function;
+    getMode: Function;
+    setMode: Function;
+    setTranslationSnap: Function;
+    setScaleSnap: Function;
+    setRotationSnap: Function;
+    setSize: Function;
+    setSpace: Function;
+    update: Function;
+    dragging: boolean;
+    constructor(camera: NS_THREE.Camera, domElement: any);
+}
+export { TransformControls, TransformControlsGizmo, TransformControlsPlane };