three-stdlib 2.22.9 → 2.23.0

package/dist/postprocessing/UnrealBloomPass.mjs

@@ -1,104 +1,100 @@
-import { Vector2, Color, LinearFilter, RGBAFormat, WebGLRenderTarget, UniformsUtils, ShaderMaterial, Vector3, AdditiveBlending, MeshBasicMaterial } from "three";
-import { FullScreenQuad, Pass } from "./Pass.mjs";
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+import { Vector2, Color, WebGLRenderTarget, HalfFloatType, UniformsUtils, ShaderMaterial, Vector3, AdditiveBlending, MeshBasicMaterial } from "three";
+import { Pass, FullScreenQuad } from "./Pass.mjs";
 import { CopyShader } from "../shaders/CopyShader.mjs";
 import { LuminosityHighPassShader } from "../shaders/LuminosityHighPassShader.mjs";
-var UnrealBloomPass = function(resolution, strength, radius, threshold) {
-  this.strength = strength !== void 0 ? strength : 1;
-  this.radius = radius;
-  this.threshold = threshold;
-  this.resolution = resolution !== void 0 ? new Vector2(resolution.x, resolution.y) : new Vector2(256, 256);
-  this.clearColor = new Color(0, 0, 0);
-  var pars = {
-    minFilter: LinearFilter,
-    magFilter: LinearFilter,
-    format: RGBAFormat
-  };
-  this.renderTargetsHorizontal = [];
-  this.renderTargetsVertical = [];
-  this.nMips = 5;
-  var resx = Math.round(this.resolution.x / 2);
-  var resy = Math.round(this.resolution.y / 2);
-  this.renderTargetBright = new WebGLRenderTarget(resx, resy, pars);
-  this.renderTargetBright.texture.name = "UnrealBloomPass.bright";
-  this.renderTargetBright.texture.generateMipmaps = false;
-  for (let i = 0; i < this.nMips; i++) {
-    var renderTargetHorizonal = new WebGLRenderTarget(resx, resy, pars);
-    renderTargetHorizonal.texture.name = "UnrealBloomPass.h" + i;
-    renderTargetHorizonal.texture.generateMipmaps = false;
-    this.renderTargetsHorizontal.push(renderTargetHorizonal);
-    var renderTargetVertical = new WebGLRenderTarget(resx, resy, pars);
-    renderTargetVertical.texture.name = "UnrealBloomPass.v" + i;
-    renderTargetVertical.texture.generateMipmaps = false;
-    this.renderTargetsVertical.push(renderTargetVertical);
-    resx = Math.round(resx / 2);
-    resy = Math.round(resy / 2);
-  }
-  if (LuminosityHighPassShader === void 0)
-    console.error("THREE.UnrealBloomPass relies on LuminosityHighPassShader");
-  var highPassShader = LuminosityHighPassShader;
-  this.highPassUniforms = UniformsUtils.clone(highPassShader.uniforms);
-  this.highPassUniforms["luminosityThreshold"].value = threshold;
-  this.highPassUniforms["smoothWidth"].value = 0.01;
-  this.materialHighPassFilter = new ShaderMaterial({
-    uniforms: this.highPassUniforms,
-    vertexShader: highPassShader.vertexShader,
-    fragmentShader: highPassShader.fragmentShader,
-    defines: {}
-  });
-  this.separableBlurMaterials = [];
-  var kernelSizeArray = [3, 5, 7, 9, 11];
-  var resx = Math.round(this.resolution.x / 2);
-  var resy = Math.round(this.resolution.y / 2);
-  for (let i = 0; i < this.nMips; i++) {
-    this.separableBlurMaterials.push(this.getSeperableBlurMaterial(kernelSizeArray[i]));
-    this.separableBlurMaterials[i].uniforms["texSize"].value = new Vector2(resx, resy);
-    resx = Math.round(resx / 2);
-    resy = Math.round(resy / 2);
-  }
-  this.compositeMaterial = this.getCompositeMaterial(this.nMips);
-  this.compositeMaterial.uniforms["blurTexture1"].value = this.renderTargetsVertical[0].texture;
-  this.compositeMaterial.uniforms["blurTexture2"].value = this.renderTargetsVertical[1].texture;
-  this.compositeMaterial.uniforms["blurTexture3"].value = this.renderTargetsVertical[2].texture;
-  this.compositeMaterial.uniforms["blurTexture4"].value = this.renderTargetsVertical[3].texture;
-  this.compositeMaterial.uniforms["blurTexture5"].value = this.renderTargetsVertical[4].texture;
-  this.compositeMaterial.uniforms["bloomStrength"].value = strength;
-  this.compositeMaterial.uniforms["bloomRadius"].value = 0.1;
-  this.compositeMaterial.needsUpdate = true;
-  var bloomFactors = [1, 0.8, 0.6, 0.4, 0.2];
-  this.compositeMaterial.uniforms["bloomFactors"].value = bloomFactors;
-  this.bloomTintColors = [
-    new Vector3(1, 1, 1),
-    new Vector3(1, 1, 1),
-    new Vector3(1, 1, 1),
-    new Vector3(1, 1, 1),
-    new Vector3(1, 1, 1)
-  ];
-  this.compositeMaterial.uniforms["bloomTintColors"].value = this.bloomTintColors;
-  if (CopyShader === void 0) {
-    console.error("THREE.UnrealBloomPass relies on CopyShader");
+const _UnrealBloomPass = class extends Pass {
+  constructor(resolution, strength, radius, threshold) {
+    super();
+    this.strength = strength !== void 0 ? strength : 1;
+    this.radius = radius;
+    this.threshold = threshold;
+    this.resolution = resolution !== void 0 ? new Vector2(resolution.x, resolution.y) : new Vector2(256, 256);
+    this.clearColor = new Color(0, 0, 0);
+    this.renderTargetsHorizontal = [];
+    this.renderTargetsVertical = [];
+    this.nMips = 5;
+    let resx = Math.round(this.resolution.x / 2);
+    let resy = Math.round(this.resolution.y / 2);
+    this.renderTargetBright = new WebGLRenderTarget(resx, resy, { type: HalfFloatType });
+    this.renderTargetBright.texture.name = "UnrealBloomPass.bright";
+    this.renderTargetBright.texture.generateMipmaps = false;
+    for (let i = 0; i < this.nMips; i++) {
+      const renderTargetHorizonal = new WebGLRenderTarget(resx, resy, { type: HalfFloatType });
+      renderTargetHorizonal.texture.name = "UnrealBloomPass.h" + i;
+      renderTargetHorizonal.texture.generateMipmaps = false;
+      this.renderTargetsHorizontal.push(renderTargetHorizonal);
+      const renderTargetVertical = new WebGLRenderTarget(resx, resy, { type: HalfFloatType });
+      renderTargetVertical.texture.name = "UnrealBloomPass.v" + i;
+      renderTargetVertical.texture.generateMipmaps = false;
+      this.renderTargetsVertical.push(renderTargetVertical);
+      resx = Math.round(resx / 2);
+      resy = Math.round(resy / 2);
+    }
+    const highPassShader = LuminosityHighPassShader;
+    this.highPassUniforms = UniformsUtils.clone(highPassShader.uniforms);
+    this.highPassUniforms["luminosityThreshold"].value = threshold;
+    this.highPassUniforms["smoothWidth"].value = 0.01;
+    this.materialHighPassFilter = new ShaderMaterial({
+      uniforms: this.highPassUniforms,
+      vertexShader: highPassShader.vertexShader,
+      fragmentShader: highPassShader.fragmentShader,
+      defines: {}
+    });
+    this.separableBlurMaterials = [];
+    const kernelSizeArray = [3, 5, 7, 9, 11];
+    resx = Math.round(this.resolution.x / 2);
+    resy = Math.round(this.resolution.y / 2);
+    for (let i = 0; i < this.nMips; i++) {
+      this.separableBlurMaterials.push(this.getSeperableBlurMaterial(kernelSizeArray[i]));
+      this.separableBlurMaterials[i].uniforms["texSize"].value = new Vector2(resx, resy);
+      resx = Math.round(resx / 2);
+      resy = Math.round(resy / 2);
+    }
+    this.compositeMaterial = this.getCompositeMaterial(this.nMips);
+    this.compositeMaterial.uniforms["blurTexture1"].value = this.renderTargetsVertical[0].texture;
+    this.compositeMaterial.uniforms["blurTexture2"].value = this.renderTargetsVertical[1].texture;
+    this.compositeMaterial.uniforms["blurTexture3"].value = this.renderTargetsVertical[2].texture;
+    this.compositeMaterial.uniforms["blurTexture4"].value = this.renderTargetsVertical[3].texture;
+    this.compositeMaterial.uniforms["blurTexture5"].value = this.renderTargetsVertical[4].texture;
+    this.compositeMaterial.uniforms["bloomStrength"].value = strength;
+    this.compositeMaterial.uniforms["bloomRadius"].value = 0.1;
+    this.compositeMaterial.needsUpdate = true;
+    const bloomFactors = [1, 0.8, 0.6, 0.4, 0.2];
+    this.compositeMaterial.uniforms["bloomFactors"].value = bloomFactors;
+    this.bloomTintColors = [
+      new Vector3(1, 1, 1),
+      new Vector3(1, 1, 1),
+      new Vector3(1, 1, 1),
+      new Vector3(1, 1, 1),
+      new Vector3(1, 1, 1)
+    ];
+    this.compositeMaterial.uniforms["bloomTintColors"].value = this.bloomTintColors;
+    const copyShader = CopyShader;
+    this.copyUniforms = UniformsUtils.clone(copyShader.uniforms);
+    this.copyUniforms["opacity"].value = 1;
+    this.materialCopy = new ShaderMaterial({
+      uniforms: this.copyUniforms,
+      vertexShader: copyShader.vertexShader,
+      fragmentShader: copyShader.fragmentShader,
+      blending: AdditiveBlending,
+      depthTest: false,
+      depthWrite: false,
+      transparent: true
+    });
+    this.enabled = true;
+    this.needsSwap = false;
+    this._oldClearColor = new Color();
+    this.oldClearAlpha = 1;
+    this.basic = new MeshBasicMaterial();
+    this.fsQuad = new FullScreenQuad(null);
   }
-  var copyShader = CopyShader;
-  this.copyUniforms = UniformsUtils.clone(copyShader.uniforms);
-  this.copyUniforms["opacity"].value = 1;
-  this.materialCopy = new ShaderMaterial({
-    uniforms: this.copyUniforms,
-    vertexShader: copyShader.vertexShader,
-    fragmentShader: copyShader.fragmentShader,
-    blending: AdditiveBlending,
-    depthTest: false,
-    depthWrite: false,
-    transparent: true
-  });
-  this.enabled = true;
-  this.needsSwap = false;
-  this._oldClearColor = new Color();
-  this.oldClearAlpha = 1;
-  this.basic = new MeshBasicMaterial();
-  this.fsQuad = new FullScreenQuad(null);
-};
-UnrealBloomPass.prototype = Object.assign(Object.create(Pass.prototype), {
-  constructor: UnrealBloomPass,
-  dispose: function() {
+  dispose() {
     for (let i = 0; i < this.renderTargetsHorizontal.length; i++) {
       this.renderTargetsHorizontal[i].dispose();
     }
@@ -106,10 +102,17 @@ UnrealBloomPass.prototype = Object.assign(Object.create(Pass.prototype), {
       this.renderTargetsVertical[i].dispose();
     }
     this.renderTargetBright.dispose();
-  },
-  setSize: function(width, height) {
-    var resx = Math.round(width / 2);
-    var resy = Math.round(height / 2);
+    for (let i = 0; i < this.separableBlurMaterials.length; i++) {
+      this.separableBlurMaterials[i].dispose();
+    }
+    this.compositeMaterial.dispose();
+    this.materialCopy.dispose();
+    this.basic.dispose();
+    this.fsQuad.dispose();
+  }
+  setSize(width, height) {
+    let resx = Math.round(width / 2);
+    let resy = Math.round(height / 2);
     this.renderTargetBright.setSize(resx, resy);
     for (let i = 0; i < this.nMips; i++) {
       this.renderTargetsHorizontal[i].setSize(resx, resy);
@@ -118,11 +121,11 @@ UnrealBloomPass.prototype = Object.assign(Object.create(Pass.prototype), {
       resx = Math.round(resx / 2);
       resy = Math.round(resy / 2);
     }
-  },
-  render: function(renderer, writeBuffer, readBuffer, deltaTime, maskActive) {
+  }
+  render(renderer, writeBuffer, readBuffer, deltaTime, maskActive) {
     renderer.getClearColor(this._oldClearColor);
     this.oldClearAlpha = renderer.getClearAlpha();
-    var oldAutoClear = renderer.autoClear;
+    const oldAutoClear = renderer.autoClear;
     renderer.autoClear = false;
     renderer.setClearColor(this.clearColor, 0);
     if (maskActive)
@@ -140,16 +143,16 @@ UnrealBloomPass.prototype = Object.assign(Object.create(Pass.prototype), {
     renderer.setRenderTarget(this.renderTargetBright);
     renderer.clear();
     this.fsQuad.render(renderer);
-    var inputRenderTarget = this.renderTargetBright;
+    let inputRenderTarget = this.renderTargetBright;
     for (let i = 0; i < this.nMips; i++) {
       this.fsQuad.material = this.separableBlurMaterials[i];
       this.separableBlurMaterials[i].uniforms["colorTexture"].value = inputRenderTarget.texture;
-      this.separableBlurMaterials[i].uniforms["direction"].value = UnrealBloomPass.BlurDirectionX;
+      this.separableBlurMaterials[i].uniforms["direction"].value = _UnrealBloomPass.BlurDirectionX;
       renderer.setRenderTarget(this.renderTargetsHorizontal[i]);
       renderer.clear();
       this.fsQuad.render(renderer);
       this.separableBlurMaterials[i].uniforms["colorTexture"].value = this.renderTargetsHorizontal[i].texture;
-      this.separableBlurMaterials[i].uniforms["direction"].value = UnrealBloomPass.BlurDirectionY;
+      this.separableBlurMaterials[i].uniforms["direction"].value = _UnrealBloomPass.BlurDirectionY;
       renderer.setRenderTarget(this.renderTargetsVertical[i]);
       renderer.clear();
       this.fsQuad.render(renderer);
@@ -175,8 +178,8 @@ UnrealBloomPass.prototype = Object.assign(Object.create(Pass.prototype), {
     }
     renderer.setClearColor(this._oldClearColor, this.oldClearAlpha);
     renderer.autoClear = oldAutoClear;
-  },
-  getSeperableBlurMaterial: function(kernelRadius) {
+  }
+  getSeperableBlurMaterial(kernelRadius) {
     return new ShaderMaterial({
       defines: {
         KERNEL_RADIUS: kernelRadius,
@@ -187,11 +190,39 @@ UnrealBloomPass.prototype = Object.assign(Object.create(Pass.prototype), {
         texSize: { value: new Vector2(0.5, 0.5) },
         direction: { value: new Vector2(0.5, 0.5) }
       },
-      vertexShader: "varying vec2 vUv;\nvoid main() {\n	vUv = uv;\n	gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );\n}",
-      fragmentShader: "#include <common>varying vec2 vUv;\nuniform sampler2D colorTexture;\nuniform vec2 texSize;uniform vec2 direction;\nfloat gaussianPdf(in float x, in float sigma) {	return 0.39894 * exp( -0.5 * x * x/( sigma * sigma))/sigma;}void main() {\n	vec2 invSize = 1.0 / texSize;	float fSigma = float(SIGMA);	float weightSum = gaussianPdf(0.0, fSigma);	vec3 diffuseSum = texture2D( colorTexture, vUv).rgb * weightSum;	for( int i = 1; i < KERNEL_RADIUS; i ++ ) {		float x = float(i);		float w = gaussianPdf(x, fSigma);		vec2 uvOffset = direction * invSize * x;		vec3 sample1 = texture2D( colorTexture, vUv + uvOffset).rgb;		vec3 sample2 = texture2D( colorTexture, vUv - uvOffset).rgb;		diffuseSum += (sample1 + sample2) * w;		weightSum += 2.0 * w;	}	gl_FragColor = vec4(diffuseSum/weightSum, 1.0);\n}"
+      vertexShader: `varying vec2 vUv;
+				void main() {
+					vUv = uv;
+					gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
+				}`,
+      fragmentShader: `#include <common>
+				varying vec2 vUv;
+				uniform sampler2D colorTexture;
+				uniform vec2 texSize;
+				uniform vec2 direction;
+
+				float gaussianPdf(in float x, in float sigma) {
+					return 0.39894 * exp( -0.5 * x * x/( sigma * sigma))/sigma;
+				}
+				void main() {
+					vec2 invSize = 1.0 / texSize;
+					float fSigma = float(SIGMA);
+					float weightSum = gaussianPdf(0.0, fSigma);
+					vec3 diffuseSum = texture2D( colorTexture, vUv).rgb * weightSum;
+					for( int i = 1; i < KERNEL_RADIUS; i ++ ) {
+						float x = float(i);
+						float w = gaussianPdf(x, fSigma);
+						vec2 uvOffset = direction * invSize * x;
+						vec3 sample1 = texture2D( colorTexture, vUv + uvOffset).rgb;
+						vec3 sample2 = texture2D( colorTexture, vUv - uvOffset).rgb;
+						diffuseSum += (sample1 + sample2) * w;
+						weightSum += 2.0 * w;
+					}
+					gl_FragColor = vec4(diffuseSum/weightSum, 1.0);
+				}`
     });
-  },
-  getCompositeMaterial: function(nMips) {
+  }
+  getCompositeMaterial(nMips) {
     return new ShaderMaterial({
       defines: {
         NUM_MIPS: nMips
@@ -202,19 +233,45 @@ UnrealBloomPass.prototype = Object.assign(Object.create(Pass.prototype), {
         blurTexture3: { value: null },
         blurTexture4: { value: null },
         blurTexture5: { value: null },
-        dirtTexture: { value: null },
         bloomStrength: { value: 1 },
         bloomFactors: { value: null },
         bloomTintColors: { value: null },
         bloomRadius: { value: 0 }
       },
-      vertexShader: "varying vec2 vUv;\nvoid main() {\n	vUv = uv;\n	gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );\n}",
-      fragmentShader: "varying vec2 vUv;uniform sampler2D blurTexture1;uniform sampler2D blurTexture2;uniform sampler2D blurTexture3;uniform sampler2D blurTexture4;uniform sampler2D blurTexture5;uniform sampler2D dirtTexture;uniform float bloomStrength;uniform float bloomRadius;uniform float bloomFactors[NUM_MIPS];uniform vec3 bloomTintColors[NUM_MIPS];float lerpBloomFactor(const in float factor) { 	float mirrorFactor = 1.2 - factor;	return mix(factor, mirrorFactor, bloomRadius);}void main() {	gl_FragColor = bloomStrength * ( lerpBloomFactor(bloomFactors[0]) * vec4(bloomTintColors[0], 1.0) * texture2D(blurTexture1, vUv) + 									 lerpBloomFactor(bloomFactors[1]) * vec4(bloomTintColors[1], 1.0) * texture2D(blurTexture2, vUv) + 									 lerpBloomFactor(bloomFactors[2]) * vec4(bloomTintColors[2], 1.0) * texture2D(blurTexture3, vUv) + 									 lerpBloomFactor(bloomFactors[3]) * vec4(bloomTintColors[3], 1.0) * texture2D(blurTexture4, vUv) + 									 lerpBloomFactor(bloomFactors[4]) * vec4(bloomTintColors[4], 1.0) * texture2D(blurTexture5, vUv) );}"
+      vertexShader: `varying vec2 vUv;
+				void main() {
+					vUv = uv;
+					gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
+				}`,
+      fragmentShader: `varying vec2 vUv;
+				uniform sampler2D blurTexture1;
+				uniform sampler2D blurTexture2;
+				uniform sampler2D blurTexture3;
+				uniform sampler2D blurTexture4;
+				uniform sampler2D blurTexture5;
+				uniform float bloomStrength;
+				uniform float bloomRadius;
+				uniform float bloomFactors[NUM_MIPS];
+				uniform vec3 bloomTintColors[NUM_MIPS];
+
+				float lerpBloomFactor(const in float factor) {
+					float mirrorFactor = 1.2 - factor;
+					return mix(factor, mirrorFactor, bloomRadius);
+				}
+
+				void main() {
+					gl_FragColor = bloomStrength * ( lerpBloomFactor(bloomFactors[0]) * vec4(bloomTintColors[0], 1.0) * texture2D(blurTexture1, vUv) +
+						lerpBloomFactor(bloomFactors[1]) * vec4(bloomTintColors[1], 1.0) * texture2D(blurTexture2, vUv) +
+						lerpBloomFactor(bloomFactors[2]) * vec4(bloomTintColors[2], 1.0) * texture2D(blurTexture3, vUv) +
+						lerpBloomFactor(bloomFactors[3]) * vec4(bloomTintColors[3], 1.0) * texture2D(blurTexture4, vUv) +
+						lerpBloomFactor(bloomFactors[4]) * vec4(bloomTintColors[4], 1.0) * texture2D(blurTexture5, vUv) );
+				}`
     });
   }
-});
-UnrealBloomPass.BlurDirectionX = new Vector2(1, 0);
-UnrealBloomPass.BlurDirectionY = new Vector2(0, 1);
+};
+let UnrealBloomPass = _UnrealBloomPass;
+__publicField(UnrealBloomPass, "BlurDirectionX", /* @__PURE__ */ new Vector2(1, 0));
+__publicField(UnrealBloomPass, "BlurDirectionY", /* @__PURE__ */ new Vector2(0, 1));
 export {
   UnrealBloomPass
 };

package/dist/renderers/CSS2DRenderer.d.ts

@@ -1,8 +1,9 @@
-import { Object3D, Scene, Camera } from 'three'
+import { Object3D, Scene, Camera, Vector2 } from 'three'
 
 export class CSS2DObject extends Object3D {
   constructor(element: HTMLElement)
   element: HTMLElement
+  center: Vector2
 
   onBeforeRender: (renderer: unknown, scene: Scene, camera: Camera) => void
   onAfterRender: (renderer: unknown, scene: Scene, camera: Camera) => void

package/dist/renderers/CSS2DRenderer.js

@@ -9,6 +9,7 @@ class CSS2DObject extends THREE.Object3D {
     this.element.style.position = "absolute";
     this.element.style.userSelect = "none";
     this.element.setAttribute("draggable", false);
+    this.center = new THREE.Vector2(0.5, 0.5);
     this.addEventListener("removed", function() {
       this.traverse(function(object) {
         if (object.element instanceof Element && object.element.parentNode !== null) {
@@ -20,6 +21,7 @@ class CSS2DObject extends THREE.Object3D {
   copy(source, recursive) {
     super.copy(source, recursive);
     this.element = source.element.cloneNode(true);
+    this.center = source.center;
     return this;
   }
 }
@@ -46,11 +48,10 @@ class CSS2DRenderer {
       };
     };
     this.render = function(scene, camera) {
-      if (scene.matrixWorldAutoUpdate === true || scene.autoUpdate === true)
+      if (scene.matrixWorldAutoUpdate === true)
         scene.updateMatrixWorld();
-      if (camera.parent === null && (camera.matrixWorldAutoUpdate == null || camera.matrixWorldAutoUpdate === true)) {
+      if (camera.parent === null && camera.matrixWorldAutoUpdate === true)
         camera.updateMatrixWorld();
-      }
       _viewMatrix.copy(camera.matrixWorldInverse);
       _viewProjectionMatrix.multiplyMatrices(camera.projectionMatrix, _viewMatrix);
       renderObject(scene, scene, camera);
@@ -73,7 +74,7 @@ class CSS2DRenderer {
         if (visible === true) {
           object.onBeforeRender(_this, scene, camera);
           const element = object.element;
-          element.style.transform = "translate(-50%,-50%) translate(" + (_vector.x * _widthHalf + _widthHalf) + "px," + (-_vector.y * _heightHalf + _heightHalf) + "px)";
+          element.style.transform = "translate(" + -100 * object.center.x + "%," + -100 * object.center.y + "%)translate(" + (_vector.x * _widthHalf + _widthHalf) + "px," + (-_vector.y * _heightHalf + _heightHalf) + "px)";
           if (element.parentNode !== domElement) {
             domElement.appendChild(element);
           }

package/dist/renderers/CSS2DRenderer.mjs

@@ -1,4 +1,4 @@
-import { Object3D, Vector3, Matrix4 } from "three";
+import { Object3D, Vector2, Vector3, Matrix4 } from "three";
 class CSS2DObject extends Object3D {
   constructor(element = document.createElement("div")) {
     super();
@@ -7,6 +7,7 @@ class CSS2DObject extends Object3D {
     this.element.style.position = "absolute";
     this.element.style.userSelect = "none";
     this.element.setAttribute("draggable", false);
+    this.center = new Vector2(0.5, 0.5);
     this.addEventListener("removed", function() {
       this.traverse(function(object) {
         if (object.element instanceof Element && object.element.parentNode !== null) {
@@ -18,6 +19,7 @@ class CSS2DObject extends Object3D {
   copy(source, recursive) {
     super.copy(source, recursive);
     this.element = source.element.cloneNode(true);
+    this.center = source.center;
     return this;
   }
 }
@@ -44,11 +46,10 @@ class CSS2DRenderer {
       };
     };
     this.render = function(scene, camera) {
-      if (scene.matrixWorldAutoUpdate === true || scene.autoUpdate === true)
+      if (scene.matrixWorldAutoUpdate === true)
         scene.updateMatrixWorld();
-      if (camera.parent === null && (camera.matrixWorldAutoUpdate == null || camera.matrixWorldAutoUpdate === true)) {
+      if (camera.parent === null && camera.matrixWorldAutoUpdate === true)
         camera.updateMatrixWorld();
-      }
       _viewMatrix.copy(camera.matrixWorldInverse);
       _viewProjectionMatrix.multiplyMatrices(camera.projectionMatrix, _viewMatrix);
       renderObject(scene, scene, camera);
@@ -71,7 +72,7 @@ class CSS2DRenderer {
         if (visible === true) {
           object.onBeforeRender(_this, scene, camera);
           const element = object.element;
-          element.style.transform = "translate(-50%,-50%) translate(" + (_vector.x * _widthHalf + _widthHalf) + "px," + (-_vector.y * _heightHalf + _heightHalf) + "px)";
+          element.style.transform = "translate(" + -100 * object.center.x + "%," + -100 * object.center.y + "%)translate(" + (_vector.x * _widthHalf + _widthHalf) + "px," + (-_vector.y * _heightHalf + _heightHalf) + "px)";
           if (element.parentNode !== domElement) {
             domElement.appendChild(element);
           }

package/dist/renderers/CSS3DRenderer.d.ts

@@ -12,7 +12,7 @@ export class CSS3DSprite extends CSS3DObject {
   constructor(element: HTMLElement)
 }
 
-export type CSS3DParameters = {
+export interface CSS3DParameters {
   element?: HTMLElement
 }