three-stdlib 2.22.8 → 2.22.10

package/dist/renderers/CSS3DRenderer.js

@@ -1,133 +1,167 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const THREE = require("three");
-var CSS3DObject = function(element) {
-  THREE.Object3D.call(this);
-  this.element = element || document.createElement("div");
-  this.element.style.position = "absolute";
-  this.element.style.pointerEvents = "auto";
-  this.addEventListener("removed", function() {
-    this.traverse(function(object) {
-      if (object.element instanceof Element && object.element.parentNode !== null) {
-        object.element.parentNode.removeChild(object.element);
-      }
+const _position = /* @__PURE__ */ new THREE.Vector3();
+const _quaternion = /* @__PURE__ */ new THREE.Quaternion();
+const _scale = /* @__PURE__ */ new THREE.Vector3();
+class CSS3DObject extends THREE.Object3D {
+  constructor(element = document.createElement("div")) {
+    super();
+    this.isCSS3DObject = true;
+    this.element = element;
+    this.element.style.position = "absolute";
+    this.element.style.pointerEvents = "auto";
+    this.element.style.userSelect = "none";
+    this.element.setAttribute("draggable", false);
+    this.addEventListener("removed", function() {
+      this.traverse(function(object) {
+        if (object.element instanceof Element && object.element.parentNode !== null) {
+          object.element.parentNode.removeChild(object.element);
+        }
+      });
     });
-  });
-};
-CSS3DObject.prototype = Object.assign(Object.create(THREE.Object3D.prototype), {
-  constructor: CSS3DObject,
-  copy: function(source, recursive) {
-    THREE.Object3D.prototype.copy.call(this, source, recursive);
+  }
+  copy(source, recursive) {
+    super.copy(source, recursive);
     this.element = source.element.cloneNode(true);
     return this;
   }
-});
-var CSS3DSprite = function(element) {
-  CSS3DObject.call(this, element);
-};
-CSS3DSprite.prototype = Object.create(CSS3DObject.prototype);
-CSS3DSprite.prototype.constructor = CSS3DSprite;
-var CSS3DRenderer = function() {
-  var _this = this;
-  var _width, _height;
-  var _widthHalf, _heightHalf;
-  var matrix = new THREE.Matrix4();
-  var cache = {
-    camera: { fov: 0, style: "" },
-    objects: /* @__PURE__ */ new WeakMap()
-  };
-  var domElement = document.createElement("div");
-  domElement.style.overflow = "hidden";
-  this.domElement = domElement;
-  var 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(matrix2) {
-    var elements = matrix2.elements;
-    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]) + ")";
+}
+class CSS3DSprite extends CSS3DObject {
+  constructor(element) {
+    super(element);
+    this.isCSS3DSprite = true;
+    this.rotation2D = 0;
   }
-  function getObjectCSSMatrix(matrix2) {
-    var elements = matrix2.elements;
-    var 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;
+  copy(source, recursive) {
+    super.copy(source, recursive);
+    this.rotation2D = source.rotation2D;
+    return this;
   }
-  function renderObject(object, scene, camera, cameraCSSMatrix) {
-    if (object instanceof CSS3DObject) {
-      object.onBeforeRender(_this, scene, camera);
-      var style;
-      if (object instanceof CSS3DSprite) {
-        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);
+}
+const _matrix = /* @__PURE__ */ new THREE.Matrix4();
+const _matrix2 = /* @__PURE__ */ new THREE.Matrix4();
+class CSS3DRenderer {
+  constructor(parameters = {}) {
+    const _this = this;
+    let _width, _height;
+    let _widthHalf, _heightHalf;
+    const cache = {
+      camera: { fov: 0, style: "" },
+      objects: /* @__PURE__ */ new WeakMap()
+    };
+    const domElement = parameters.element !== void 0 ? parameters.element : document.createElement("div");
+    domElement.style.overflow = "hidden";
+    this.domElement = domElement;
+    const viewElement = document.createElement("div");
+    viewElement.style.transformOrigin = "0 0";
+    viewElement.style.pointerEvents = "none";
+    domElement.appendChild(viewElement);
+    const cameraElement = document.createElement("div");
+    cameraElement.style.transformStyle = "preserve-3d";
+    viewElement.appendChild(cameraElement);
+    this.getSize = function() {
+      return {
+        width: _width,
+        height: _height
+      };
+    };
+    this.render = function(scene, camera) {
+      const fov = camera.projectionMatrix.elements[5] * _heightHalf;
+      if (cache.camera.fov !== fov) {
+        viewElement.style.perspective = camera.isPerspectiveCamera ? fov + "px" : "";
+        cache.camera.fov = fov;
+      }
+      if (camera.view && camera.view.enabled) {
+        viewElement.style.transform = `translate( ${-camera.view.offsetX * (_width / camera.view.width)}px, ${-camera.view.offsetY * (_height / camera.view.height)}px )`;
+        viewElement.style.transform += `scale( ${camera.view.fullWidth / camera.view.width}, ${camera.view.fullHeight / camera.view.height} )`;
       } else {
-        style = getObjectCSSMatrix(object.matrixWorld);
+        viewElement.style.transform = "";
       }
-      var element = object.element;
-      var cachedObject = cache.objects.get(object);
-      if (cachedObject === void 0 || cachedObject.style !== style) {
-        element.style.transform = style;
-        var objectData = { style };
-        cache.objects.set(object, objectData);
+      if (scene.matrixWorldAutoUpdate === true)
+        scene.updateMatrixWorld();
+      if (camera.parent === null && camera.matrixWorldAutoUpdate === true)
+        camera.updateMatrixWorld();
+      let tx, ty;
+      if (camera.isOrthographicCamera) {
+        tx = -(camera.right + camera.left) / 2;
+        ty = (camera.top + camera.bottom) / 2;
       }
-      element.style.display = object.visible ? "" : "none";
-      if (element.parentNode !== cameraElement) {
-        cameraElement.appendChild(element);
+      const scaleByViewOffset = camera.view && camera.view.enabled ? camera.view.height / camera.view.fullHeight : 1;
+      const cameraCSSMatrix = camera.isOrthographicCamera ? `scale( ${scaleByViewOffset} )scale(` + fov + ")translate(" + epsilon(tx) + "px," + epsilon(ty) + "px)" + getCameraCSSMatrix(camera.matrixWorldInverse) : `scale( ${scaleByViewOffset} )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;
       }
-      object.onAfterRender(_this, scene, camera);
-    }
-    for (let i = 0, l = object.children.length; i < l; i++) {
-      renderObject(object.children[i], scene, camera, cameraCSSMatrix);
+      renderObject(scene, scene, camera, cameraCSSMatrix);
+    };
+    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";
+      viewElement.style.width = width + "px";
+      viewElement.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;
     }
-  }
-  this.render = function(scene, camera) {
-    var fov = camera.projectionMatrix.elements[5] * _heightHalf;
-    if (cache.camera.fov !== fov) {
-      domElement.style.perspective = camera.isPerspectiveCamera ? fov + "px" : "";
-      cache.camera.fov = fov;
+    function getCameraCSSMatrix(matrix) {
+      const elements = matrix.elements;
+      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]) + ")";
     }
-    if (scene.autoUpdate === true)
-      scene.updateMatrixWorld();
-    if (camera.parent === null)
-      camera.updateMatrixWorld();
-    if (camera.isOrthographicCamera) {
-      var tx = -(camera.right + camera.left) / 2;
-      var ty = (camera.top + camera.bottom) / 2;
+    function getObjectCSSMatrix(matrix) {
+      const elements = matrix.elements;
+      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;
     }
-    var cameraCSSMatrix = camera.isOrthographicCamera ? "scale(" + fov + ")translate(" + epsilon(tx) + "px," + epsilon(ty) + "px)" + getCameraCSSMatrix(camera.matrixWorldInverse) : "translateZ(" + fov + "px)" + getCameraCSSMatrix(camera.matrixWorldInverse);
-    var style = cameraCSSMatrix + "translate(" + _widthHalf + "px," + _heightHalf + "px)";
-    if (cache.camera.style !== style) {
-      cameraElement.style.transform = style;
-      cache.camera.style = style;
+    function renderObject(object, scene, camera, cameraCSSMatrix) {
+      if (object.isCSS3DObject) {
+        const visible = object.visible === true && object.layers.test(camera.layers) === true;
+        object.element.style.display = visible === true ? "" : "none";
+        if (visible === true) {
+          object.onBeforeRender(_this, scene, camera);
+          let style;
+          if (object.isCSS3DSprite) {
+            _matrix.copy(camera.matrixWorldInverse);
+            _matrix.transpose();
+            if (object.rotation2D !== 0)
+              _matrix.multiply(_matrix2.makeRotationZ(object.rotation2D));
+            object.matrixWorld.decompose(_position, _quaternion, _scale);
+            _matrix.setPosition(_position);
+            _matrix.scale(_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.element;
+          const cachedObject = cache.objects.get(object);
+          if (cachedObject === void 0 || cachedObject.style !== style) {
+            element.style.transform = style;
+            const objectData = { style };
+            cache.objects.set(object, objectData);
+          }
+          if (element.parentNode !== cameraElement) {
+            cameraElement.appendChild(element);
+          }
+          object.onAfterRender(_this, scene, camera);
+        }
+      }
+      for (let i = 0, l = object.children.length; i < l; i++) {
+        renderObject(object.children[i], scene, camera, cameraCSSMatrix);
+      }
     }
-    renderObject(scene, scene, camera, cameraCSSMatrix);
-  };
-};
+  }
+}
 exports.CSS3DObject = CSS3DObject;
 exports.CSS3DRenderer = CSS3DRenderer;
 exports.CSS3DSprite = CSS3DSprite;

package/dist/renderers/CSS3DRenderer.mjs

@@ -1,131 +1,165 @@
-import { Object3D, Matrix4 } from "three";
-var CSS3DObject = function(element) {
-  Object3D.call(this);
-  this.element = element || document.createElement("div");
-  this.element.style.position = "absolute";
-  this.element.style.pointerEvents = "auto";
-  this.addEventListener("removed", function() {
-    this.traverse(function(object) {
-      if (object.element instanceof Element && object.element.parentNode !== null) {
-        object.element.parentNode.removeChild(object.element);
-      }
+import { Vector3, Quaternion, Object3D, Matrix4 } from "three";
+const _position = /* @__PURE__ */ new Vector3();
+const _quaternion = /* @__PURE__ */ new Quaternion();
+const _scale = /* @__PURE__ */ new Vector3();
+class CSS3DObject extends Object3D {
+  constructor(element = document.createElement("div")) {
+    super();
+    this.isCSS3DObject = true;
+    this.element = element;
+    this.element.style.position = "absolute";
+    this.element.style.pointerEvents = "auto";
+    this.element.style.userSelect = "none";
+    this.element.setAttribute("draggable", false);
+    this.addEventListener("removed", function() {
+      this.traverse(function(object) {
+        if (object.element instanceof Element && object.element.parentNode !== null) {
+          object.element.parentNode.removeChild(object.element);
+        }
+      });
     });
-  });
-};
-CSS3DObject.prototype = Object.assign(Object.create(Object3D.prototype), {
-  constructor: CSS3DObject,
-  copy: function(source, recursive) {
-    Object3D.prototype.copy.call(this, source, recursive);
+  }
+  copy(source, recursive) {
+    super.copy(source, recursive);
     this.element = source.element.cloneNode(true);
     return this;
   }
-});
-var CSS3DSprite = function(element) {
-  CSS3DObject.call(this, element);
-};
-CSS3DSprite.prototype = Object.create(CSS3DObject.prototype);
-CSS3DSprite.prototype.constructor = CSS3DSprite;
-var CSS3DRenderer = function() {
-  var _this = this;
-  var _width, _height;
-  var _widthHalf, _heightHalf;
-  var matrix = new Matrix4();
-  var cache = {
-    camera: { fov: 0, style: "" },
-    objects: /* @__PURE__ */ new WeakMap()
-  };
-  var domElement = document.createElement("div");
-  domElement.style.overflow = "hidden";
-  this.domElement = domElement;
-  var 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;
+}
+class CSS3DSprite extends CSS3DObject {
+  constructor(element) {
+    super(element);
+    this.isCSS3DSprite = true;
+    this.rotation2D = 0;
   }
-  function getCameraCSSMatrix(matrix2) {
-    var elements = matrix2.elements;
-    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(matrix2) {
-    var elements = matrix2.elements;
-    var 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;
+  copy(source, recursive) {
+    super.copy(source, recursive);
+    this.rotation2D = source.rotation2D;
+    return this;
   }
-  function renderObject(object, scene, camera, cameraCSSMatrix) {
-    if (object instanceof CSS3DObject) {
-      object.onBeforeRender(_this, scene, camera);
-      var style;
-      if (object instanceof CSS3DSprite) {
-        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);
+}
+const _matrix = /* @__PURE__ */ new Matrix4();
+const _matrix2 = /* @__PURE__ */ new Matrix4();
+class CSS3DRenderer {
+  constructor(parameters = {}) {
+    const _this = this;
+    let _width, _height;
+    let _widthHalf, _heightHalf;
+    const cache = {
+      camera: { fov: 0, style: "" },
+      objects: /* @__PURE__ */ new WeakMap()
+    };
+    const domElement = parameters.element !== void 0 ? parameters.element : document.createElement("div");
+    domElement.style.overflow = "hidden";
+    this.domElement = domElement;
+    const viewElement = document.createElement("div");
+    viewElement.style.transformOrigin = "0 0";
+    viewElement.style.pointerEvents = "none";
+    domElement.appendChild(viewElement);
+    const cameraElement = document.createElement("div");
+    cameraElement.style.transformStyle = "preserve-3d";
+    viewElement.appendChild(cameraElement);
+    this.getSize = function() {
+      return {
+        width: _width,
+        height: _height
+      };
+    };
+    this.render = function(scene, camera) {
+      const fov = camera.projectionMatrix.elements[5] * _heightHalf;
+      if (cache.camera.fov !== fov) {
+        viewElement.style.perspective = camera.isPerspectiveCamera ? fov + "px" : "";
+        cache.camera.fov = fov;
+      }
+      if (camera.view && camera.view.enabled) {
+        viewElement.style.transform = `translate( ${-camera.view.offsetX * (_width / camera.view.width)}px, ${-camera.view.offsetY * (_height / camera.view.height)}px )`;
+        viewElement.style.transform += `scale( ${camera.view.fullWidth / camera.view.width}, ${camera.view.fullHeight / camera.view.height} )`;
       } else {
-        style = getObjectCSSMatrix(object.matrixWorld);
+        viewElement.style.transform = "";
       }
-      var element = object.element;
-      var cachedObject = cache.objects.get(object);
-      if (cachedObject === void 0 || cachedObject.style !== style) {
-        element.style.transform = style;
-        var objectData = { style };
-        cache.objects.set(object, objectData);
+      if (scene.matrixWorldAutoUpdate === true)
+        scene.updateMatrixWorld();
+      if (camera.parent === null && camera.matrixWorldAutoUpdate === true)
+        camera.updateMatrixWorld();
+      let tx, ty;
+      if (camera.isOrthographicCamera) {
+        tx = -(camera.right + camera.left) / 2;
+        ty = (camera.top + camera.bottom) / 2;
       }
-      element.style.display = object.visible ? "" : "none";
-      if (element.parentNode !== cameraElement) {
-        cameraElement.appendChild(element);
+      const scaleByViewOffset = camera.view && camera.view.enabled ? camera.view.height / camera.view.fullHeight : 1;
+      const cameraCSSMatrix = camera.isOrthographicCamera ? `scale( ${scaleByViewOffset} )scale(` + fov + ")translate(" + epsilon(tx) + "px," + epsilon(ty) + "px)" + getCameraCSSMatrix(camera.matrixWorldInverse) : `scale( ${scaleByViewOffset} )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;
       }
-      object.onAfterRender(_this, scene, camera);
-    }
-    for (let i = 0, l = object.children.length; i < l; i++) {
-      renderObject(object.children[i], scene, camera, cameraCSSMatrix);
+      renderObject(scene, scene, camera, cameraCSSMatrix);
+    };
+    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";
+      viewElement.style.width = width + "px";
+      viewElement.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;
     }
-  }
-  this.render = function(scene, camera) {
-    var fov = camera.projectionMatrix.elements[5] * _heightHalf;
-    if (cache.camera.fov !== fov) {
-      domElement.style.perspective = camera.isPerspectiveCamera ? fov + "px" : "";
-      cache.camera.fov = fov;
+    function getCameraCSSMatrix(matrix) {
+      const elements = matrix.elements;
+      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]) + ")";
     }
-    if (scene.autoUpdate === true)
-      scene.updateMatrixWorld();
-    if (camera.parent === null)
-      camera.updateMatrixWorld();
-    if (camera.isOrthographicCamera) {
-      var tx = -(camera.right + camera.left) / 2;
-      var ty = (camera.top + camera.bottom) / 2;
+    function getObjectCSSMatrix(matrix) {
+      const elements = matrix.elements;
+      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;
     }
-    var cameraCSSMatrix = camera.isOrthographicCamera ? "scale(" + fov + ")translate(" + epsilon(tx) + "px," + epsilon(ty) + "px)" + getCameraCSSMatrix(camera.matrixWorldInverse) : "translateZ(" + fov + "px)" + getCameraCSSMatrix(camera.matrixWorldInverse);
-    var style = cameraCSSMatrix + "translate(" + _widthHalf + "px," + _heightHalf + "px)";
-    if (cache.camera.style !== style) {
-      cameraElement.style.transform = style;
-      cache.camera.style = style;
+    function renderObject(object, scene, camera, cameraCSSMatrix) {
+      if (object.isCSS3DObject) {
+        const visible = object.visible === true && object.layers.test(camera.layers) === true;
+        object.element.style.display = visible === true ? "" : "none";
+        if (visible === true) {
+          object.onBeforeRender(_this, scene, camera);
+          let style;
+          if (object.isCSS3DSprite) {
+            _matrix.copy(camera.matrixWorldInverse);
+            _matrix.transpose();
+            if (object.rotation2D !== 0)
+              _matrix.multiply(_matrix2.makeRotationZ(object.rotation2D));
+            object.matrixWorld.decompose(_position, _quaternion, _scale);
+            _matrix.setPosition(_position);
+            _matrix.scale(_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.element;
+          const cachedObject = cache.objects.get(object);
+          if (cachedObject === void 0 || cachedObject.style !== style) {
+            element.style.transform = style;
+            const objectData = { style };
+            cache.objects.set(object, objectData);
+          }
+          if (element.parentNode !== cameraElement) {
+            cameraElement.appendChild(element);
+          }
+          object.onAfterRender(_this, scene, camera);
+        }
+      }
+      for (let i = 0, l = object.children.length; i < l; i++) {
+        renderObject(object.children[i], scene, camera, cameraCSSMatrix);
+      }
     }
-    renderObject(scene, scene, camera, cameraCSSMatrix);
-  };
-};
+  }
+}
 export {
   CSS3DObject,
   CSS3DRenderer,