gl-draw 0.9.1 → 0.9.2

package/dist/core/Camera.d.ts

@@ -22,9 +22,11 @@ interface Options {
 export default class {
     options: Options;
     camera: THREE.PerspectiveCamera;
+    camera2?: THREE.PerspectiveCamera;
     customCamera: boolean;
     constructor(options: Options);
     setSize(width: number, height: number): void;
+    addCamera2(): THREE.PerspectiveCamera;
     setGui(gui: GUI): void;
 }
 export {};

package/dist/core/Composer.d.ts

@@ -57,6 +57,7 @@ export default class {
     scene: THREE.Scene;
     camera: THREE.Camera;
     finalComposer: EffectComposer;
+    finalComposer2?: EffectComposer;
     copyPass: CopyPass;
     fxaaPass?: EffectPass;
     bloomPass?: EffectPass;
@@ -67,6 +68,8 @@ export default class {
     options: Options;
     active: boolean;
     constructor(options: Options);
+    addFinalComposer(c: THREE.Camera): EffectComposer;
+    addFinalComposer2(c: THREE.Camera): void;
     addCopyPass(): void;
     addCrossFadePass(): void;
     addFXAAPass(): void;
@@ -80,6 +83,7 @@ export default class {
     disable(): void;
     setSize(width: number, height: number): void;
     render(): void;
+    render2(): void;
     dispose(): void;
 }
 export {};

package/dist/core/Controls.d.ts

@@ -13,8 +13,10 @@ export default class {
     options: Options;
     controls?: any;
     cameraControls: CameraControls;
+    cameraControls2?: CameraControls;
     autoRotateSpeed: number;
     constructor(options: Options);
+    addCameraControls2(c: THREE.PerspectiveCamera): void;
     enable(): void;
     disable(): void;
     update(delta: number): void;

package/dist/core/Pencil.d.ts

@@ -162,6 +162,11 @@ export default class Pencil {
     start(): void;
     stop(): void;
     autoRotate(speed: number): void;
+    mulitViewport: boolean;
+    setMulitViewport(state: boolean): void;
+    private setViewportFull;
+    private setViewportLeft;
+    private setViewportRight;
     dispose(): void;
 }
 export {};

package/dist/core/Renderer.d.ts

@@ -41,7 +41,7 @@ export default class {
     options: Options;
     constructor(options: Options);
     setSize(width: number, height: number): void;
-    render(): void;
+    render(c?: THREE.Camera): void;
     dispose(): void;
 }
 export {};

package/dist/index.js

@@ -1,4 +1,4 @@
-"use strict";var U=Object.defineProperty,V=Object.defineProperties;var N=Object.getOwnPropertyDescriptors;var R=Object.getOwnPropertySymbols;var A=Object.prototype.hasOwnProperty,T=Object.prototype.propertyIsEnumerable;var O=(c,e,t)=>e in c?U(c,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):c[e]=t,v=(c,e)=>{for(var t in e||(e={}))A.call(e,t)&&O(c,t,e[t]);if(R)for(var t of R(e))T.call(e,t)&&O(c,t,e[t]);return c},M=(c,e)=>V(c,N(e));var z=(c,e)=>{var t={};for(var s in c)A.call(c,s)&&e.indexOf(s)<0&&(t[s]=c[s]);if(c!=null&&R)for(var s of R(c))e.indexOf(s)<0&&T.call(c,s)&&(t[s]=c[s]);return t};Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const B=require("camera-controls"),S=require("three"),_=require("@tweenjs/tween.js"),H=require("./events.js"),W=require("deepmerge"),X=require("three/examples/jsm/libs/stats.module"),$=require("lil-gui"),Y=require("./colorCorrection.js"),Z=require("./disposeMesh.js");require("idb-keyval");require("esus-lite");require("d3-geo");const L=require("./MeshLineMaterial.js"),J=require("three/examples/jsm/helpers/RectAreaLightHelper"),K=require("three/examples/jsm/controls/TransformControls"),Q=require("three/examples/jsm/renderers/CSS3DRenderer"),ee=require("three/examples/jsm/renderers/CSS2DRenderer"),p=require("postprocessing"),te=require("./isPlainObject.js"),se=require("./BaseObject.js");function k(c){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(c){for(const t in c)if(t!=="default"){const s=Object.getOwnPropertyDescriptor(c,t);Object.defineProperty(e,t,s.get?s:{enumerable:!0,get:()=>c[t]})}}return e.default=c,Object.freeze(e)}const d=k(S),F=k(_),re={antialias:!1,devicePixelRatio:window.devicePixelRatio,powerPreference:"high-performance",toneMappingExposure:1,alpha:!1,outputColorSpace:Y.ColorSpace.sRGB,logarithmicDepthBuffer:!1,preserveDrawingBuffer:!1,stencil:!1,depth:!1,physicallyCorrectLights:!1};class oe{constructor(e){this.options=e;const{width:t,height:s,rendererParams:r}=e,{canvas:o,context:n,alpha:i,devicePixelRatio:a,antialias:l,powerPreference:h,toneMappingExposure:m,outputColorSpace:u,logarithmicDepthBuffer:g,preserveDrawingBuffer:P,stencil:f,depth:E,physicallyCorrectLights:b}=r,C=new d.WebGLRenderer({canvas:o,context:n,alpha:i,antialias:l,powerPreference:h,logarithmicDepthBuffer:g,preserveDrawingBuffer:P,stencil:f,depth:E});C.setSize(t,s),C.setPixelRatio(a),C.toneMappingExposure=m,C.outputColorSpace=u,+d.REVISION<155&&(C.useLegacyLights=b),this.renderer=C}setSize(e,t){this.renderer.setSize(e,t)}render(){const{scene:e,camera:t}=this.options;this.renderer.render(e,t)}dispose(){var e,t;(e=this.renderer)==null||e.clear(),(t=this.renderer)==null||t.dispose()}}class x{constructor(e){this.guiParams={},e&&(this.guiParams=e)}showGui(e){e&&Object.keys(this.guiParams).forEach(t=>{const s=e.addFolder(t),r=this.guiParams[t];Object.keys(r).forEach(o=>{const{min:n,max:i,step:a,name:l,paramMap:h,items:m,value:u,target:g}=r[o],P=o.toLowerCase().indexOf("color")>-1;let f;const E=typeof u=="undefined"&&g,b=E?g():r[o],C=E?o:"value";m?f=s.add(b,C,m):P?f=s.addColor(b,C):f=s.add(b,C),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(()=>{this.setTargetValue(t,o,b[C],h)}),E&&f.listen()})})}setTargetValue(e,t,s,r){const{onChange:o,target:n,value:i}=this.guiParams[e][t],a=t.toLowerCase().indexOf("color")>-1;if(n&&!(typeof i=="undefined"&&n)){let h=n();Array.isArray(h)||(h=[h]),h.forEach(m=>{if(m)if(a)try{m[r||t].set(s)}catch(u){t!=="color"&&!r&&console.warn(`${t} is not a color,set paramMap`)}else m[r||t]=s})}o&&o(s)}setTargetValueByParams(){Object.keys(this.guiParams).forEach(e=>{Object.keys(this.guiParams[e]).forEach(t=>{const s=this.guiParams[e][t];typeof s.value!="undefined"&&this.setTargetValue(e,t,s.value,s.paramMap)})})}}const ne={fov:45,near:1,far:1e3,up:new d.Vector3(0,1,0)};class ie{constructor(e){this.customCamera=!1,this.options=e;const{width:t,height:s,cameraParams:r}=e;if(r instanceof d.Camera)this.camera=r,this.customCamera=!0;else{const{fov:o,far:n,near:i,up:a}=r,l=new d.PerspectiveCamera(o,t/s,i,n);l.position.set(0,0,400),l.lookAt(0,0,0),l.up=a,this.camera=l}}setSize(e,t){this.camera instanceof d.PerspectiveCamera&&(this.camera.aspect=e/t),this.camera.updateProjectionMatrix()}setGui(e){const t=new x({camera:M(v({},this.options.cameraControls?{}:{x:{min:-1e4,max:1e4,step:1,target:()=>this.camera.position},y:{min:-1e4,max:1e4,step:1,target:()=>this.camera.position},z:{min:-1e4,max:1e4,step:1,target:()=>this.camera.position}}),{near:{min:0,max:1e3,step:1,target:()=>this.camera,onChange:s=>{this.camera.updateProjectionMatrix()}},far:{min:0,max:2e4,step:1,target:()=>this.camera,onChange:s=>{this.camera.updateProjectionMatrix()}}})});this.camera instanceof d.PerspectiveCamera&&(t.guiParams.camera.fov={min:0,max:90,step:1,target:()=>this.camera,onChange:s=>{this.camera.updateProjectionMatrix()}}),t.showGui(e)}}const ae={background:null,om:!0};class le{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)=>{if(a==="overrideMaterial"){const l=Reflect.get(i,a);return this.overrideMaterial=!!l,L.meshLineMaterialArr.forEach(h=>{this.overrideMaterial?h.useDepth=1:h.useDepth=0}),null}return Reflect.get(i,a)}});r&&(n.background=r),n.add(t),this.scene=n}dispose(){var e;(e=this.scene)==null||e.traverse(t=>{Z.disposeMesh(t)}),L.meshLineMaterialArr.length=0}}class ce{constructor(e){this.helpers={},this.options=e}add(e){const t=e.uuid,{scene:s}=this.options;let r=this.helpers[t];if(r===void 0){if(e.isScene)r=new d.AxesHelper(100);else if(e.isCamera)r=new d.CameraHelper(e);else if(e.isPointLight)r=new d.PointLightHelper(e,1);else if(e.isDirectionalLight)r=new d.DirectionalLightHelper(e,1);else if(e.isSpotLight)r=new d.SpotLightHelper(e);else if(e.isHemisphereLight)r=new d.HemisphereLightHelper(e,10);else if(e.isRectAreaLight)r=new J.RectAreaLightHelper(e);else{const o=new d.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}else return}s.add(r),this.helpers[t]=r}}remove(e){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()}}removeAll(){Object.keys(this.helpers).forEach(e=>{this.remove({uuid:e})}),this.helpers={}}removeAllExcludeScene(){Object.keys(this.helpers).forEach(e=>{this.helpers[e]instanceof d.AxesHelper||this.remove({uuid:e})})}update(){Object.values(this.helpers).forEach(e=>{if(e.update&&e.update(),e instanceof d.Box3Helper){const t=e.material,{object:s}=t.userData;s&&e.box.setFromObject(s,!0)}})}dispose(){this.helpers={}}}class de{constructor(e){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=.063,n.autoRotate=!1,n.autoRotateSpeed=-60,n.enableZoom=!0,n.zoomSpeed=.2,this.controls=n}else B.install({THREE:d}),this.cameraControls=new B(t,o)}enable(){this.controls?this.controls.enabled=!0:this.cameraControls&&(this.cameraControls.enabled=!0)}disable(){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)}dispose(){var e,t;(e=this.controls)==null||e.dispose(),(t=this.cameraControls)==null||t.dispose()}}class he{constructor(e){this.event=new H.eventsExports.EventEmitter;const{renderer:t,scene:s,camera:r}=e,o=new K.TransformControls(r,t.domElement);s.add(o),this.controls=o,this.addEvent()}get detach(){return this.controls.detach.bind(this.controls)}get attach(){return this.controls.attach.bind(this.controls)}addEvent(){let e=null,t=null,s=null;const r=this.controls;r.addEventListener("change",()=>{const o=r.object;o!==void 0&&this.event.emit("change",o)}),r.addEventListener("mouseDown",()=>{const o=r.object;e=o.position.clone(),t=o.rotation.clone(),s=o.scale.clone(),this.event.emit("mouseDown",o)}),r.addEventListener("mouseUp",()=>{const o=r.object;if(o!==void 0)switch(r.getMode()){case"translate":e.equals(o.position)||this.event.emit("translate",o,o.position,e);break;case"rotate":t.equals(o.rotation)||this.event.emit("rotate",o,o.rotation,t);break;case"scale":s.equals(o.scale)||this.event.emit("scale",o,o.scale,s);break}this.event.emit("mouseUp")})}dispose(){var e;this.event.removeAllListeners(),(e=this.controls)==null||e.dispose()}}const j={zIndex:"auto"};class me{constructor(e){this.container=e}addRenderer(e,t){const s=t.container||this.container,r=s.offsetWidth,o=s.offsetHeight,n=e==="css2d"?new ee.CSS2DRenderer:new Q.CSS3DRenderer;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)}setSize(e,t){var s,r;(s=this.css2Drenderer)==null||s.setSize(e,t),(r=this.css3Drenderer)==null||r.setSize(e,t)}render(e,t){var s,r;(s=this.css2Drenderer)==null||s.render(e,t),(r=this.css3Drenderer)==null||r.render(e,t)}dispose(){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 q=["encodings_fragment","colorspace_fragment"];class fe extends S.ShaderMaterial{constructor(){super({uniforms:{inputBuffer:new S.Uniform(null),ratio:new S.Uniform(1)},fragmentShader:`
+"use strict";var I=Object.defineProperty,U=Object.defineProperties;var N=Object.getOwnPropertyDescriptors;var M=Object.getOwnPropertySymbols;var B=Object.prototype.hasOwnProperty,z=Object.prototype.propertyIsEnumerable;var A=(c,e,t)=>e in c?I(c,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):c[e]=t,v=(c,e)=>{for(var t in e||(e={}))B.call(e,t)&&A(c,t,e[t]);if(M)for(var t of M(e))z.call(e,t)&&A(c,t,e[t]);return c},R=(c,e)=>U(c,N(e));var T=(c,e)=>{var t={};for(var s in c)B.call(c,s)&&e.indexOf(s)<0&&(t[s]=c[s]);if(c!=null&&M)for(var s of M(c))e.indexOf(s)<0&&z.call(c,s)&&(t[s]=c[s]);return t};Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const x=require("camera-controls"),S=require("three"),_=require("@tweenjs/tween.js"),G=require("./events.js"),W=require("deepmerge"),X=require("three/examples/jsm/libs/stats.module"),$=require("lil-gui"),Y=require("./colorCorrection.js"),Z=require("./disposeMesh.js");require("idb-keyval");require("esus-lite");require("d3-geo");const L=require("./MeshLineMaterial.js"),J=require("three/examples/jsm/helpers/RectAreaLightHelper"),K=require("three/examples/jsm/controls/TransformControls"),Q=require("three/examples/jsm/renderers/CSS3DRenderer"),ee=require("three/examples/jsm/renderers/CSS2DRenderer"),u=require("postprocessing"),te=require("./isPlainObject.js"),se=require("./BaseObject.js");function H(c){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(c){for(const t in c)if(t!=="default"){const s=Object.getOwnPropertyDescriptor(c,t);Object.defineProperty(e,t,s.get?s:{enumerable:!0,get:()=>c[t]})}}return e.default=c,Object.freeze(e)}const h=H(S),F=H(_),re={antialias:!1,devicePixelRatio:window.devicePixelRatio,powerPreference:"high-performance",toneMappingExposure:1,alpha:!1,outputColorSpace:Y.ColorSpace.sRGB,logarithmicDepthBuffer:!1,preserveDrawingBuffer:!1,stencil:!1,depth:!1,physicallyCorrectLights:!1};class oe{constructor(e){this.options=e;const{width:t,height:s,rendererParams:r}=e,{canvas:o,context:n,alpha:i,devicePixelRatio:a,antialias:l,powerPreference:d,toneMappingExposure:m,outputColorSpace:f,logarithmicDepthBuffer:g,preserveDrawingBuffer:P,stencil:p,depth:b,physicallyCorrectLights:w}=r,C=new h.WebGLRenderer({canvas:o,context:n,alpha:i,antialias:l,powerPreference:d,logarithmicDepthBuffer:g,preserveDrawingBuffer:P,stencil:p,depth:b});C.setSize(t,s),C.setPixelRatio(a),C.toneMappingExposure=m,C.outputColorSpace=f,+h.REVISION<155&&(C.useLegacyLights=w),this.renderer=C}setSize(e,t){this.renderer.setSize(e,t)}render(e){const{scene:t,camera:s}=this.options;this.renderer.render(t,e||s)}dispose(){var e,t;(e=this.renderer)==null||e.clear(),(t=this.renderer)==null||t.dispose()}}class y{constructor(e){this.guiParams={},e&&(this.guiParams=e)}showGui(e){e&&Object.keys(this.guiParams).forEach(t=>{const s=e.addFolder(t),r=this.guiParams[t];Object.keys(r).forEach(o=>{const{min:n,max:i,step:a,name:l,paramMap:d,items:m,value:f,target:g}=r[o],P=o.toLowerCase().indexOf("color")>-1;let p;const b=typeof f=="undefined"&&g,w=b?g():r[o],C=b?o:"value";m?p=s.add(w,C,m):P?p=s.addColor(w,C):p=s.add(w,C),p=p.name(l||o),typeof n!="undefined"&&(p=p.min(n)),typeof i!="undefined"&&(p=p.max(i)),typeof a!="undefined"&&(p=p.step(a)),p=p.onChange(()=>{this.setTargetValue(t,o,w[C],d)}),b&&p.listen()})})}setTargetValue(e,t,s,r){const{onChange:o,target:n,value:i}=this.guiParams[e][t],a=t.toLowerCase().indexOf("color")>-1;if(n&&!(typeof i=="undefined"&&n)){let d=n();Array.isArray(d)||(d=[d]),d.forEach(m=>{if(m)if(a)try{m[r||t].set(s)}catch(f){t!=="color"&&!r&&console.warn(`${t} is not a color,set paramMap`)}else m[r||t]=s})}o&&o(s)}setTargetValueByParams(){Object.keys(this.guiParams).forEach(e=>{Object.keys(this.guiParams[e]).forEach(t=>{const s=this.guiParams[e][t];typeof s.value!="undefined"&&this.setTargetValue(e,t,s.value,s.paramMap)})})}}const ne={fov:45,near:1,far:1e3,up:new h.Vector3(0,1,0)};class ie{constructor(e){this.customCamera=!1,this.options=e;const{width:t,height:s,cameraParams:r}=e;if(r instanceof h.Camera)this.camera=r,this.customCamera=!0;else{const{fov:o,far:n,near:i,up:a}=r,l=new h.PerspectiveCamera(o,t/s,i,n);l.position.set(0,0,400),l.lookAt(0,0,0),l.up=a,this.camera=l}}setSize(e,t){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 y({camera:R(v({},this.options.cameraControls?{}:{x:{min:-1e4,max:1e4,step:1,target:()=>this.camera.position},y:{min:-1e4,max:1e4,step:1,target:()=>this.camera.position},z:{min:-1e4,max:1e4,step:1,target:()=>this.camera.position}}),{near:{min:0,max:1e3,step:1,target:()=>this.camera,onChange:s=>{this.camera.updateProjectionMatrix()}},far:{min:0,max:2e4,step:1,target:()=>this.camera,onChange:s=>{this.camera.updateProjectionMatrix()}}})});this.camera instanceof h.PerspectiveCamera&&(t.guiParams.camera.fov={min:0,max:90,step:1,target:()=>this.camera,onChange:s=>{this.camera.updateProjectionMatrix()}}),t.showGui(e)}}const ae={background:null,om:!0};class ce{constructor(e){this.overrideMaterial=!1,this.options=e;const{camera:t,sceneParams:s}=e,{background:r,om:o}=s,n=o?new h.Scene:new Proxy(new h.Scene,{set:(i,a,l)=>Reflect.set(i,a,l),get:(i,a)=>{if(a==="overrideMaterial"){const l=Reflect.get(i,a);return this.overrideMaterial=!!l,L.meshLineMaterialArr.forEach(d=>{this.overrideMaterial?d.useDepth=1:d.useDepth=0}),null}return Reflect.get(i,a)}});r&&(n.background=r),n.add(t),this.scene=n}dispose(){var e;(e=this.scene)==null||e.traverse(t=>{Z.disposeMesh(t)}),L.meshLineMaterialArr.length=0}}class le{constructor(e){this.helpers={},this.options=e}add(e){const t=e.uuid,{scene:s}=this.options;let r=this.helpers[t];if(r===void 0){if(e.isScene)r=new h.AxesHelper(100);else if(e.isCamera)r=new h.CameraHelper(e);else if(e.isPointLight)r=new h.PointLightHelper(e,1);else if(e.isDirectionalLight)r=new h.DirectionalLightHelper(e,1);else if(e.isSpotLight)r=new h.SpotLightHelper(e);else if(e.isHemisphereLight)r=new h.HemisphereLightHelper(e,10);else if(e.isRectAreaLight)r=new J.RectAreaLightHelper(e);else{const o=new h.Box3;if(o.setFromObject(e,!0),o.isEmpty()===!1){r=new h.Box3Helper(o);const n=r.material;n.userData.object=e,n.depthTest=!1,n.transparent=!0}else return}s.add(r),this.helpers[t]=r}}remove(e){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 h.Box3Helper&&r.dispose()}}removeAll(){Object.keys(this.helpers).forEach(e=>{this.remove({uuid:e})}),this.helpers={}}removeAllExcludeScene(){Object.keys(this.helpers).forEach(e=>{this.helpers[e]instanceof h.AxesHelper||this.remove({uuid:e})})}update(){Object.values(this.helpers).forEach(e=>{if(e.update&&e.update(),e instanceof h.Box3Helper){const t=e.material,{object:s}=t.userData;s&&e.box.setFromObject(s,!0)}})}dispose(){this.helpers={}}}class he{constructor(e){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=.063,n.autoRotate=!1,n.autoRotateSpeed=-60,n.enableZoom=!0,n.zoomSpeed=.2,this.controls=n}else 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)}disable(){this.controls?this.controls.enabled=!1:this.cameraControls&&(this.cameraControls.enabled=!1)}update(e){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,s;(e=this.controls)==null||e.dispose(),(t=this.cameraControls)==null||t.dispose(),(s=this.cameraControls2)==null||s.dispose()}}class de{constructor(e){this.event=new G.eventsExports.EventEmitter;const{renderer:t,scene:s,camera:r}=e,o=new K.TransformControls(r,t.domElement);s.add(o),this.controls=o,this.addEvent()}get detach(){return this.controls.detach.bind(this.controls)}get attach(){return this.controls.attach.bind(this.controls)}addEvent(){let e=null,t=null,s=null;const r=this.controls;r.addEventListener("change",()=>{const o=r.object;o!==void 0&&this.event.emit("change",o)}),r.addEventListener("mouseDown",()=>{const o=r.object;e=o.position.clone(),t=o.rotation.clone(),s=o.scale.clone(),this.event.emit("mouseDown",o)}),r.addEventListener("mouseUp",()=>{const o=r.object;if(o!==void 0)switch(r.getMode()){case"translate":e.equals(o.position)||this.event.emit("translate",o,o.position,e);break;case"rotate":t.equals(o.rotation)||this.event.emit("rotate",o,o.rotation,t);break;case"scale":s.equals(o.scale)||this.event.emit("scale",o,o.scale,s);break}this.event.emit("mouseUp")})}dispose(){var e;this.event.removeAllListeners(),(e=this.controls)==null||e.dispose()}}const j={zIndex:"auto"};class me{constructor(e){this.container=e}addRenderer(e,t){const s=t.container||this.container,r=s.offsetWidth,o=s.offsetHeight,n=e==="css2d"?new ee.CSS2DRenderer:new Q.CSS3DRenderer;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)}setSize(e,t){var s,r;(s=this.css2Drenderer)==null||s.setSize(e,t),(r=this.css3Drenderer)==null||r.setSize(e,t)}render(e,t){var s,r;(s=this.css2Drenderer)==null||s.render(e,t),(r=this.css3Drenderer)==null||r.render(e,t)}dispose(){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 V=["encodings_fragment","colorspace_fragment"];class pe extends S.ShaderMaterial{constructor(){super({uniforms:{inputBuffer:new S.Uniform(null),ratio:new S.Uniform(1)},fragmentShader:`
         uniform sampler2D inputBuffer;
         uniform float ratio;
         varying vec2 vUv;
@@ -6,7 +6,7 @@
           vec4 texel = texture2D(inputBuffer, vUv);
           gl_FragColor = texel * ratio;
           // Support automatic output encoding.
-          #include <${+S.REVISION<154?q[0]:q[1]}>
+          #include <${+S.REVISION<154?V[0]:V[1]}>
 
         }
       `,vertexShader:`
@@ -15,4 +15,4 @@
 	        vUv = position.xy * 0.5 + 0.5;
           gl_Position = vec4(position.xy, 1.0, 1.0);
         }
-      `,toneMapped:!1,depthWrite:!1,depthTest:!1})}}class ue extends p.Pass{constructor(){super("CrossFadePass"),this.fullscreenMaterial=new fe}render(e,t,s){const r=this.fullscreenMaterial;r.uniforms.inputBuffer.value=t.texture,e.setRenderTarget(this.renderToScreen?null:s),e.render(this.scene,this.camera)}}const I={luminancePass:!1,luminanceThreshold:.4,luminanceSmoothing:.3,mipmapBlur:!0,intensity:3,mipmapBlurPassRadius:.85,blendFunction:p.BlendFunction.ADD,ignoreBackground:!0,epsilon:.001},pe={mode:p.ToneMappingMode.REINHARD2_ADAPTIVE,resolution:256,whitePoint:16,middleGrey:.6,minLuminance:.01,averageLuminance:.01,adaptationRate:1};class ge{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 p.EffectComposer(t,{multisampling:Math.min(n,a),frameBufferType:i});l.addPass(new p.RenderPass(s,r)),this.finalComposer=l,this.renderer=t,this.scene=s,this.camera=r}addCopyPass(){const e=new p.CopyPass;this.finalComposer.addPass(e),this.copyPass=e}addCrossFadePass(){const e=new ue;this.finalComposer.addPass(e),this.crossFadePass=e}addFXAAPass(){const{camera:e}=this,t=new p.FXAAEffect({blendFunction:p.BlendFunction.NORMAL}),s=new p.EffectPass(e,t);this.finalComposer.addPass(s),this.fxaaPass=s}addToneMappingPass(e){const{camera:t}=this,s=new p.ToneMappingEffect(v({},e));this.toneMappingEffect=s;const r=new p.EffectPass(t,s);this.finalComposer.addPass(r),this.toneMappingPass=r}addToneMappingGui(e){if(!this.toneMappingEffect)return;new x({toneMapping:{blendFunction:{value:this.toneMappingEffect.mode,items:p.ToneMappingMode,onChange:s=>{this.toneMappingEffect.mode=Number(s)}},exposure:{min:0,max:2,value:this.renderer.toneMappingExposure,step:.001,onChange:s=>{this.renderer.toneMappingExposure=s}}},"Reinhard (Modified)":{whitePoint:{min:2,max:32,step:.001,target:()=>this.toneMappingEffect},middleGrey:{min:0,max:1,step:1e-4,target:()=>this.toneMappingEffect},averageLuminance:{min:1e-4,max:1,step:1e-4,target:()=>this.toneMappingEffect}}}).showGui(e)}addBloomPass(e){const{camera:t,scene:s}=this,h=v(v({},I),e),{epsilon:r,ignoreBackground:o,mipmapBlurPassRadius:n}=h,i=z(h,["epsilon","ignoreBackground","mipmapBlurPassRadius"]),a=new p.SelectiveBloomEffect(s,t,v({},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 p.EffectPass(t,a);this.finalComposer.addPass(l),this.bloomPass=l,this.bloomEffect=a}addBloomGui(e){if(!this.bloomEffect)return;new x({bloom:{intensity:{min:0,max:10,step:.01,target:()=>this.bloomEffect},radius:{min:0,max:1,step:.001,target:()=>this.bloomEffect.mipmapBlurPass},blendFunction:{value:this.bloomEffect.blendMode.blendFunction,items:p.BlendFunction,onChange:s=>{this.bloomEffect.blendMode.blendFunction=Number(s)}},ignoreBackground:{value:this.bloomEffect.ignoreBackground,onChange:s=>{this.bloomEffect.ignoreBackground=s}}},bloomLuminanceFilter:{enabled:{value:this.bloomEffect.luminancePass.enabled,onChange:s=>{this.bloomEffect.luminancePass.enabled=s}},threshold:{min:0,max:1,step:.01,target:()=>this.bloomEffect.luminanceMaterial},smoothing:{min:0,max:1,step:.01,target:()=>this.bloomEffect.luminanceMaterial}}}).showGui(e)}toggleBloomSelection(e,t){if(!this.bloomEffect||!this.bloomPass){console.warn("err:pencil.options.bloom");return}e?t===!0?this.bloomEffect.selection.add(e):t===!1?this.bloomEffect.selection.delete(e):this.bloomEffect.selection.toggle(e):this.bloomEffect.selection.clear()}getSize(){const{renderer:e}=this.options;return e.getSize(new d.Vector2)}enable(){this.active||(this.active=!0)}disable(){this.active&&(this.active=!1)}setSize(e,t){this.finalComposer.setSize(e,t)}render(){this.active&&this.finalComposer.render()}dispose(){this.finalComposer.dispose()}}const Ce=()=>{try{const c=document.createElement("canvas");return!!(window.WebGL2RenderingContext&&c.getContext("webgl2"))}catch(c){return!1}},w=!1,G=Ce()!==!1,D=class D{constructor(e,t){this.raycaster=new d.Raycaster,this.installPlugins=new Map,this.event=new H.eventsExports.EventEmitter,this.clock=new d.Clock,this.userData={},this.options=W(D.options,e,{isMergeableObject:te.isPlainObject}),this.event.setMaxListeners(1/0);const{container:s,stats:r,gui:o,resizeObserver:n}=this.options;if(o){const i=new $;i.open(!1),this.gui=i}if(r){const i=new X;i.showPanel(0),i.dom.style.position="absolute",s.appendChild(i.dom),this.stats=i}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])}))}getPlugin(e){return this.installPlugins.get(e)}get renderer(){return this.rendererController.renderer}get cameraControls(){return this.controlsController.cameraControls}get cameraPositon(){return this.cameraControls.getPosition(new d.Vector3,!1)}get cameraTarget(){return this.cameraControls.getTarget(new d.Vector3,!1)}get camera(){return this.cameraController.camera}get scene(){return this.sceneController.scene}use(e,...t){this.installPlugins.has(e.pluginName)?console.log("plugin already installed"):typeof e.install=="function"&&(e.install(this,...t),this.installPlugins.set(e.pluginName,e))}init(){const{container:e,isdev:t,helper:s,renderer:r,scene:o,camera:n,control:i}=this.options,{width:a,height:l}=this.getSize(),h=new ie({isdev:t,width:a,height:l,cameraParams:n,cameraControls:i===!0});this.gui&&h.setGui(this.gui);const m=h.camera,u=new le({camera:m,sceneParams:o}),g=u.scene,P=new oe({width:a,height:l,scene:g,camera:m,isdev:t,rendererParams:M(v({},r),{antialias:!1})});if(s){const f=new ce({scene:g});f.add(g),this.helperController=f}this.sceneController=u,this.rendererController=P,this.cameraController=h,e.appendChild(P.renderer.domElement)}initComposer(){const{bloom:e,bloomParams:t,toneMapping:s,toneMappingParams:r,crossOpacity:o,renderer:n,multisampling:i,frameBufferType:a,passes:l}=this.options;let{antialias:h}=n;h==="msaa"&&!G&&(h=!1,console.warn("MSAA is not supported on this browser"));const m=new ge({renderer:this.renderer,scene:this.scene,camera:this.camera,composerParams:{multisampling:h==="msaa"?i:0,frameBufferType:s?d.HalfFloatType:a}});this.composerController=m,e&&(m.addBloomPass(t),this.gui&&m.addBloomGui(this.gui)),s&&(m.addToneMappingPass(r),this.gui&&m.addToneMappingGui(this.gui)),h==="fxaa"&&m.addFXAAPass(),o&&m.addCrossFadePass(),l&&l.forEach(u=>{m.finalComposer.addPass(u)}),m.finalComposer.passes.length===1&&m.addCopyPass()}get opacity(){const{crossFadePass:e}=this.composerController;return e?e.fullscreenMaterial.uniforms.ratio.value:1}set opacity(e){const{crossFadePass:t}=this.composerController;if(!t){console.warn("err:pencil.options.crossOpacity");return}t.fullscreenMaterial.uniforms.ratio.value=e}initCSSRenderer(){const{container:e,css2DRenderer:t,css3DRenderer:s,css2DRendererParams:r,css3DRendererParams:o}=this.options;if(t||s){const n=new me(e);t&&n.addRenderer("css2d",r),s&&n.addRenderer("css3d",o),this.cssRendererController=n}}initControls(){const{control:e,controlParams:t,transformControls:s}=this.options;if(e){const r=new de({camera:this.camera,controlsParams:{domElement:(t==null?void 0:t.domElement)||this.renderer.domElement},customControl:typeof e=="boolean"?void 0:e});this.controlsController=r}if(s){const r=new he({camera:this.camera,renderer:this.renderer,scene:this.scene});r.event.on("mouseDown",()=>{var o;(o=this.controlsController)==null||o.disable()}),r.event.on("mouseUp",()=>{var o;(o=this.controlsController)==null||o.enable()}),this.transformController=r}}getSize(){const{container:e}=this.options;return{width:e.offsetWidth,height:e.offsetHeight}}initResizeObserver(){const{container:e}=this.options;if(this.resizeObserver)return;const t=new ResizeObserver(s=>{for(const r of s){const o=r.contentRect;this.handeleResize(o.width,o.height),this.render()}});t.observe(e),this.resizeObserver=t}handeleResize(e,t,s=!0){const{rendererController:r,cameraController:o,composerController:n,cssRendererController:i}=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)}),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(t||this.scene.children,s);if(l.length)return{object:l[0].object,intersects:l}}}render(){var n,i,a,l,h,m;const{scene:e,camera:t,clock:s}=this,r=s.getDelta(),o=s.getElapsedTime();F.update(),(n=this.controlsController)==null||n.update(r),this.installPlugins.forEach(u=>{var g;(g=u.update)==null||g.call(u,r,o)}),(i=this.helperController)==null||i.update(),(a=this.composerController)!=null&&a.active?this.composerController.render():(l=this.rendererController)==null||l.render(),(h=this.cssRendererController)==null||h.render(e,t),(m=this.stats)==null||m.update(),this.event.emit("render",{delta:r,elapsed:o})}start(){this.renderer.setAnimationLoop(this.render.bind(this)),this.event.emit("start")}stop(){this.renderer.setAnimationLoop(null),this.event.emit("stop")}autoRotate(e){this.controlsController.autoRotateSpeed=e}dispose(){var e,t,s,r,o,n,i,a,l,h,m;this.stop(),F.removeAll(),this.event.removeAllListeners(),(e=this.resizeObserver)==null||e.unobserve(this.options.container),this.handeleResize(0,0),this.installPlugins.forEach(u=>{var g;(g=u.dispose)==null||g.call(u)}),(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(),(h=this.stats)==null||h.dom.remove(),(m=this.renderer)==null||m.domElement.remove()}};D.options={isdev:w,stats:w,gui:w,helper:w,control:!0,transformControls:w,resizeObserver:!0,renderer:M(v({},re),{antialias:G?"msaa":"fxaa"}),multisampling:4,frameBufferType:d.UnsignedByteType,scene:ae,camera:ne,bloom:!1,bloomParams:I,toneMapping:!1,toneMappingParams:pe,crossOpacity:!1,css2DRenderer:!1,css2DRendererParams:v({},j),css3DRenderer:!1,css3DRendererParams:v({},j)};let y=D;const ve=B.ACTION;exports.BaseObject=se.BaseObject;exports.GUIObject=x;exports.Pencil=y;exports.cameraControlsAction=ve;exports.default=y;
+      `,toneMapped:!1,depthWrite:!1,depthTest:!1})}}class fe extends u.Pass{constructor(){super("CrossFadePass"),this.fullscreenMaterial=new pe}render(e,t,s){const r=this.fullscreenMaterial;r.uniforms.inputBuffer.value=t.texture,e.setRenderTarget(this.renderToScreen?null:s),e.render(this.scene,this.camera)}}const k={luminancePass:!1,luminanceThreshold:.4,luminanceSmoothing:.3,mipmapBlur:!0,intensity:3,mipmapBlurPassRadius:.85,blendFunction:u.BlendFunction.ADD,ignoreBackground:!0,epsilon:.001},ue={mode:u.ToneMappingMode.REINHARD2_ADAPTIVE,resolution:256,whitePoint:16,middleGrey:.6,minLuminance:.01,averageLuminance:.01,adaptationRate:1};class ge{constructor(e){this.active=!0,this.options=e;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:n}=r,{maxSamples:i}=t.capabilities,a=new u.EffectComposer(t,{multisampling:Math.min(o,i),frameBufferType:n});return a.addPass(new u.RenderPass(s,e)),a}addFinalComposer2(e){const t=this.addFinalComposer(e);this.finalComposer2=t}addCopyPass(){const e=new u.CopyPass;this.finalComposer.addPass(e),this.copyPass=e}addCrossFadePass(){const e=new fe;this.finalComposer.addPass(e),this.crossFadePass=e}addFXAAPass(){const{camera:e}=this,t=new u.FXAAEffect({blendFunction:u.BlendFunction.NORMAL}),s=new u.EffectPass(e,t);this.finalComposer.addPass(s),this.fxaaPass=s}addToneMappingPass(e){const{camera:t}=this,s=new u.ToneMappingEffect(v({},e));this.toneMappingEffect=s;const r=new u.EffectPass(t,s);this.finalComposer.addPass(r),this.toneMappingPass=r}addToneMappingGui(e){if(!this.toneMappingEffect)return;new y({toneMapping:{blendFunction:{value:this.toneMappingEffect.mode,items:u.ToneMappingMode,onChange:s=>{this.toneMappingEffect.mode=Number(s)}},exposure:{min:0,max:2,value:this.renderer.toneMappingExposure,step:.001,onChange:s=>{this.renderer.toneMappingExposure=s}}},"Reinhard (Modified)":{whitePoint:{min:2,max:32,step:.001,target:()=>this.toneMappingEffect},middleGrey:{min:0,max:1,step:1e-4,target:()=>this.toneMappingEffect},averageLuminance:{min:1e-4,max:1,step:1e-4,target:()=>this.toneMappingEffect}}}).showGui(e)}addBloomPass(e){const{camera:t,scene:s}=this,d=v(v({},k),e),{epsilon:r,ignoreBackground:o,mipmapBlurPassRadius:n}=d,i=T(d,["epsilon","ignoreBackground","mipmapBlurPassRadius"]),a=new u.SelectiveBloomEffect(s,t,v({},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 u.EffectPass(t,a);this.finalComposer.addPass(l),this.bloomPass=l,this.bloomEffect=a}addBloomGui(e){if(!this.bloomEffect)return;new y({bloom:{intensity:{min:0,max:10,step:.01,target:()=>this.bloomEffect},radius:{min:0,max:1,step:.001,target:()=>this.bloomEffect.mipmapBlurPass},blendFunction:{value:this.bloomEffect.blendMode.blendFunction,items:u.BlendFunction,onChange:s=>{this.bloomEffect.blendMode.blendFunction=Number(s)}},ignoreBackground:{value:this.bloomEffect.ignoreBackground,onChange:s=>{this.bloomEffect.ignoreBackground=s}}},bloomLuminanceFilter:{enabled:{value:this.bloomEffect.luminancePass.enabled,onChange:s=>{this.bloomEffect.luminancePass.enabled=s}},threshold:{min:0,max:1,step:.01,target:()=>this.bloomEffect.luminanceMaterial},smoothing:{min:0,max:1,step:.01,target:()=>this.bloomEffect.luminanceMaterial}}}).showGui(e)}toggleBloomSelection(e,t){if(!this.bloomEffect||!this.bloomPass){console.warn("err:pencil.options.bloom");return}e?t===!0?this.bloomEffect.selection.add(e):t===!1?this.bloomEffect.selection.delete(e):this.bloomEffect.selection.toggle(e):this.bloomEffect.selection.clear()}getSize(){const{renderer:e}=this.options;return e.getSize(new h.Vector2)}enable(){this.active||(this.active=!0)}disable(){this.active&&(this.active=!1)}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(){var e;this.finalComposer.dispose(),(e=this.finalComposer2)==null||e.dispose()}}const Ce=()=>{try{const c=document.createElement("canvas");return!!(window.WebGL2RenderingContext&&c.getContext("webgl2"))}catch(c){return!1}},E=!1,q=Ce()!==!1,O=class O{constructor(e,t){this.raycaster=new h.Raycaster,this.installPlugins=new Map,this.event=new G.eventsExports.EventEmitter,this.clock=new h.Clock,this.userData={},this.mulitViewport=!1,this.options=W(O.options,e,{isMergeableObject:te.isPlainObject}),this.event.setMaxListeners(1/0);const{container:s,stats:r,gui:o,resizeObserver:n}=this.options;if(o){const i=new $;i.open(!1),this.gui=i}if(r){const i=new X;i.showPanel(0),i.dom.style.position="absolute",s.appendChild(i.dom),this.stats=i}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])}))}getPlugin(e){return this.installPlugins.get(e)}get renderer(){return this.rendererController.renderer}get cameraControls(){return this.controlsController.cameraControls}get cameraPositon(){return this.cameraControls.getPosition(new h.Vector3,!1)}get cameraTarget(){return this.cameraControls.getTarget(new h.Vector3,!1)}get camera(){return this.cameraController.camera}get scene(){return this.sceneController.scene}use(e,...t){this.installPlugins.has(e.pluginName)?console.log("plugin already installed"):typeof e.install=="function"&&(e.install(this,...t),this.installPlugins.set(e.pluginName,e))}init(){const{container:e,isdev:t,helper:s,renderer:r,scene:o,camera:n,control:i}=this.options,{width:a,height:l}=this.getSize(),d=new ie({isdev:t,width:a,height:l,cameraParams:n,cameraControls:i===!0});this.gui&&d.setGui(this.gui);const m=d.camera,f=new ce({camera:m,sceneParams:o}),g=f.scene,P=new oe({width:a,height:l,scene:g,camera:m,isdev:t,rendererParams:R(v({},r),{antialias:!1})});if(s){const p=new le({scene:g});p.add(g),this.helperController=p}this.sceneController=f,this.rendererController=P,this.cameraController=d,e.appendChild(P.renderer.domElement)}initComposer(){const{bloom:e,bloomParams:t,toneMapping:s,toneMappingParams:r,crossOpacity:o,renderer:n,multisampling:i,frameBufferType:a,passes:l}=this.options;let{antialias:d}=n;d==="msaa"&&!q&&(d=!1,console.warn("MSAA is not supported on this browser"));const m=new ge({renderer:this.renderer,scene:this.scene,camera:this.camera,composerParams:{multisampling:d==="msaa"?i:0,frameBufferType:s?h.HalfFloatType:a}});this.composerController=m,e&&(m.addBloomPass(t),this.gui&&m.addBloomGui(this.gui)),s&&(m.addToneMappingPass(r),this.gui&&m.addToneMappingGui(this.gui)),d==="fxaa"&&m.addFXAAPass(),o&&m.addCrossFadePass(),l&&l.forEach(f=>{m.finalComposer.addPass(f)}),m.finalComposer.passes.length===1&&m.addCopyPass()}get opacity(){const{crossFadePass:e}=this.composerController;return e?e.fullscreenMaterial.uniforms.ratio.value:1}set opacity(e){const{crossFadePass:t}=this.composerController;if(!t){console.warn("err:pencil.options.crossOpacity");return}t.fullscreenMaterial.uniforms.ratio.value=e}initCSSRenderer(){const{container:e,css2DRenderer:t,css3DRenderer:s,css2DRendererParams:r,css3DRendererParams:o}=this.options;if(t||s){const n=new me(e);t&&n.addRenderer("css2d",r),s&&n.addRenderer("css3d",o),this.cssRendererController=n}}initControls(){const{control:e,controlParams:t,transformControls:s}=this.options;if(e){const r=new he({camera:this.camera,controlsParams:{domElement:(t==null?void 0:t.domElement)||this.renderer.domElement},customControl:typeof e=="boolean"?void 0:e});this.controlsController=r}if(s){const r=new de({camera:this.camera,renderer:this.renderer,scene:this.scene});r.event.on("mouseDown",()=>{var o;(o=this.controlsController)==null||o.disable()}),r.event.on("mouseUp",()=>{var o;(o=this.controlsController)==null||o.enable()}),this.transformController=r}}getSize(){const{container:e}=this.options;return{width:e.offsetWidth,height:e.offsetHeight}}initResizeObserver(){const{container:e}=this.options;if(this.resizeObserver)return;const t=new ResizeObserver(s=>{for(const r of s){const o=r.contentRect;this.handeleResize(o.width,o.height),this.render()}});t.observe(e),this.resizeObserver=t}handeleResize(e,t,s=!0){const{rendererController:r,cameraController:o,composerController:n,cssRendererController:i}=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)}),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 h.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(t||this.scene.children,s);if(l.length)return{object:l[0].object,intersects:l}}}render(){var n,i,a,l,d,m;const{scene:e,camera:t,clock:s}=this,r=s.getDelta(),o=s.getElapsedTime();F.update(),(n=this.controlsController)==null||n.update(r),this.installPlugins.forEach(f=>{var g;(g=f.update)==null||g.call(f,r,o)}),(i=this.helperController)==null||i.update(),(a=this.composerController)!=null&&a.active?this.mulitViewport?(this.setViewportLeft(),this.composerController.render(),this.setViewportRight(),this.composerController.render2()):this.composerController.render():(l=this.rendererController)==null||l.render(),(d=this.cssRendererController)==null||d.render(e,t),(m=this.stats)==null||m.update(),this.event.emit("render",{delta:r,elapsed:o})}start(){this.renderer.setAnimationLoop(this.render.bind(this)),this.event.emit("start")}stop(){this.renderer.setAnimationLoop(null),this.event.emit("stop")}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,.5,1),this.controlsController.cameraControls2.interactiveArea=new DOMRect(.5,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,n=r/o;this.camera.aspect!==n&&(this.camera.aspect=n,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,n=r/o;this.camera.aspect!==n&&(this.camera.aspect=n,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,n=r/o,i=this.cameraController.camera2;i&&i.aspect!==n&&(i.aspect=n,i.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,d,m;this.stop(),F.removeAll(),this.event.removeAllListeners(),(e=this.resizeObserver)==null||e.unobserve(this.options.container),this.handeleResize(0,0),this.installPlugins.forEach(f=>{var g;(g=f.dispose)==null||g.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(),(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(),(d=this.stats)==null||d.dom.remove(),(m=this.renderer)==null||m.domElement.remove()}};O.options={isdev:E,stats:E,gui:E,helper:E,control:!0,transformControls:E,resizeObserver:!0,renderer:R(v({},re),{antialias:q?"msaa":"fxaa"}),multisampling:4,frameBufferType:h.UnsignedByteType,scene:ae,camera:ne,bloom:!1,bloomParams:k,toneMapping:!1,toneMappingParams:ue,crossOpacity:!1,css2DRenderer:!1,css2DRendererParams:v({},j),css3DRenderer:!1,css3DRendererParams:v({},j)};let D=O;const ve=x.ACTION;exports.BaseObject=se.BaseObject;exports.GUIObject=y;exports.Pencil=D;exports.cameraControlsAction=ve;exports.default=D;

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;
@@ -430,13 +443,13 @@ class be {
     (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;
@@ -446,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]}>
 
         }
       `,
@@ -463,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;
@@ -483,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,
@@ -494,28 +507,36 @@ 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) {
@@ -524,7 +545,7 @@ class xe {
       toneMapping: {
         blendFunction: {
           value: this.toneMappingEffect.mode,
-          items: V,
+          items: I,
           onChange: (s) => {
             this.toneMappingEffect.mode = Number(s);
           }
@@ -562,10 +583,10 @@ 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;
@@ -636,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);
@@ -645,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) {
@@ -694,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;
@@ -715,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 {
@@ -753,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;
@@ -794,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() {
@@ -851,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");
@@ -891,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
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gl-draw",
-  "version": "0.9.1",
+  "version": "0.9.2",
   "author": "gitplus <hstits@gmail.com>",
   "scripts": {
     "start": "bundler-dev",