gl-draw 0.9.2 → 0.9.4

package/dist/core/Composer.d.ts

@@ -1,6 +1,6 @@
 import * as THREE from 'three';
 import GUI from 'lil-gui';
-import { EffectComposer, CopyPass, EffectPass, BlendFunction, SelectiveBloomEffect, ToneMappingEffect, ToneMappingMode } from 'postprocessing';
+import { EffectComposer, RenderPass, CopyPass, EffectPass, BlendFunction, SelectiveBloomEffect, ToneMappingEffect, ToneMappingMode } from 'postprocessing';
 import CrossFadePass from './pass/CrossFadePass';
 export interface BloomParams {
     luminancePass: boolean;
@@ -57,7 +57,7 @@ export default class {
     scene: THREE.Scene;
     camera: THREE.Camera;
     finalComposer: EffectComposer;
-    finalComposer2?: EffectComposer;
+    renderPass: RenderPass;
     copyPass: CopyPass;
     fxaaPass?: EffectPass;
     bloomPass?: EffectPass;
@@ -68,8 +68,8 @@ export default class {
     options: Options;
     active: boolean;
     constructor(options: Options);
-    addFinalComposer(c: THREE.Camera): EffectComposer;
-    addFinalComposer2(c: THREE.Camera): void;
+    setRenderPassCamera(c: THREE.Camera): void;
+    resetRenderPassCamera(): void;
     addCopyPass(): void;
     addCrossFadePass(): void;
     addFXAAPass(): void;

package/dist/index.js

@@ -1,4 +1,4 @@
-"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:`
+"use strict";var I=Object.defineProperty,U=Object.defineProperties;var N=Object.getOwnPropertyDescriptors;var R=Object.getOwnPropertySymbols;var B=Object.prototype.hasOwnProperty,T=Object.prototype.propertyIsEnumerable;var A=(l,e,t)=>e in l?I(l,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):l[e]=t,v=(l,e)=>{for(var t in e||(e={}))B.call(e,t)&&A(l,t,e[t]);if(R)for(var t of R(e))T.call(e,t)&&A(l,t,e[t]);return l},M=(l,e)=>U(l,N(e));var z=(l,e)=>{var t={};for(var s in l)B.call(l,s)&&e.indexOf(s)<0&&(t[s]=l[s]);if(l!=null&&R)for(var s of R(l))e.indexOf(s)<0&&T.call(l,s)&&(t[s]=l[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(l){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(l){for(const t in l)if(t!=="default"){const s=Object.getOwnPropertyDescriptor(l,t);Object.defineProperty(e,t,s.get?s:{enumerable:!0,get:()=>l[t]})}}return e.default=l,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:c,powerPreference:d,toneMappingExposure:m,outputColorSpace:p,logarithmicDepthBuffer:g,preserveDrawingBuffer:P,stencil:f,depth:b,physicallyCorrectLights:w}=r,C=new h.WebGLRenderer({canvas:o,context:n,alpha:i,antialias:c,powerPreference:d,logarithmicDepthBuffer:g,preserveDrawingBuffer:P,stencil:f,depth:b});C.setSize(t,s),C.setPixelRatio(a),C.toneMappingExposure=m,C.outputColorSpace=p,+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:c,paramMap:d,items:m,value:p,target:g}=r[o],P=o.toLowerCase().indexOf("color")>-1;let f;const b=typeof p=="undefined"&&g,w=b?g():r[o],C=b?o:"value";m?f=s.add(w,C,m):P?f=s.addColor(w,C):f=s.add(w,C),f=f.name(c||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,w[C],d)}),b&&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 d=n();Array.isArray(d)||(d=[d]),d.forEach(m=>{if(m)if(a)try{m[r||t].set(s)}catch(p){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,c=new h.PerspectiveCamera(o,t/s,i,n);c.position.set(0,0,400),c.lookAt(0,0,0),c.up=a,this.camera=c}}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: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 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,c)=>Reflect.set(i,a,c),get:(i,a)=>{if(a==="overrideMaterial"){const c=Reflect.get(i,a);return this.overrideMaterial=!!c,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,this.cameraControls2&&(this.cameraControls2.enabled=!0))}disable(){this.controls?this.controls.enabled=!1:this.cameraControls&&(this.cameraControls.enabled=!1,this.cameraControls2&&(this.cameraControls2.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 V={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 j=["encodings_fragment","colorspace_fragment"];class fe 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?V[0]:V[1]}>
+          #include <${+S.REVISION<154?j[0]:j[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 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;
+      `,toneMapped:!1,depthWrite:!1,depthTest:!1})}}class pe extends u.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 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,composerParams:o}=e,{multisampling:n,frameBufferType:i}=o,{maxSamples:a}=t.capabilities,c=new u.EffectComposer(t,{multisampling:Math.min(n,a),frameBufferType:i});this.renderPass=new u.RenderPass(s,r),c.addPass(this.renderPass),this.finalComposer=c,this.renderer=t,this.scene=s,this.camera=r}setRenderPassCamera(e){this.renderPass.mainCamera=e}resetRenderPassCamera(){this.renderPass.mainCamera=this.camera}addCopyPass(){const e=new u.CopyPass;this.finalComposer.addPass(e),this.copyPass=e}addCrossFadePass(){const e=new pe;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=z(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 c=new u.EffectPass(t,a);this.finalComposer.addPass(c),this.bloomPass=c,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){this.finalComposer.setSize(e,t)}render(){this.active&&this.finalComposer.render()}render2(){this.active}dispose(){this.finalComposer.dispose()}}const Ce=()=>{try{const l=document.createElement("canvas");return!!(window.WebGL2RenderingContext&&l.getContext("webgl2"))}catch(l){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:c}=this.getSize(),d=new ie({isdev:t,width:a,height:c,cameraParams:n,cameraControls:i===!0});this.gui&&d.setGui(this.gui);const m=d.camera,p=new ce({camera:m,sceneParams:o}),g=p.scene,P=new oe({width:a,height:c,scene:g,camera:m,isdev:t,rendererParams:M(v({},r),{antialias:!1})});if(s){const f=new le({scene:g});f.add(g),this.helperController=f}this.sceneController=p,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:c}=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(),c&&c.forEach(p=>{m.finalComposer.addPass(p)}),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 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 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 c=r.intersectObjects(t||this.scene.children,s);if(c.length)return{object:c[0].object,intersects:c}}}render(){var n,i,a,c,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(p=>{var g;(g=p.update)==null||g.call(p,r,o)}),(i=this.helperController)==null||i.update(),(a=this.composerController)!=null&&a.active?this.mulitViewport&&this.cameraController.camera2?(this.setViewportLeft(),this.composerController.resetRenderPassCamera(),this.composerController.render(),this.setViewportRight(),this.composerController.setRenderPassCamera(this.cameraController.camera2),this.composerController.render()):!this.mulitViewport&&this.cameraController.camera2?(this.composerController.resetRenderPassCamera(),this.setViewportFull(),this.composerController.render()):this.composerController.render():(c=this.rendererController)==null||c.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)this.controlsController.cameraControls2.enabled=!0,this.cameraController.camera2.position.copy(this.cameraController.camera.position);else{const t=this.cameraController.addCamera2();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 this.controlsController.cameraControls2&&(this.controlsController.cameraControls2.enabled=!1),this.controlsController.cameraControls.interactiveArea=new DOMRect(0,0,1,1)}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,c,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(p=>{var g;(g=p.dispose)==null||g.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,(c=this.gui)==null||c.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:M(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({},V),css3DRenderer:!1,css3DRendererParams:v({},V)};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

@@ -2,24 +2,24 @@ var N = Object.defineProperty, W = Object.defineProperties;
 var _ = Object.getOwnPropertyDescriptors;
 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) => {
+var z = (c, e, t) => e in c ? N(c, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : c[e] = t, g = (c, e) => {
   for (var t in e || (e = {}))
-    A.call(e, t) && z(l, t, e[t]);
+    A.call(e, t) && z(c, 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) => {
+      B.call(e, t) && z(c, t, e[t]);
+  return c;
+}, S = (c, e) => W(c, _(e));
+var O = (c, e) => {
   var t = {};
-  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]);
+  for (var s in c)
+    A.call(c, s) && e.indexOf(s) < 0 && (t[s] = c[s]);
+  if (c != null && E)
+    for (var s of E(c))
+      e.indexOf(s) < 0 && B.call(c, s) && (t[s] = c[s]);
   return t;
 };
-import x from "camera-controls";
+import R 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";
@@ -37,7 +37,7 @@ 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 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 { 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 le, SelectiveBloomEffect as ce } from "postprocessing";
 import { i as he } from "./isPlainObject.module.js";
 import { B as $e } from "./BaseObject.module.js";
 const me = {
@@ -61,7 +61,7 @@ class de {
       context: i,
       alpha: n,
       devicePixelRatio: a,
-      antialias: c,
+      antialias: l,
       powerPreference: m,
       toneMappingExposure: d,
       outputColorSpace: f,
@@ -70,18 +70,18 @@ class de {
       stencil: p,
       depth: w,
       physicallyCorrectLights: P
-    } = r, g = new h.WebGLRenderer({
+    } = r, C = new h.WebGLRenderer({
       canvas: o,
       context: i,
       alpha: n,
-      antialias: c,
+      antialias: l,
       powerPreference: m,
       logarithmicDepthBuffer: u,
       preserveDrawingBuffer: v,
       stencil: p,
       depth: w
     });
-    g.setSize(t, s), g.setPixelRatio(a), g.toneMappingExposure = d, g.outputColorSpace = f, +h.REVISION < 155 && (g.useLegacyLights = P), this.renderer = g;
+    C.setSize(t, s), C.setPixelRatio(a), C.toneMappingExposure = d, C.outputColorSpace = f, +h.REVISION < 155 && (C.useLegacyLights = P), this.renderer = C;
   }
   setSize(e, t) {
     this.renderer.setSize(e, t);
@@ -107,16 +107,16 @@ class D {
           min: i,
           max: n,
           step: a,
-          name: c,
+          name: l,
           paramMap: m,
           items: d,
           value: f,
           target: u
         } = r[o], v = o.toLowerCase().indexOf("color") > -1;
         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);
+        const w = typeof f == "undefined" && u, P = w ? u() : r[o], C = w ? o : "value";
+        d ? p = s.add(P, C, d) : v ? p = s.addColor(P, C) : p = s.add(P, C), p = p.name(l || 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[C], m);
         }), w && p.listen();
       });
     });
@@ -165,13 +165,13 @@ class fe {
     if (r instanceof h.Camera)
       this.camera = r, this.customCamera = !0;
     else {
-      const { fov: o, far: i, near: n, up: a } = r, c = new h.PerspectiveCamera(
+      const { fov: o, far: i, near: n, up: a } = r, l = new h.PerspectiveCamera(
         o,
         t / s,
         n,
         i
       );
-      c.position.set(0, 0, 400), c.lookAt(0, 0, 0), c.up = a, this.camera = c;
+      l.position.set(0, 0, 400), l.lookAt(0, 0, 0), l.up = a, this.camera = l;
     }
   }
   setSize(e, t) {
@@ -188,7 +188,7 @@ class fe {
   }
   setGui(e) {
     const t = new D({
-      camera: S(C({}, this.options.cameraControls ? {} : {
+      camera: S(g({}, this.options.cameraControls ? {} : {
         x: {
           min: -1e4,
           max: 1e4,
@@ -243,15 +243,15 @@ const ue = {
   background: null,
   om: !0
 };
-class ge {
+class Ce {
   constructor(e) {
     this.overrideMaterial = !1, this.options = e;
     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),
+      set: (n, a, l) => Reflect.set(n, a, l),
       get: (n, a) => {
         if (a === "overrideMaterial") {
-          const c = Reflect.get(n, a);
-          return this.overrideMaterial = !!c, F.forEach((m) => {
+          const l = Reflect.get(n, a);
+          return this.overrideMaterial = !!l, F.forEach((m) => {
             this.overrideMaterial ? m.useDepth = 1 : m.useDepth = 0;
           }), null;
         }
@@ -267,7 +267,7 @@ class ge {
     }), F.length = 0;
   }
 }
-class Ce {
+class ge {
   constructor(e) {
     this.helpers = {}, this.options = e;
   }
@@ -342,17 +342,17 @@ class ve {
       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
-      x.install({ THREE: h }), this.cameraControls = new x(t, o);
+      R.install({ THREE: h }), this.cameraControls = new R(t, o);
   }
   addCameraControls2(e) {
     const { controlsParams: t } = this.options, { domElement: s } = t;
-    this.cameraControls2 = new x(e, s);
+    this.cameraControls2 = new R(e, s);
   }
   enable() {
-    this.controls ? this.controls.enabled = !0 : this.cameraControls && (this.cameraControls.enabled = !0);
+    this.controls ? this.controls.enabled = !0 : this.cameraControls && (this.cameraControls.enabled = !0, this.cameraControls2 && (this.cameraControls2.enabled = !0));
   }
   disable() {
-    this.controls ? this.controls.enabled = !1 : this.cameraControls && (this.cameraControls.enabled = !1);
+    this.controls ? this.controls.enabled = !1 : this.cameraControls && (this.cameraControls.enabled = !1, this.cameraControls2 && (this.cameraControls2.enabled = !1));
   }
   update(e) {
     var t, s, r;
@@ -504,22 +504,20 @@ const U = {
   averageLuminance: 0.01,
   adaptationRate: 1
 };
-class xe {
+class Re {
   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: i } = r, { maxSamples: n } = t.capabilities, a = new oe(t, {
-      multisampling: Math.min(o, n),
-      frameBufferType: i
+    const { renderer: t, scene: s, camera: r, composerParams: o } = e, { multisampling: i, frameBufferType: n } = o, { maxSamples: a } = t.capabilities, l = new oe(t, {
+      multisampling: Math.min(i, a),
+      frameBufferType: n
     });
-    return a.addPass(new ie(s, e)), a;
+    this.renderPass = new ie(s, r), l.addPass(this.renderPass), this.finalComposer = l, this.renderer = t, this.scene = s, this.camera = r;
+  }
+  setRenderPassCamera(e) {
+    this.renderPass.mainCamera = e;
   }
-  addFinalComposer2(e) {
-    const t = this.addFinalComposer(e);
-    this.finalComposer2 = t;
+  resetRenderPassCamera() {
+    this.renderPass.mainCamera = this.camera;
   }
   addCopyPass() {
     const e = new ne();
@@ -534,7 +532,7 @@ class xe {
     this.finalComposer.addPass(s), this.fxaaPass = s;
   }
   addToneMappingPass(e) {
-    const { camera: t } = this, s = new ce(C({}, e));
+    const { camera: t } = this, s = new le(g({}, e));
     this.toneMappingEffect = s;
     const r = new M(t, s);
     this.finalComposer.addPass(r), this.toneMappingPass = r;
@@ -583,10 +581,10 @@ class xe {
     }).showGui(e);
   }
   addBloomPass(e) {
-    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));
+    const { camera: t, scene: s } = this, m = g(g({}, U), e), { epsilon: r, ignoreBackground: o, mipmapBlurPassRadius: i } = m, n = O(m, ["epsilon", "ignoreBackground", "mipmapBlurPassRadius"]), a = new ce(s, t, g({}, 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;
+    const l = new M(t, a);
+    this.finalComposer.addPass(l), this.bloomPass = l, this.bloomEffect = a;
   }
   addBloomGui(e) {
     if (!this.bloomEffect) return;
@@ -666,31 +664,28 @@ class xe {
     this.active && (this.active = !1);
   }
   setSize(e, t) {
-    var s;
-    this.finalComposer.setSize(e, t), (s = this.finalComposer2) == null || s.setSize(e, t);
+    this.finalComposer.setSize(e, t);
   }
   render() {
     this.active && this.finalComposer.render();
   }
   render2() {
-    var e;
-    this.active && ((e = this.finalComposer2) == null || e.render());
+    this.active;
   }
   dispose() {
-    var e;
-    this.finalComposer.dispose(), (e = this.finalComposer2) == null || e.dispose();
+    this.finalComposer.dispose();
   }
 }
-const Re = () => {
+const xe = () => {
   try {
-    const l = document.createElement("canvas");
-    return !!(window.WebGL2RenderingContext && l.getContext("webgl2"));
-  } catch (l) {
+    const c = document.createElement("canvas");
+    return !!(window.WebGL2RenderingContext && c.getContext("webgl2"));
+  } catch (c) {
     return !1;
   }
-}, b = !1, H = Re() !== !1, R = class R {
+}, b = !1, H = xe() !== !1, x = class x {
   constructor(e, t) {
-    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, {
+    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 = $(x.options, e, {
       isMergeableObject: he
     }), this.event.setMaxListeners(1 / 0);
     const {
@@ -744,29 +739,29 @@ const Re = () => {
       scene: o,
       camera: i,
       control: n
-    } = this.options, { width: a, height: c } = this.getSize(), m = new fe({
+    } = this.options, { width: a, height: l } = this.getSize(), m = new fe({
       isdev: t,
       width: a,
-      height: c,
+      height: l,
       cameraParams: i,
       cameraControls: n === !0
     });
     this.gui && m.setGui(this.gui);
-    const d = m.camera, f = new ge({
+    const d = m.camera, f = new Ce({
       camera: d,
       sceneParams: o
     }), u = f.scene, v = new de({
       width: a,
-      height: c,
+      height: l,
       scene: u,
       camera: d,
       isdev: t,
-      rendererParams: S(C({}, r), {
+      rendererParams: S(g({}, r), {
         antialias: !1
       })
     });
     if (s) {
-      const p = new Ce({
+      const p = new ge({
         scene: u
       });
       p.add(u), this.helperController = p;
@@ -783,11 +778,11 @@ const Re = () => {
       renderer: i,
       multisampling: n,
       frameBufferType: a,
-      passes: c
+      passes: l
     } = this.options;
     let { antialias: m } = i;
     m === "msaa" && !H && (m = !1, console.warn("MSAA is not supported on this browser"));
-    const d = new xe({
+    const d = new Re({
       renderer: this.renderer,
       scene: this.scene,
       camera: this.camera,
@@ -796,7 +791,7 @@ const Re = () => {
         frameBufferType: s ? h.HalfFloatType : a
       }
     });
-    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) => {
+    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(), l && l.forEach((f) => {
       d.finalComposer.addPass(f);
     }), d.finalComposer.passes.length === 1 && d.addCopyPass();
   }
@@ -882,32 +877,34 @@ const Re = () => {
       cssRendererController: n
     } = this;
     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);
+      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: 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(
+      const l = r.intersectObjects(
         t || this.scene.children,
         s
       );
-      if (c.length)
+      if (l.length)
         return {
-          object: c[0].object,
-          intersects: c
+          object: l[0].object,
+          intersects: l
         };
     }
   }
   render() {
-    var i, n, a, c, m, d;
+    var i, n, a, l, m, d;
     const { scene: e, camera: t, clock: s } = this, r = s.getDelta(), o = s.getElapsedTime();
     L.update(), (i = this.controlsController) == null || i.update(r), this.installPlugins.forEach((f) => {
       var u;
       (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 });
+    }), (n = this.helperController) == null || n.update(), (a = this.composerController) != null && a.active ? this.mulitViewport && this.cameraController.camera2 ? (this.setViewportLeft(), this.composerController.resetRenderPassCamera(), this.composerController.render(), this.setViewportRight(), this.composerController.setRenderPassCamera(
+      this.cameraController.camera2
+    ), this.composerController.render()) : !this.mulitViewport && this.cameraController.camera2 ? (this.composerController.resetRenderPassCamera(), this.setViewportFull(), this.composerController.render()) : this.composerController.render() : (l = this.rendererController) == null || l.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");
@@ -920,9 +917,13 @@ const Re = () => {
   }
   setMulitViewport(e) {
     if (this.mulitViewport = e, e) {
-      if (!this.controlsController.cameraControls2) {
+      if (this.controlsController.cameraControls2)
+        this.controlsController.cameraControls2.enabled = !0, this.cameraController.camera2.position.copy(
+          this.cameraController.camera.position
+        );
+      else {
         const t = this.cameraController.addCamera2();
-        this.composerController.addFinalComposer2(t), this.controlsController.addCameraControls2(t);
+        this.controlsController.addCameraControls2(t);
       }
       this.controlsController.cameraControls.interactiveArea = new DOMRect(
         0,
@@ -935,12 +936,13 @@ const Re = () => {
         0.5,
         1
       );
-    } else e || (this.controlsController.cameraControls2 && (this.controlsController.cameraControls2.interactiveArea = new DOMRect(
-      0,
-      0,
-      1,
-      1
-    )), this.setViewportFull());
+    } else
+      this.controlsController.cameraControls2 && (this.controlsController.cameraControls2.enabled = !1), this.controlsController.cameraControls.interactiveArea = new DOMRect(
+        0,
+        0,
+        1,
+        1
+      );
   }
   setViewportFull() {
     const e = this.getSize(), t = 0, s = 0, r = e.width, o = e.height, i = r / o;
@@ -955,14 +957,14 @@ const Re = () => {
     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, i, n, a, c, m, d;
+    var e, t, s, r, o, i, n, a, l, 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 = 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();
+    }), (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, (l = this.gui) == null || l.destroy(), this.installPlugins.clear(), (m = this.stats) == null || m.dom.remove(), (d = this.renderer) == null || d.domElement.remove();
   }
 };
-R.options = {
+x.options = {
   isdev: b,
   stats: b,
   gui: b,
@@ -970,7 +972,7 @@ R.options = {
   control: !0,
   transformControls: b,
   resizeObserver: !0,
-  renderer: S(C({}, me), {
+  renderer: S(g({}, me), {
     antialias: H ? "msaa" : "fxaa"
   }),
   multisampling: 4,
@@ -983,12 +985,12 @@ R.options = {
   toneMappingParams: Se,
   crossOpacity: !1,
   css2DRenderer: !1,
-  css2DRendererParams: C({}, V),
+  css2DRendererParams: g({}, V),
   css3DRenderer: !1,
-  css3DRendererParams: C({}, V)
+  css3DRendererParams: g({}, V)
 };
-let k = R;
-const _e = x.ACTION;
+let k = x;
+const _e = R.ACTION;
 export {
   $e as BaseObject,
   D as GUIObject,

package/package.json

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