gl-draw 0.9.0 → 0.9.2

package/dist/index.module.js

@@ -1,28 +1,28 @@
 var N = Object.defineProperty, W = Object.defineProperties;
 var _ = Object.getOwnPropertyDescriptors;
-var w = Object.getOwnPropertySymbols;
-var A = Object.prototype.hasOwnProperty, z = Object.prototype.propertyIsEnumerable;
-var B = (c, e, t) => e in c ? N(c, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : c[e] = t, C = (c, e) => {
+var E = Object.getOwnPropertySymbols;
+var A = Object.prototype.hasOwnProperty, B = Object.prototype.propertyIsEnumerable;
+var z = (l, e, t) => e in l ? N(l, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : l[e] = t, C = (l, e) => {
   for (var t in e || (e = {}))
-    A.call(e, t) && B(c, t, e[t]);
-  if (w)
-    for (var t of w(e))
-      z.call(e, t) && B(c, t, e[t]);
-  return c;
-}, S = (c, e) => W(c, _(e));
-var O = (c, e) => {
+    A.call(e, t) && z(l, t, e[t]);
+  if (E)
+    for (var t of E(e))
+      B.call(e, t) && z(l, t, e[t]);
+  return l;
+}, S = (l, e) => W(l, _(e));
+var O = (l, e) => {
   var t = {};
-  for (var s in c)
-    A.call(c, s) && e.indexOf(s) < 0 && (t[s] = c[s]);
-  if (c != null && w)
-    for (var s of w(c))
-      e.indexOf(s) < 0 && z.call(c, s) && (t[s] = c[s]);
+  for (var s in l)
+    A.call(l, s) && e.indexOf(s) < 0 && (t[s] = l[s]);
+  if (l != null && E)
+    for (var s of E(l))
+      e.indexOf(s) < 0 && B.call(l, s) && (t[s] = l[s]);
   return t;
 };
-import M from "camera-controls";
-import * as d from "three";
-import { ShaderMaterial as X, Uniform as L, REVISION as q } from "three";
-import * as T from "@tweenjs/tween.js";
+import x from "camera-controls";
+import * as h from "three";
+import { ShaderMaterial as X, Uniform as T, REVISION as q } from "three";
+import * as L from "@tweenjs/tween.js";
 import { e as j } from "./events.module.js";
 import $ from "deepmerge";
 import Y from "three/examples/jsm/libs/stats.module";
@@ -37,8 +37,8 @@ import { RectAreaLightHelper as Q } from "three/examples/jsm/helpers/RectAreaLig
 import { TransformControls as ee } from "three/examples/jsm/controls/TransformControls";
 import { CSS3DRenderer as te } from "three/examples/jsm/renderers/CSS3DRenderer";
 import { CSS2DRenderer as se } from "three/examples/jsm/renderers/CSS2DRenderer";
-import { Pass as re, BlendFunction as y, ToneMappingMode as V, EffectComposer as oe, RenderPass as ne, CopyPass as ie, FXAAEffect as ae, EffectPass as R, ToneMappingEffect as le, SelectiveBloomEffect as ce } from "postprocessing";
-import { i as de } from "./isPlainObject.module.js";
+import { Pass as re, BlendFunction as y, ToneMappingMode as I, EffectComposer as oe, RenderPass as ie, CopyPass as ne, FXAAEffect as ae, EffectPass as M, ToneMappingEffect as ce, SelectiveBloomEffect as le } from "postprocessing";
+import { i as he } from "./isPlainObject.module.js";
 import { B as $e } from "./BaseObject.module.js";
 const me = {
   antialias: !1,
@@ -53,42 +53,42 @@ const me = {
   depth: !1,
   physicallyCorrectLights: !1
 };
-class he {
+class de {
   constructor(e) {
     this.options = e;
     const { width: t, height: s, rendererParams: r } = e, {
       canvas: o,
-      context: n,
-      alpha: i,
+      context: i,
+      alpha: n,
       devicePixelRatio: a,
-      antialias: l,
+      antialias: c,
       powerPreference: m,
-      toneMappingExposure: h,
-      outputColorSpace: p,
+      toneMappingExposure: d,
+      outputColorSpace: f,
       logarithmicDepthBuffer: u,
       preserveDrawingBuffer: v,
-      stencil: f,
-      depth: b,
+      stencil: p,
+      depth: w,
       physicallyCorrectLights: P
-    } = r, g = new d.WebGLRenderer({
+    } = r, g = new h.WebGLRenderer({
       canvas: o,
-      context: n,
-      alpha: i,
-      antialias: l,
+      context: i,
+      alpha: n,
+      antialias: c,
       powerPreference: m,
       logarithmicDepthBuffer: u,
       preserveDrawingBuffer: v,
-      stencil: f,
-      depth: b
+      stencil: p,
+      depth: w
     });
-    g.setSize(t, s), g.setPixelRatio(a), g.toneMappingExposure = h, g.outputColorSpace = p, +d.REVISION < 155 && (g.useLegacyLights = P), this.renderer = g;
+    g.setSize(t, s), g.setPixelRatio(a), g.toneMappingExposure = d, g.outputColorSpace = f, +h.REVISION < 155 && (g.useLegacyLights = P), this.renderer = g;
   }
   setSize(e, t) {
     this.renderer.setSize(e, t);
   }
-  render() {
-    const { scene: e, camera: t } = this.options;
-    this.renderer.render(e, t);
+  render(e) {
+    const { scene: t, camera: s } = this.options;
+    this.renderer.render(t, e || s);
   }
   dispose() {
     var e, t;
@@ -104,41 +104,41 @@ class D {
       const s = e.addFolder(t), r = this.guiParams[t];
       Object.keys(r).forEach((o) => {
         const {
-          min: n,
-          max: i,
+          min: i,
+          max: n,
           step: a,
-          name: l,
+          name: c,
           paramMap: m,
-          items: h,
-          value: p,
+          items: d,
+          value: f,
           target: u
         } = r[o], v = o.toLowerCase().indexOf("color") > -1;
-        let f;
-        const b = typeof p == "undefined" && u, P = b ? u() : r[o], g = b ? o : "value";
-        h ? f = s.add(P, g, h) : v ? f = s.addColor(P, g) : f = s.add(P, g), f = f.name(l || o), typeof n != "undefined" && (f = f.min(n)), typeof i != "undefined" && (f = f.max(i)), typeof a != "undefined" && (f = f.step(a)), f = f.onChange(() => {
+        let p;
+        const w = typeof f == "undefined" && u, P = w ? u() : r[o], g = w ? o : "value";
+        d ? p = s.add(P, g, d) : v ? p = s.addColor(P, g) : p = s.add(P, g), p = p.name(c || o), typeof i != "undefined" && (p = p.min(i)), typeof n != "undefined" && (p = p.max(n)), typeof a != "undefined" && (p = p.step(a)), p = p.onChange(() => {
           this.setTargetValue(t, o, P[g], m);
-        }), b && f.listen();
+        }), w && p.listen();
       });
     });
   }
   setTargetValue(e, t, s, r) {
     const {
       onChange: o,
-      target: n,
-      value: i
+      target: i,
+      value: n
     } = this.guiParams[e][t], a = t.toLowerCase().indexOf("color") > -1;
-    if (n && !(typeof i == "undefined" && n)) {
-      let m = n();
-      Array.isArray(m) || (m = [m]), m.forEach((h) => {
-        if (h)
+    if (i && !(typeof n == "undefined" && i)) {
+      let m = i();
+      Array.isArray(m) || (m = [m]), m.forEach((d) => {
+        if (d)
           if (a)
             try {
-              h[r || t].set(s);
-            } catch (p) {
+              d[r || t].set(s);
+            } catch (f) {
               t !== "color" && !r && console.warn(`${t} is not a color,set paramMap`);
             }
           else
-            h[r || t] = s;
+            d[r || t] = s;
       });
     }
     o && o(s);
@@ -152,30 +152,39 @@ class D {
     });
   }
 }
-const fe = {
+const pe = {
   fov: 45,
   near: 1,
   far: 1e3,
-  up: new d.Vector3(0, 1, 0)
+  up: new h.Vector3(0, 1, 0)
 };
-class pe {
+class fe {
   constructor(e) {
     this.customCamera = !1, this.options = e;
     const { width: t, height: s, cameraParams: r } = e;
-    if (r instanceof d.Camera)
+    if (r instanceof h.Camera)
       this.camera = r, this.customCamera = !0;
     else {
-      const { fov: o, far: n, near: i, up: a } = r, l = new d.PerspectiveCamera(
+      const { fov: o, far: i, near: n, up: a } = r, c = new h.PerspectiveCamera(
         o,
         t / s,
-        i,
-        n
+        n,
+        i
       );
-      l.position.set(0, 0, 400), l.lookAt(0, 0, 0), l.up = a, this.camera = l;
+      c.position.set(0, 0, 400), c.lookAt(0, 0, 0), c.up = a, this.camera = c;
     }
   }
   setSize(e, t) {
-    this.camera instanceof d.PerspectiveCamera && (this.camera.aspect = e / t), this.camera.updateProjectionMatrix();
+    this.camera instanceof h.PerspectiveCamera && (this.camera.aspect = e / t), this.camera.updateProjectionMatrix(), this.camera2 && (this.camera2.aspect = e / t, this.camera2.updateProjectionMatrix());
+  }
+  addCamera2() {
+    const e = new h.PerspectiveCamera(
+      this.camera.fov,
+      this.camera.aspect,
+      this.camera.near,
+      this.camera.far
+    );
+    return e.position.copy(this.camera.position), this.camera2 = e, e;
   }
   setGui(e) {
     const t = new D({
@@ -219,7 +228,7 @@ class pe {
         }
       })
     });
-    this.camera instanceof d.PerspectiveCamera && (t.guiParams.camera.fov = {
+    this.camera instanceof h.PerspectiveCamera && (t.guiParams.camera.fov = {
       min: 0,
       max: 90,
       step: 1,
@@ -237,19 +246,19 @@ const ue = {
 class ge {
   constructor(e) {
     this.overrideMaterial = !1, this.options = e;
-    const { camera: t, sceneParams: s } = e, { background: r, om: o } = s, n = o ? new d.Scene() : new Proxy(new d.Scene(), {
-      set: (i, a, l) => Reflect.set(i, a, l),
-      get: (i, a) => {
+    const { camera: t, sceneParams: s } = e, { background: r, om: o } = s, i = o ? new h.Scene() : new Proxy(new h.Scene(), {
+      set: (n, a, c) => Reflect.set(n, a, c),
+      get: (n, a) => {
         if (a === "overrideMaterial") {
-          const l = Reflect.get(i, a);
-          return this.overrideMaterial = !!l, F.forEach((m) => {
+          const c = Reflect.get(n, a);
+          return this.overrideMaterial = !!c, F.forEach((m) => {
             this.overrideMaterial ? m.useDepth = 1 : m.useDepth = 0;
           }), null;
         }
-        return Reflect.get(i, a);
+        return Reflect.get(n, a);
       }
     });
-    r && (n.background = r), n.add(t), this.scene = n;
+    r && (i.background = r), i.add(t), this.scene = i;
   }
   dispose() {
     var e;
@@ -267,25 +276,25 @@ class Ce {
     let r = this.helpers[t];
     if (r === void 0) {
       if (e.isScene)
-        r = new d.AxesHelper(100);
+        r = new h.AxesHelper(100);
       else if (e.isCamera)
-        r = new d.CameraHelper(e);
+        r = new h.CameraHelper(e);
       else if (e.isPointLight)
-        r = new d.PointLightHelper(e, 1);
+        r = new h.PointLightHelper(e, 1);
       else if (e.isDirectionalLight)
-        r = new d.DirectionalLightHelper(e, 1);
+        r = new h.DirectionalLightHelper(e, 1);
       else if (e.isSpotLight)
-        r = new d.SpotLightHelper(e);
+        r = new h.SpotLightHelper(e);
       else if (e.isHemisphereLight)
-        r = new d.HemisphereLightHelper(e, 10);
+        r = new h.HemisphereLightHelper(e, 10);
       else if (e.isRectAreaLight)
         r = new Q(e);
       else {
-        const o = new d.Box3();
+        const o = new h.Box3();
         if (o.setFromObject(e, !0), o.isEmpty() === !1) {
-          r = new d.Box3Helper(o);
-          const n = r.material;
-          n.userData.object = e, n.depthTest = !1, n.transparent = !0;
+          r = new h.Box3Helper(o);
+          const i = r.material;
+          i.userData.object = e, i.depthTest = !1, i.transparent = !0;
         } else
           return;
       }
@@ -296,7 +305,7 @@ class Ce {
     const t = e.uuid, { scene: s } = this.options;
     if (this.helpers[t] !== void 0) {
       const r = this.helpers[t];
-      s.remove(r), delete this.helpers[t], r instanceof d.Box3Helper && r.dispose();
+      s.remove(r), delete this.helpers[t], r instanceof h.Box3Helper && r.dispose();
     }
   }
   removeAll() {
@@ -308,14 +317,14 @@ class Ce {
   }
   removeAllExcludeScene() {
     Object.keys(this.helpers).forEach((e) => {
-      this.helpers[e] instanceof d.AxesHelper || this.remove({
+      this.helpers[e] instanceof h.AxesHelper || this.remove({
         uuid: e
       });
     });
   }
   update() {
     Object.values(this.helpers).forEach((e) => {
-      if (e.update && e.update(), e instanceof d.Box3Helper) {
+      if (e.update && e.update(), e instanceof h.Box3Helper) {
         const t = e.material, { object: s } = t.userData;
         s && e.box.setFromObject(s, !0);
       }
@@ -330,10 +339,14 @@ class ve {
     this.autoRotateSpeed = 0, this.options = e;
     const { camera: t, controlsParams: s, customControl: r } = e, { domElement: o } = s;
     if (r) {
-      const n = new r(t, o);
-      n.enableDamping = !0, n.dampingFactor = 0.063, n.autoRotate = !1, n.autoRotateSpeed = -60, n.enableZoom = !0, n.zoomSpeed = 0.2, this.controls = n;
+      const i = new r(t, o);
+      i.enableDamping = !0, i.dampingFactor = 0.063, i.autoRotate = !1, i.autoRotateSpeed = -60, i.enableZoom = !0, i.zoomSpeed = 0.2, this.controls = i;
     } else
-      M.install({ THREE: d }), this.cameraControls = new M(t, o);
+      x.install({ THREE: h }), this.cameraControls = new x(t, o);
+  }
+  addCameraControls2(e) {
+    const { controlsParams: t } = this.options, { domElement: s } = t;
+    this.cameraControls2 = new x(e, s);
   }
   enable() {
     this.controls ? this.controls.enabled = !0 : this.cameraControls && (this.cameraControls.enabled = !0);
@@ -342,12 +355,12 @@ class ve {
     this.controls ? this.controls.enabled = !1 : this.cameraControls && (this.cameraControls.enabled = !1);
   }
   update(e) {
-    var t, s;
-    (t = this.controls) == null || t.update(), (s = this.cameraControls) == null || s.update(e), this.autoRotateSpeed && this.cameraControls && (this.cameraControls.azimuthAngle += this.autoRotateSpeed * e * d.MathUtils.DEG2RAD);
+    var t, s, r;
+    (t = this.controls) == null || t.update(), (s = this.cameraControls) == null || s.update(e), (r = this.cameraControls2) == null || r.update(e), this.autoRotateSpeed && this.cameraControls && (this.cameraControls.azimuthAngle += this.autoRotateSpeed * e * h.MathUtils.DEG2RAD);
   }
   dispose() {
-    var e, t;
-    (e = this.controls) == null || e.dispose(), (t = this.cameraControls) == null || t.dispose();
+    var e, t, s;
+    (e = this.controls) == null || e.dispose(), (t = this.cameraControls) == null || t.dispose(), (s = this.cameraControls2) == null || s.dispose();
   }
 }
 class Pe {
@@ -406,16 +419,16 @@ class Pe {
     this.event.removeAllListeners(), (e = this.controls) == null || e.dispose();
   }
 }
-const G = {
+const V = {
   zIndex: "auto"
 };
-class be {
+class we {
   constructor(e) {
     this.container = e;
   }
   addRenderer(e, t) {
-    const s = t.container || this.container, r = s.offsetWidth, o = s.offsetHeight, n = e === "css2d" ? new se() : new te();
-    n.domElement.style.position = "absolute", n.domElement.style.top = "0", n.domElement.style.pointerEvents = "none", n.domElement.style.zIndex = t.zIndex, n.setSize(r, o), s.appendChild(n.domElement), e === "css2d" ? this.css2Drenderer = n : e === "css3d" && (this.css3Drenderer = n);
+    const s = t.container || this.container, r = s.offsetWidth, o = s.offsetHeight, i = e === "css2d" ? new se() : new te();
+    i.domElement.style.position = "absolute", i.domElement.style.top = "0", i.domElement.style.pointerEvents = "none", i.domElement.style.zIndex = t.zIndex, i.setSize(r, o), s.appendChild(i.domElement), e === "css2d" ? this.css2Drenderer = i : e === "css3d" && (this.css3Drenderer = i);
   }
   setSize(e, t) {
     var s, r;
@@ -426,16 +439,17 @@ class be {
     (s = this.css2Drenderer) == null || s.render(e, t), (r = this.css3Drenderer) == null || r.render(e, t);
   }
   dispose() {
-    this.css2Drenderer = void 0, this.css3Drenderer = void 0;
+    var e, t;
+    (e = this.css2Drenderer) == null || e.domElement.remove(), (t = this.css3Drenderer) == null || t.domElement.remove(), this.css2Drenderer = void 0, this.css3Drenderer = void 0;
   }
 }
-const H = ["encodings_fragment", "colorspace_fragment"];
-class Ee extends X {
+const G = ["encodings_fragment", "colorspace_fragment"];
+class be extends X {
   constructor() {
     super({
       uniforms: {
-        inputBuffer: new L(null),
-        ratio: new L(1)
+        inputBuffer: new T(null),
+        ratio: new T(1)
       },
       fragmentShader: `
         uniform sampler2D inputBuffer;
@@ -445,7 +459,7 @@ class Ee extends X {
           vec4 texel = texture2D(inputBuffer, vUv);
           gl_FragColor = texel * ratio;
           // Support automatic output encoding.
-          #include <${+q < 154 ? H[0] : H[1]}>
+          #include <${+q < 154 ? G[0] : G[1]}>
 
         }
       `,
@@ -462,9 +476,9 @@ class Ee extends X {
     });
   }
 }
-class we extends re {
+class Ee extends re {
   constructor() {
-    super("CrossFadePass"), this.fullscreenMaterial = new Ee();
+    super("CrossFadePass"), this.fullscreenMaterial = new be();
   }
   render(e, t, s) {
     const r = this.fullscreenMaterial;
@@ -482,7 +496,7 @@ const U = {
   ignoreBackground: !0,
   epsilon: 1e-3
 }, Se = {
-  mode: V.REINHARD2_ADAPTIVE,
+  mode: I.REINHARD2_ADAPTIVE,
   resolution: 256,
   whitePoint: 16,
   middleGrey: 0.6,
@@ -493,38 +507,45 @@ const U = {
 class xe {
   constructor(e) {
     this.active = !0, this.options = e;
-    const { renderer: t, scene: s, camera: r, composerParams: o } = e, { multisampling: n, frameBufferType: i } = o, { maxSamples: a } = t.capabilities, l = new oe(t, {
-      multisampling: Math.min(n, a),
+    const { renderer: t, scene: s, camera: r } = e;
+    this.finalComposer = this.addFinalComposer(r), this.renderer = t, this.scene = s, this.camera = r;
+  }
+  addFinalComposer(e) {
+    const { renderer: t, scene: s, composerParams: r } = this.options, { multisampling: o, frameBufferType: i } = r, { maxSamples: n } = t.capabilities, a = new oe(t, {
+      multisampling: Math.min(o, n),
       frameBufferType: i
     });
-    l.addPass(new ne(s, r)), this.finalComposer = l, this.renderer = t, this.scene = s, this.camera = r;
+    return a.addPass(new ie(s, e)), a;
+  }
+  addFinalComposer2(e) {
+    const t = this.addFinalComposer(e);
+    this.finalComposer2 = t;
   }
   addCopyPass() {
-    const e = new ie();
+    const e = new ne();
     this.finalComposer.addPass(e), this.copyPass = e;
   }
   addCrossFadePass() {
-    const e = new we();
+    const e = new Ee();
     this.finalComposer.addPass(e), this.crossFadePass = e;
   }
   addFXAAPass() {
-    const { camera: e } = this, t = new ae({ blendFunction: y.NORMAL }), s = new R(e, t);
+    const { camera: e } = this, t = new ae({ blendFunction: y.NORMAL }), s = new M(e, t);
     this.finalComposer.addPass(s), this.fxaaPass = s;
   }
   addToneMappingPass(e) {
-    const { camera: t } = this, s = new le(C({}, e));
+    const { camera: t } = this, s = new ce(C({}, e));
     this.toneMappingEffect = s;
-    const r = new R(t, s);
+    const r = new M(t, s);
     this.finalComposer.addPass(r), this.toneMappingPass = r;
   }
   addToneMappingGui(e) {
-    if (!this.toneMappingEffect)
-      return;
+    if (!this.toneMappingEffect) return;
     new D({
       toneMapping: {
         blendFunction: {
           value: this.toneMappingEffect.mode,
-          items: V,
+          items: I,
           onChange: (s) => {
             this.toneMappingEffect.mode = Number(s);
           }
@@ -562,14 +583,13 @@ class xe {
     }).showGui(e);
   }
   addBloomPass(e) {
-    const { camera: t, scene: s } = this, m = C(C({}, U), e), { epsilon: r, ignoreBackground: o, mipmapBlurPassRadius: n } = m, i = O(m, ["epsilon", "ignoreBackground", "mipmapBlurPassRadius"]), a = new ce(s, t, C({}, i));
-    o && (a.ignoreBackground = o), n && (a.mipmapBlurPass.radius = n), a.depthMaskMaterial.epsilon = r, a.luminancePass.enabled = !1, a.luminancePass.enabled = e.luminancePass;
-    const l = new R(t, a);
-    this.finalComposer.addPass(l), this.bloomPass = l, this.bloomEffect = a;
+    const { camera: t, scene: s } = this, m = C(C({}, U), e), { epsilon: r, ignoreBackground: o, mipmapBlurPassRadius: i } = m, n = O(m, ["epsilon", "ignoreBackground", "mipmapBlurPassRadius"]), a = new le(s, t, C({}, n));
+    o && (a.ignoreBackground = o), i && (a.mipmapBlurPass.radius = i), a.depthMaskMaterial.epsilon = r, a.luminancePass.enabled = !1, a.luminancePass.enabled = e.luminancePass;
+    const c = new M(t, a);
+    this.finalComposer.addPass(c), this.bloomPass = c, this.bloomEffect = a;
   }
   addBloomGui(e) {
-    if (!this.bloomEffect)
-      return;
+    if (!this.bloomEffect) return;
     new D({
       bloom: {
         intensity: {
@@ -637,7 +657,7 @@ class xe {
   }
   getSize() {
     const { renderer: e } = this.options;
-    return e.getSize(new d.Vector2());
+    return e.getSize(new h.Vector2());
   }
   enable() {
     this.active || (this.active = !0);
@@ -646,43 +666,49 @@ class xe {
     this.active && (this.active = !1);
   }
   setSize(e, t) {
-    this.finalComposer.setSize(e, t);
+    var s;
+    this.finalComposer.setSize(e, t), (s = this.finalComposer2) == null || s.setSize(e, t);
   }
   render() {
     this.active && this.finalComposer.render();
   }
+  render2() {
+    var e;
+    this.active && ((e = this.finalComposer2) == null || e.render());
+  }
   dispose() {
-    this.finalComposer.dispose();
+    var e;
+    this.finalComposer.dispose(), (e = this.finalComposer2) == null || e.dispose();
   }
 }
 const Re = () => {
   try {
-    const c = document.createElement("canvas");
-    return !!(window.WebGL2RenderingContext && c.getContext("webgl2"));
-  } catch (c) {
+    const l = document.createElement("canvas");
+    return !!(window.WebGL2RenderingContext && l.getContext("webgl2"));
+  } catch (l) {
     return !1;
   }
-}, E = !1, k = Re() !== !1, x = class x {
+}, b = !1, H = Re() !== !1, R = class R {
   constructor(e, t) {
-    this.raycaster = new d.Raycaster(), this.installPlugins = /* @__PURE__ */ new Map(), this.event = new j.EventEmitter(), this.clock = new d.Clock(), this.userData = {}, this.options = $(x.options, e, {
-      isMergeableObject: de
+    this.raycaster = new h.Raycaster(), this.installPlugins = /* @__PURE__ */ new Map(), this.event = new j.EventEmitter(), this.clock = new h.Clock(), this.userData = {}, this.mulitViewport = !1, this.options = $(R.options, e, {
+      isMergeableObject: he
     }), this.event.setMaxListeners(1 / 0);
     const {
       container: s,
       stats: r,
       gui: o,
-      resizeObserver: n
+      resizeObserver: i
     } = this.options;
     if (o) {
-      const i = new Z();
-      i.open(!1), this.gui = i;
+      const n = new Z();
+      n.open(!1), this.gui = n;
     }
     if (r) {
-      const i = new Y();
-      i.showPanel(0), i.dom.style.position = "absolute", s.appendChild(i.dom), this.stats = i;
+      const n = new Y();
+      n.showPanel(0), n.dom.style.position = "absolute", s.appendChild(n.dom), this.stats = n;
     }
-    this.init(), this.initComposer(), this.initCSSRenderer(), this.initControls(), n && this.initResizeObserver(), this.clock.getDelta(), this.clock.getElapsedTime(), t && (Array.isArray(t) || (t = [t]), t.forEach((i) => {
-      Array.isArray(i) || (i = [i]), this.use(i[0], i[1]);
+    this.init(), this.initComposer(), this.initCSSRenderer(), this.initControls(), i && this.initResizeObserver(), this.clock.getDelta(), this.clock.getElapsedTime(), t && (Array.isArray(t) || (t = [t]), t.forEach((n) => {
+      Array.isArray(n) || (n = [n]), this.use(n[0], n[1]);
     }));
   }
   getPlugin(e) {
@@ -695,10 +721,10 @@ const Re = () => {
     return this.controlsController.cameraControls;
   }
   get cameraPositon() {
-    return this.cameraControls.getPosition(new d.Vector3(), !1);
+    return this.cameraControls.getPosition(new h.Vector3(), !1);
   }
   get cameraTarget() {
-    return this.cameraControls.getTarget(new d.Vector3(), !1);
+    return this.cameraControls.getTarget(new h.Vector3(), !1);
   }
   get camera() {
     return this.cameraController.camera;
@@ -716,36 +742,36 @@ const Re = () => {
       helper: s,
       renderer: r,
       scene: o,
-      camera: n,
-      control: i
-    } = this.options, { width: a, height: l } = this.getSize(), m = new pe({
+      camera: i,
+      control: n
+    } = this.options, { width: a, height: c } = this.getSize(), m = new fe({
       isdev: t,
       width: a,
-      height: l,
-      cameraParams: n,
-      cameraControls: i === !0
+      height: c,
+      cameraParams: i,
+      cameraControls: n === !0
     });
     this.gui && m.setGui(this.gui);
-    const h = m.camera, p = new ge({
-      camera: h,
+    const d = m.camera, f = new ge({
+      camera: d,
       sceneParams: o
-    }), u = p.scene, v = new he({
+    }), u = f.scene, v = new de({
       width: a,
-      height: l,
+      height: c,
       scene: u,
-      camera: h,
+      camera: d,
       isdev: t,
       rendererParams: S(C({}, r), {
         antialias: !1
       })
     });
     if (s) {
-      const f = new Ce({
+      const p = new Ce({
         scene: u
       });
-      f.add(u), this.helperController = f;
+      p.add(u), this.helperController = p;
     }
-    this.sceneController = p, this.rendererController = v, this.cameraController = m, e.appendChild(v.renderer.domElement);
+    this.sceneController = f, this.rendererController = v, this.cameraController = m, e.appendChild(v.renderer.domElement);
   }
   initComposer() {
     const {
@@ -754,25 +780,25 @@ const Re = () => {
       toneMapping: s,
       toneMappingParams: r,
       crossOpacity: o,
-      renderer: n,
-      multisampling: i,
+      renderer: i,
+      multisampling: n,
       frameBufferType: a,
-      passes: l
+      passes: c
     } = this.options;
-    let { antialias: m } = n;
-    m === "msaa" && !k && (m = !1, console.warn("MSAA is not supported on this browser"));
-    const h = new xe({
+    let { antialias: m } = i;
+    m === "msaa" && !H && (m = !1, console.warn("MSAA is not supported on this browser"));
+    const d = new xe({
       renderer: this.renderer,
       scene: this.scene,
       camera: this.camera,
       composerParams: {
-        multisampling: m === "msaa" ? i : 0,
-        frameBufferType: s ? d.HalfFloatType : a
+        multisampling: m === "msaa" ? n : 0,
+        frameBufferType: s ? h.HalfFloatType : a
       }
     });
-    this.composerController = h, e && (h.addBloomPass(t), this.gui && h.addBloomGui(this.gui)), s && (h.addToneMappingPass(r), this.gui && h.addToneMappingGui(this.gui)), m === "fxaa" && h.addFXAAPass(), o && h.addCrossFadePass(), l && l.forEach((p) => {
-      h.finalComposer.addPass(p);
-    }), h.finalComposer.passes.length === 1 && h.addCopyPass();
+    this.composerController = d, e && (d.addBloomPass(t), this.gui && d.addBloomGui(this.gui)), s && (d.addToneMappingPass(r), this.gui && d.addToneMappingGui(this.gui)), m === "fxaa" && d.addFXAAPass(), o && d.addCrossFadePass(), c && c.forEach((f) => {
+      d.finalComposer.addPass(f);
+    }), d.finalComposer.passes.length === 1 && d.addCopyPass();
   }
   get opacity() {
     const { crossFadePass: e } = this.composerController;
@@ -795,8 +821,8 @@ const Re = () => {
       css3DRendererParams: o
     } = this.options;
     if (t || s) {
-      const n = new be(e);
-      t && n.addRenderer("css2d", r), s && n.addRenderer("css3d", o), this.cssRendererController = n;
+      const i = new we(e);
+      t && i.addRenderer("css2d", r), s && i.addRenderer("css3d", o), this.cssRendererController = i;
     }
   }
   initControls() {
@@ -839,8 +865,7 @@ const Re = () => {
   }
   initResizeObserver() {
     const { container: e } = this.options;
-    if (this.resizeObserver)
-      return;
+    if (this.resizeObserver) return;
     const t = new ResizeObserver((s) => {
       for (const r of s) {
         const o = r.contentRect;
@@ -853,36 +878,36 @@ const Re = () => {
     const {
       rendererController: r,
       cameraController: o,
-      composerController: n,
-      cssRendererController: i
+      composerController: i,
+      cssRendererController: n
     } = this;
-    o == null || o.setSize(e, t), r == null || r.setSize(e, t), n == null || n.setSize(e, t), i == null || i.setSize(e, t), this.installPlugins.forEach((a) => {
-      var l;
-      (l = a.setSize) == null || l.call(a, e, t);
+    o == null || o.setSize(e, t), r == null || r.setSize(e, t), i == null || i.setSize(e, t), n == null || n.setSize(e, t), this.installPlugins.forEach((a) => {
+      var c;
+      (c = a.setSize) == null || c.call(a, e, t);
     }), s && this.event.emit("resize", { width: e, height: t });
   }
   pick(e, t, s = !1) {
-    const { raycaster: r, options: o } = this, { container: n } = o, i = new d.Vector2(), a = n.getBoundingClientRect();
-    if (i.x = (e.clientX - a.left) / (a.right - a.left) * 2 - 1, i.y = -((e.clientY - a.top) / (a.bottom - a.top)) * 2 + 1, this.camera && this.scene) {
-      r.setFromCamera(i, this.camera);
-      const l = r.intersectObjects(
+    const { raycaster: r, options: o } = this, { container: i } = o, n = new h.Vector2(), a = i.getBoundingClientRect();
+    if (n.x = (e.clientX - a.left) / (a.right - a.left) * 2 - 1, n.y = -((e.clientY - a.top) / (a.bottom - a.top)) * 2 + 1, this.camera && this.scene) {
+      r.setFromCamera(n, this.camera);
+      const c = r.intersectObjects(
         t || this.scene.children,
         s
       );
-      if (l.length)
+      if (c.length)
         return {
-          object: l[0].object,
-          intersects: l
+          object: c[0].object,
+          intersects: c
         };
     }
   }
   render() {
-    var n, i, a, l, m, h;
+    var i, n, a, c, m, d;
     const { scene: e, camera: t, clock: s } = this, r = s.getDelta(), o = s.getElapsedTime();
-    T.update(), (n = this.controlsController) == null || n.update(r), this.installPlugins.forEach((p) => {
+    L.update(), (i = this.controlsController) == null || i.update(r), this.installPlugins.forEach((f) => {
       var u;
-      (u = p.update) == null || u.call(p, r, o);
-    }), (i = this.helperController) == null || i.update(), (a = this.composerController) != null && a.active ? this.composerController.render() : (l = this.rendererController) == null || l.render(), (m = this.cssRendererController) == null || m.render(e, t), (h = this.stats) == null || h.update(), this.event.emit("render", { delta: r, elapsed: o });
+      (u = f.update) == null || u.call(f, r, o);
+    }), (n = this.helperController) == null || n.update(), (a = this.composerController) != null && a.active ? this.mulitViewport ? (this.setViewportLeft(), this.composerController.render(), this.setViewportRight(), this.composerController.render2()) : this.composerController.render() : (c = this.rendererController) == null || c.render(), (m = this.cssRendererController) == null || m.render(e, t), (d = this.stats) == null || d.update(), this.event.emit("render", { delta: r, elapsed: o });
   }
   start() {
     this.renderer.setAnimationLoop(this.render.bind(this)), this.event.emit("start");
@@ -893,45 +918,81 @@ const Re = () => {
   autoRotate(e) {
     this.controlsController.autoRotateSpeed = e;
   }
+  setMulitViewport(e) {
+    if (this.mulitViewport = e, e) {
+      if (!this.controlsController.cameraControls2) {
+        const t = this.cameraController.addCamera2();
+        this.composerController.addFinalComposer2(t), this.controlsController.addCameraControls2(t);
+      }
+      this.controlsController.cameraControls.interactiveArea = new DOMRect(
+        0,
+        0,
+        0.5,
+        1
+      ), this.controlsController.cameraControls2.interactiveArea = new DOMRect(
+        0.5,
+        0,
+        0.5,
+        1
+      );
+    } else e || (this.controlsController.cameraControls2 && (this.controlsController.cameraControls2.interactiveArea = new DOMRect(
+      0,
+      0,
+      1,
+      1
+    )), this.setViewportFull());
+  }
+  setViewportFull() {
+    const e = this.getSize(), t = 0, s = 0, r = e.width, o = e.height, i = r / o;
+    this.camera.aspect !== i && (this.camera.aspect = i, this.camera.updateProjectionMatrix()), this.renderer.setViewport(t, s, r, o), this.renderer.setScissor(t, s, r, o), this.renderer.setScissorTest(!0);
+  }
+  setViewportLeft() {
+    const e = this.getSize(), t = 0, s = 0, r = e.width / 2, o = e.height, i = r / o;
+    this.camera.aspect !== i && (this.camera.aspect = i, this.camera.updateProjectionMatrix()), this.renderer.setViewport(t, s, r, o), this.renderer.setScissor(t, s, r, o), this.renderer.setScissorTest(!0);
+  }
+  setViewportRight() {
+    const e = this.getSize(), t = e.width / 2, s = 0, r = e.width / 2, o = e.height, i = r / o, n = this.cameraController.camera2;
+    n && n.aspect !== i && (n.aspect = i, n.updateProjectionMatrix()), this.renderer.setViewport(t, s, r, o), this.renderer.setScissor(t, s, r, o), this.renderer.setScissorTest(!0);
+  }
   dispose() {
-    var e, t, s, r, o, n, i, a, l, m, h;
-    this.stop(), T.removeAll(), this.event.removeAllListeners(), (e = this.resizeObserver) == null || e.unobserve(this.options.container), this.handeleResize(0, 0), this.installPlugins.forEach((p) => {
+    var e, t, s, r, o, i, n, a, c, m, d;
+    this.stop(), L.removeAll(), this.event.removeAllListeners(), (e = this.resizeObserver) == null || e.unobserve(this.options.container), this.handeleResize(0, 0), this.installPlugins.forEach((f) => {
       var u;
-      (u = p.dispose) == null || u.call(p);
-    }), (t = this.controlsController) == null || t.dispose(), (s = this.transformController) == null || s.dispose(), (r = this.cssRendererController) == null || r.dispose(), (o = this.sceneController) == null || o.dispose(), (n = this.helperController) == null || n.dispose(), (i = this.composerController) == null || i.dispose(), (a = this.rendererController) == null || a.dispose(), this.cssRendererController = void 0, (l = this.gui) == null || l.destroy(), this.installPlugins.clear(), (m = this.stats) == null || m.dom.remove(), (h = this.renderer) == null || h.domElement.remove();
+      (u = f.dispose) == null || u.call(f);
+    }), (t = this.controlsController) == null || t.dispose(), (s = this.transformController) == null || s.dispose(), (r = this.cssRendererController) == null || r.dispose(), (o = this.sceneController) == null || o.dispose(), (i = this.helperController) == null || i.dispose(), (n = this.composerController) == null || n.dispose(), (a = this.rendererController) == null || a.dispose(), this.cssRendererController = void 0, (c = this.gui) == null || c.destroy(), this.installPlugins.clear(), (m = this.stats) == null || m.dom.remove(), (d = this.renderer) == null || d.domElement.remove();
   }
 };
-x.options = {
-  isdev: E,
-  stats: E,
-  gui: E,
-  helper: E,
+R.options = {
+  isdev: b,
+  stats: b,
+  gui: b,
+  helper: b,
   control: !0,
-  transformControls: E,
+  transformControls: b,
   resizeObserver: !0,
   renderer: S(C({}, me), {
-    antialias: k ? "msaa" : "fxaa"
+    antialias: H ? "msaa" : "fxaa"
   }),
   multisampling: 4,
-  frameBufferType: d.UnsignedByteType,
+  frameBufferType: h.UnsignedByteType,
   scene: ue,
-  camera: fe,
+  camera: pe,
   bloom: !1,
   bloomParams: U,
   toneMapping: !1,
   toneMappingParams: Se,
   crossOpacity: !1,
   css2DRenderer: !1,
-  css2DRendererParams: C({}, G),
+  css2DRendererParams: C({}, V),
   css3DRenderer: !1,
-  css3DRendererParams: C({}, G)
+  css3DRendererParams: C({}, V)
 };
-let I = x;
-const _e = M.ACTION;
+let k = R;
+const _e = x.ACTION;
 export {
   $e as BaseObject,
   D as GUIObject,
-  I as Pencil,
+  k as Pencil,
   _e as cameraControlsAction,
-  I as default
+  k as default
 };