gl-draw 0.9.0-beta.21 → 0.9.0-beta.210

package/README.md

@@ -239,21 +239,3 @@ interface Options {
 (method) BaseObject.dispose(): void
 ```
 
-## 提示
-### @tweenjs/tween.js 使用需要注册
-```js
-const pencil = new Pencil({
-  ...
-})
-pencil.use({
-  install: () => {},
-  update: () => {
-    TWEEN.update();
-  },
-  dispose: () => {
-    TWEEN.removeAll();
-  },
-})
-```
-
-

package/dist/BaseObject.js

@@ -1 +1 @@
-"use strict";const o=require("three"),h=require("esus-lite"),a=require("three/examples/jsm/renderers/CSS2DRenderer"),c=require("three/examples/jsm/renderers/CSS3DRenderer"),d=require("./disposeMesh.js");require("idb-keyval");function u(t){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const r in t)if(r!=="default"){const i=Object.getOwnPropertyDescriptor(t,r);Object.defineProperty(e,r,i.get?i:{enumerable:!0,get:()=>t[r]})}}return e.default=t,Object.freeze(e)}const s=u(o),n=t=>{t&&(d.disposeMesh(t),t.children.forEach(e=>{e.userData.BaseObject_||n(e)}))};class b{constructor(){this.objecttype__="BaseObject",this.userData={},this.pm=h.makePromiseCreator(),this.visible=!1}get parent(){const e=this.object3d.parent;return(e==null?void 0:e.userData.BaseObject_)||this.pencil.scene}get children(){return this.object3d.children.map(e=>e.userData.BaseObject_).filter(e=>!!e)}init(){}create(){}render(){}update(e,r){}resize(e,r){}show(){return this.object3d&&(this.object3d.visible=!0),this.visible=!0,this}hide(){return this.object3d&&(this.object3d.visible=!1),this.visible=!1,this}isVisible(){return this.visible}createMesh(...e){return this.object3d=new s.Mesh(...e),this}createGroup(){return this.object3d=new s.Group,this}createPoints(...e){return this.object3d=new s.Points(...e),this}createCSS2DObject(e){return this.object3d=new a.CSS2DObject(e),this}createCSS3DObject(e){return this.object3d=new c.CSS3DObject(e),this}createCSS3DSprite(e){return this.object3d=new c.CSS3DSprite(e),this}createSprite(e){return this.object3d=new s.Sprite(e),this}add(...e){return this.object3d.add(...e),this}remove(...e){return this.object3d.remove(...e),this}attach(e){return this.object3d.attach(e.object3d),this}getSize(){const e=new s.Box3().setFromObject(this.object3d);return{min:e.min,max:e.max,size:e.getSize(new s.Vector3)}}traverse(e){e(this),this.children.forEach(r=>{r.traverse(e)})}dispose(){n(this.object3d)}}exports.BaseObject=b;
+"use strict";const b=require("three"),l=require("esus-lite"),u=require("three/examples/jsm/renderers/CSS2DRenderer"),o=require("three/examples/jsm/renderers/CSS3DRenderer"),h=require("./disposeMesh.js");require("idb-keyval");require("d3-geo");function j(r){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(r){for(const t in r)if(t!=="default"){const i=Object.getOwnPropertyDescriptor(r,t);Object.defineProperty(e,t,i.get?i:{enumerable:!0,get:()=>r[t]})}}return e.default=r,Object.freeze(e)}const s=j(b),c=new WeakMap,a=r=>c.get(r),d=r=>{r&&(h.disposeMesh(r),r.children.forEach(e=>{c.has(e)||d(e)}))};class p{constructor(){this.objectType="BaseObject",this.userData={},this.pm=l.makePromiseCreator(),this.materialList={},this.useMaterialType="origin"}get parent(){const e=this.object3d.parent;return a(e)||this.pencil.scene}get children(){return this.object3d.children.map(e=>a(e)).filter(e=>!!e)}get position(){var e;return(e=this.object3d)==null?void 0:e.position}get rotation(){var e;return(e=this.object3d)==null?void 0:e.rotation}get scale(){var e;return(e=this.object3d)==null?void 0:e.scale}get add(){var e;return(e=this.object3d)==null?void 0:e.add.bind(this.object3d)}get remove(){var e;return(e=this.object3d)==null?void 0:e.remove.bind(this.object3d)}get visible(){return this.object3d?this.object3d.visible:!1}create(){}render(){}update(e,t){}resize(e,t){}show(){return this.object3d&&(this.object3d.visible=!0),this}hide(){return this.object3d&&(this.object3d.visible=!1),this}createMesh(...e){return this.object3d=new s.Mesh(...e),this}createGroup(){return this.object3d=new s.Group,this}createPoints(...e){return this.object3d=new s.Points(...e),this}createCSS2DObject(e){return this.object3d=new u.CSS2DObject(e),this}createCSS3DObject(e){return this.object3d=new o.CSS3DObject(e),this}createCSS3DSprite(e){return this.object3d=new o.CSS3DSprite(e),this}createSprite(e){return this.object3d=new s.Sprite(e),this}attach(...e){return[...e].forEach(t=>{this.object3d.attach(t.object3d)}),this}getSize(){const e=new s.Box3().setFromObject(this.object3d);return{min:e.min,max:e.max,size:e.getSize(new s.Vector3)}}traverse(e){e(this),this.children.forEach(t=>{t.traverse(e)})}clone(){return this.drawController.clone(this)}instantiate(e){return this.drawController.instantiate(this,e)}erase(){this.drawController.erase(this)}cloneMaterial(){const e=this.object3d;if(!e||!e.material)return;const t=e.material;return Array.isArray(t)?t.map(i=>i.clone()):t.clone()}setMaterialList(e,t){const i=this.object3d;if(!i||!i.material)return;this.materialList.origin||(this.materialList.origin=i.material);const n=t==="clone"?this.cloneMaterial():t;return this.materialList[e]=n,n}useMaterial(e){const t=this.object3d;!t||!t.material||this.useMaterialType===e||(this.useMaterialType=e,t.material=this.materialList[e])}dispose(){d(this.object3d),Object.keys(this.materialList).forEach(e=>{e!=="origin"&&h.disposeMesh({material:this.materialList[e]})})}}exports.BaseObject=p;exports.baseObjectByObject3D=a;exports.objMap=c;

package/dist/BaseObject.module.js

@@ -1,91 +1,140 @@
-import * as t from "three";
-import { makePromiseCreator as h } from "esus-lite";
-import { CSS2DObject as c } from "three/examples/jsm/renderers/CSS2DRenderer";
-import { CSS3DObject as o, CSS3DSprite as a } from "three/examples/jsm/renderers/CSS3DRenderer";
-import { d as n } from "./disposeMesh.module.js";
+import * as r from "three";
+import { makePromiseCreator as d } from "esus-lite";
+import { CSS2DObject as b } from "three/examples/jsm/renderers/CSS2DRenderer";
+import { CSS3DObject as l, CSS3DSprite as j } from "three/examples/jsm/renderers/CSS3DRenderer";
+import { d as c } from "./disposeMesh.module.js";
 import "idb-keyval";
-const r = (i) => {
-  i && (n(i), i.children.forEach((e) => {
-    e.userData.BaseObject_ || r(e);
+import "d3-geo";
+const n = /* @__PURE__ */ new WeakMap(), o = (i) => n.get(i), h = (i) => {
+  i && (c(i), i.children.forEach((t) => {
+    n.has(t) || h(t);
   }));
 };
-class m {
+class w {
   constructor() {
-    this.objecttype__ = "BaseObject", this.userData = {}, this.pm = h(), this.visible = !1;
+    this.objectType = "BaseObject", this.userData = {}, this.pm = d(), this.materialList = {}, this.useMaterialType = "origin";
   }
   get parent() {
-    const e = this.object3d.parent;
-    return (e == null ? void 0 : e.userData.BaseObject_) || this.pencil.scene;
+    const t = this.object3d.parent;
+    return o(t) || this.pencil.scene;
   }
   get children() {
-    return this.object3d.children.map((e) => e.userData.BaseObject_).filter((e) => !!e);
+    return this.object3d.children.map((t) => o(t)).filter((t) => !!t);
   }
-  init() {
+  get position() {
+    var t;
+    return (t = this.object3d) == null ? void 0 : t.position;
+  }
+  get rotation() {
+    var t;
+    return (t = this.object3d) == null ? void 0 : t.rotation;
+  }
+  get scale() {
+    var t;
+    return (t = this.object3d) == null ? void 0 : t.scale;
+  }
+  get add() {
+    var t;
+    return (t = this.object3d) == null ? void 0 : t.add.bind(this.object3d);
+  }
+  get remove() {
+    var t;
+    return (t = this.object3d) == null ? void 0 : t.remove.bind(this.object3d);
+  }
+  get visible() {
+    return this.object3d ? this.object3d.visible : !1;
   }
   create() {
   }
   render() {
   }
-  update(e, s) {
+  update(t, e) {
   }
-  resize(e, s) {
+  resize(t, e) {
   }
   show() {
-    return this.object3d && (this.object3d.visible = !0), this.visible = !0, this;
+    return this.object3d && (this.object3d.visible = !0), this;
   }
   hide() {
-    return this.object3d && (this.object3d.visible = !1), this.visible = !1, this;
-  }
-  isVisible() {
-    return this.visible;
+    return this.object3d && (this.object3d.visible = !1), this;
   }
-  createMesh(...e) {
-    return this.object3d = new t.Mesh(...e), this;
+  createMesh(...t) {
+    return this.object3d = new r.Mesh(...t), this;
   }
   createGroup() {
-    return this.object3d = new t.Group(), this;
-  }
-  createPoints(...e) {
-    return this.object3d = new t.Points(...e), this;
-  }
-  createCSS2DObject(e) {
-    return this.object3d = new c(e), this;
+    return this.object3d = new r.Group(), this;
   }
-  createCSS3DObject(e) {
-    return this.object3d = new o(e), this;
+  createPoints(...t) {
+    return this.object3d = new r.Points(...t), this;
   }
-  createCSS3DSprite(e) {
-    return this.object3d = new a(e), this;
+  createCSS2DObject(t) {
+    return this.object3d = new b(t), this;
   }
-  createSprite(e) {
-    return this.object3d = new t.Sprite(e), this;
+  createCSS3DObject(t) {
+    return this.object3d = new l(t), this;
   }
-  add(...e) {
-    return this.object3d.add(...e), this;
+  createCSS3DSprite(t) {
+    return this.object3d = new j(t), this;
   }
-  remove(...e) {
-    return this.object3d.remove(...e), this;
+  createSprite(t) {
+    return this.object3d = new r.Sprite(t), this;
   }
-  attach(e) {
-    return this.object3d.attach(e.object3d), this;
+  attach(...t) {
+    return [...t].forEach((e) => {
+      this.object3d.attach(e.object3d);
+    }), this;
   }
   getSize() {
-    const e = new t.Box3().setFromObject(this.object3d);
+    const t = new r.Box3().setFromObject(this.object3d);
     return {
-      min: e.min,
-      max: e.max,
-      size: e.getSize(new t.Vector3())
+      min: t.min,
+      max: t.max,
+      size: t.getSize(new r.Vector3())
     };
   }
-  traverse(e) {
-    e(this), this.children.forEach((s) => {
-      s.traverse(e);
+  traverse(t) {
+    t(this), this.children.forEach((e) => {
+      e.traverse(t);
     });
   }
+  clone() {
+    return this.drawController.clone(this);
+  }
+  instantiate(t) {
+    return this.drawController.instantiate(this, t);
+  }
+  erase() {
+    this.drawController.erase(this);
+  }
+  cloneMaterial() {
+    const t = this.object3d;
+    if (!t || !t.material)
+      return;
+    const e = t.material;
+    return Array.isArray(e) ? e.map((s) => s.clone()) : e.clone();
+  }
+  setMaterialList(t, e) {
+    const s = this.object3d;
+    if (!s || !s.material)
+      return;
+    this.materialList.origin || (this.materialList.origin = s.material);
+    const a = e === "clone" ? this.cloneMaterial() : e;
+    return this.materialList[t] = a, a;
+  }
+  useMaterial(t) {
+    const e = this.object3d;
+    !e || !e.material || this.useMaterialType === t || (this.useMaterialType = t, e.material = this.materialList[t]);
+  }
   dispose() {
-    r(this.object3d);
+    h(this.object3d), Object.keys(this.materialList).forEach((t) => {
+      t !== "origin" && c({
+        material: this.materialList[t]
+      });
+    });
   }
 }
 export {
-  m as B
+  w as B,
+  o as b,
+  n as o
 };

package/dist/colorCorrection.js

@@ -0,0 +1 @@
+"use strict";const p=require("three");function f(o){const c=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(o){for(const i in o)if(i!=="default"){const e=Object.getOwnPropertyDescriptor(o,i);Object.defineProperty(c,i,e.get?e:{enumerable:!0,get:()=>o[i]})}}return c.default=o,Object.freeze(c)}const m=f(p),t={linearSRGB:"srgb-linear",sRGB:"srgb"},n={Linear:3e3,sRGB:3001};function u({node:o,material:c,texture:i}){let e=i?{map:i}:c||(o==null?void 0:o.material);e&&!Array.isArray(e)&&(e=[e]),e==null||e.forEach(l=>{var s,a;const r=l;+m.REVISION<152?((s=r.color)==null||s.convertSRGBToLinear(),(a=r.emissive)==null||a.convertSRGBToLinear(),r.map&&(r.map.encoding=n.sRGB),r.emissiveMap&&(r.emissiveMap.encoding=n.sRGB)):(r.map&&(r.map.colorSpace=t.sRGB),r.emissiveMap&&(r.emissiveMap.colorSpace=t.sRGB))})}exports.ColorSpace=t;exports.TextureEncoding=n;exports.colorCorrection=u;

package/dist/colorCorrection.module.js

@@ -0,0 +1,25 @@
+import * as R from "three";
+const n = {
+  linearSRGB: "srgb-linear",
+  sRGB: "srgb"
+}, p = {
+  Linear: 3e3,
+  sRGB: 3001
+};
+function l({
+  node: e,
+  material: a,
+  texture: o
+}) {
+  let s = o ? { map: o } : a || (e == null ? void 0 : e.material);
+  s && !Array.isArray(s) && (s = [s]), s == null || s.forEach((m) => {
+    var r, c;
+    const i = m;
+    +R.REVISION < 152 ? ((r = i.color) == null || r.convertSRGBToLinear(), (c = i.emissive) == null || c.convertSRGBToLinear(), i.map && (i.map.encoding = p.sRGB), i.emissiveMap && (i.emissiveMap.encoding = p.sRGB)) : (i.map && (i.map.colorSpace = n.sRGB), i.emissiveMap && (i.emissiveMap.colorSpace = n.sRGB));
+  });
+}
+export {
+  n as C,
+  p as T,
+  l as c
+};

package/dist/core/BaseObject.d.ts

@@ -1,29 +1,37 @@
 import * as THREE from 'three';
 import type Pencil from "./Pencil";
+import type Draw from "../plugins/Draw";
+export declare const objMap: WeakMap<THREE.Object3D<THREE.Event>, IBaseObject>;
+export declare const baseObjectByObject3D: (obj: THREE.Object3D) => IBaseObject | undefined;
 export { CSS3DObject, CSS3DSprite, } from 'three/examples/jsm/renderers/CSS3DRenderer';
 export { CSS2DObject } from 'three/examples/jsm/renderers/CSS2DRenderer';
 export default class BaseObject {
-    objecttype__: string;
+    objectType: string;
+    objectOptions?: Record<string, any>;
     key: string;
     pencil: Pencil;
+    drawController: Draw<any>;
     object3d: THREE.Object3D;
     userData: Record<string, any>;
     get parent(): IBaseObject | THREE.Scene;
     get children(): IBaseObject[];
+    get position(): THREE.Vector3;
+    get rotation(): THREE.Euler;
+    get scale(): THREE.Vector3;
+    get add(): (...object: THREE.Object3D<THREE.Event>[]) => THREE.Object3D<THREE.Event>;
+    get remove(): (...object: THREE.Object3D<THREE.Event>[]) => THREE.Object3D<THREE.Event>;
+    get visible(): boolean;
     pm: {
         promise: Promise<any>;
         resolve: (value?: any) => void;
         reject: (value?: any) => void;
     };
-    visible: boolean;
-    init(): void;
     create(): void;
     render(): void;
     update(delta: number, elapsed: number): void;
     resize(width: number, height: number): void;
     show(): this;
     hide(): this;
-    isVisible(): boolean;
     createMesh(...args: ConstructorParameters<typeof THREE.Mesh>): this;
     createGroup(): this;
     createPoints(...args: ConstructorParameters<typeof THREE.Points>): this;
@@ -31,15 +39,21 @@ export default class BaseObject {
     createCSS3DObject(dom: HTMLElement): this;
     createCSS3DSprite(dom: HTMLElement): this;
     createSprite(material: THREE.SpriteMaterial): this;
-    add(...args: Parameters<THREE.Object3D['add']>): this;
-    remove(...args: Parameters<THREE.Object3D['remove']>): this;
-    attach(o: IBaseObject): this;
+    attach(...args: IBaseObject[]): this;
     getSize(): {
         min: THREE.Vector3;
         max: THREE.Vector3;
         size: THREE.Vector3;
     };
     traverse(fn: (o: IBaseObject) => void): void;
+    clone(): Promise<any>;
+    instantiate(extendsOptions?: any): Promise<any>;
+    erase(): void;
+    cloneMaterial(): THREE.Material | THREE.Material[] | undefined;
+    materialList: Record<string, THREE.Material | THREE.Material[]>;
+    setMaterialList(name: string, material: THREE.Material | THREE.Material[] | 'clone'): THREE.Material | THREE.Material[] | undefined;
+    useMaterialType: string;
+    useMaterial(name: string): void;
     dispose(): void;
 }
 export interface IBaseObject extends BaseObject {

package/dist/core/Camera.d.ts

@@ -17,6 +17,7 @@ interface Options {
     height: number;
     isdev: boolean;
     cameraParams: CameraParams | THREE.PerspectiveCamera;
+    cameraControls?: boolean;
 }
 export default class {
     options: Options;

package/dist/core/Composer.d.ts

@@ -1,21 +1,46 @@
 import * as THREE from 'three';
 import GUI from 'lil-gui';
-import { EffectComposer, CopyPass, EffectPass, SelectiveBloomEffect } from 'postprocessing';
+import { EffectComposer, CopyPass, EffectPass, BlendFunction, SelectiveBloomEffect, ToneMappingEffect, ToneMappingMode } from 'postprocessing';
+import CrossFadePass from './pass/CrossFadePass';
 export interface BloomParams {
+    luminancePass: boolean;
     luminanceThreshold: number;
     luminanceSmoothing: number;
     mipmapBlur: boolean;
     intensity: number;
+    blendFunction: BlendFunction;
+    ignoreBackground: boolean;
 }
 export declare const defaultBloomParams: {
+    luminancePass: boolean;
     luminanceThreshold: number;
     luminanceSmoothing: number;
     mipmapBlur: boolean;
     intensity: number;
+    blendFunction: BlendFunction;
+    ignoreBackground: boolean;
+};
+export interface ToneMappingParams {
+    mode: ToneMappingMode;
+    resolution: number;
+    whitePoint: number;
+    middleGrey: number;
+    minLuminance: number;
+    averageLuminance: number;
+    adaptationRate: number;
+}
+export declare const defaultToneMappingParams: {
+    mode: ToneMappingMode;
+    resolution: number;
+    whitePoint: number;
+    middleGrey: number;
+    minLuminance: number;
+    averageLuminance: number;
+    adaptationRate: number;
 };
 export interface ComposerParams {
     multisampling: number;
-    type: THREE.TextureDataType;
+    frameBufferType: THREE.TextureDataType;
     encoding: THREE.TextureEncoding;
 }
 interface Options {
@@ -33,11 +58,17 @@ export default class {
     fxaaPass?: EffectPass;
     bloomPass?: EffectPass;
     bloomEffect?: SelectiveBloomEffect;
+    crossFadePass?: CrossFadePass;
+    toneMappingPass?: EffectPass;
+    toneMappingEffect?: ToneMappingEffect;
     options: Options;
     active: boolean;
     constructor(options: Options);
     addCopyPass(): void;
+    addCrossFadePass(): void;
     addFXAAPass(): void;
+    addToneMappingPass(params: ToneMappingParams): void;
+    addToneMappingGui(gui: GUI): void;
     addBloomPass(params: BloomParams): void;
     addBloomGui(gui: GUI): void;
     toggleBloomSelection(obj?: THREE.Object3D<THREE.Event>, state?: boolean): void;

package/dist/core/Controls.d.ts

@@ -0,0 +1,56 @@
+import * as THREE from 'three';
+import CameraControls from 'camera-controls';
+export interface ControlsParams {
+    domElement: HTMLElement;
+}
+export declare const defaultControlParams: {};
+interface Options {
+    camera: THREE.PerspectiveCamera | THREE.OrthographicCamera;
+    controlsParams: ControlsParams;
+    customControl?: any;
+}
+export default class {
+    options: Options;
+    controls?: any;
+    cameraControls?: CameraControls;
+    cameraControlsAction: Readonly<{
+        readonly NONE: 0;
+        readonly ROTATE: 1;
+        readonly TRUCK: 2;
+        readonly OFFSET: 4;
+        readonly DOLLY: 8;
+        readonly ZOOM: 16;
+        readonly TOUCH_ROTATE: 32;
+        readonly TOUCH_TRUCK: 64;
+        readonly TOUCH_OFFSET: 128;
+        readonly TOUCH_DOLLY: 256;
+        readonly TOUCH_ZOOM: 512;
+        readonly TOUCH_DOLLY_TRUCK: 1024;
+        readonly TOUCH_DOLLY_OFFSET: 2048;
+        readonly TOUCH_DOLLY_ROTATE: 4096;
+        readonly TOUCH_ZOOM_TRUCK: 8192;
+        readonly TOUCH_ZOOM_OFFSET: 16384;
+        readonly TOUCH_ZOOM_ROTATE: 32768;
+    }>;
+    private limitPanV?;
+    constructor(options: Options);
+    limitPan({ maxX, minX, maxZ, minZ, maxY, minY, }: {
+        maxX?: number | undefined;
+        minX?: number | undefined;
+        maxZ?: number | undefined;
+        minZ?: number | undefined;
+        maxY?: number | undefined;
+        minY?: number | undefined;
+    }): void;
+    changeRotation({ vertical, horizontal, distance, }: {
+        vertical?: number;
+        horizontal?: number;
+        distance?: number;
+    }): void;
+    enable(): void;
+    disable(): void;
+    autoRotateSpeed: number;
+    update(delta: number): void;
+    dispose(): void;
+}
+export {};

package/dist/core/Pencil.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="postprocessing" />
 import * as THREE from 'three';
 import { EventEmitter } from 'events';
 import Stats from 'three/examples/jsm/libs/stats.module';
@@ -5,9 +6,10 @@ import GUI from 'lil-gui';
 import { RendererParams } from "./Renderer";
 import { CameraParams } from "./Camera";
 import SceneController, { SceneParams } from "./Scene";
-import ControlController, { ControlParams } from "./Control";
+import ControlsController, { ControlsParams } from "./Controls";
+import TransformController from "./TransformControls";
 import CSSRendererController, { CSSRendererParams } from "./CSSRenderer";
-import ComposerController, { BloomParams } from "./Composer";
+import ComposerController, { BloomParams, ToneMappingParams } from "./Composer";
 type DeepRequired<T> = T extends Function | HTMLElement ? T : T extends object ? {
     [P in keyof T]-?: DeepRequired<T[P]>;
 } : T;
@@ -18,18 +20,23 @@ interface Options {
     gui?: boolean;
     axesHelper?: boolean;
     control?: boolean | any;
-    controlParams?: Partial<ControlParams>;
+    controlParams?: Partial<ControlsParams>;
+    transformControls?: boolean;
     resizeObserver?: boolean;
     renderer?: {
         antialias?: false | 'fxaa' | 'msaa';
     } & Omit<Partial<RendererParams>, 'antialias'>;
     multisampling?: number;
+    frameBufferType?: THREE.TextureDataType;
     passes?: any[];
     staticRender?: boolean;
     scene?: Partial<SceneParams>;
     camera?: Partial<CameraParams> | THREE.PerspectiveCamera;
     bloom?: boolean;
     bloomParams?: Partial<BloomParams>;
+    toneMapping?: boolean;
+    toneMappingParams?: Partial<ToneMappingParams>;
+    crossOpacity?: boolean;
     css2DRenderer?: boolean;
     css2DRendererParams?: Partial<CSSRendererParams>;
     css3DRenderer?: boolean;
@@ -44,7 +51,8 @@ export default class Pencil {
     private rendererController;
     cssRendererController?: CSSRendererController;
     private cameraController;
-    controlController?: ControlController;
+    controlsController?: ControlsController;
+    transformController?: TransformController;
     sceneController: SceneController;
     stats?: Stats;
     gui?: GUI;
@@ -52,7 +60,8 @@ export default class Pencil {
     private raycaster;
     installPlugins: Map<any, boolean>;
     get renderer(): THREE.WebGLRenderer;
-    get control(): import("three/examples/jsm/controls/OrbitControls").OrbitControls | undefined;
+    get control(): any;
+    get cameraControls(): import("camera-controls").default | undefined;
     get camera(): THREE.PerspectiveCamera;
     get scene(): THREE.Scene;
     event: EventEmitter;
@@ -64,15 +73,16 @@ export default class Pencil {
         gui: boolean;
         axesHelper: boolean;
         control: boolean;
+        transformControls: boolean;
         resizeObserver: boolean;
         renderer: {
             antialias: string;
             devicePixelRatio: number;
             powerPreference: string;
-            toneMapping: string;
             toneMappingExposure: number;
             alpha: boolean;
-            outputEncoding: THREE.TextureEncoding;
+            outputEncoding: 3000;
+            outputColorSpace: "srgb";
             logarithmicDepthBuffer: boolean;
             preserveDrawingBuffer: boolean;
             stencil: boolean;
@@ -81,6 +91,7 @@ export default class Pencil {
         };
         staticRender: boolean;
         multisampling: number;
+        frameBufferType: 1009;
         scene: {
             background: null;
         };
@@ -92,11 +103,25 @@ export default class Pencil {
         };
         bloom: boolean;
         bloomParams: {
+            luminancePass: boolean;
             luminanceThreshold: number;
             luminanceSmoothing: number;
             mipmapBlur: boolean;
             intensity: number;
+            blendFunction: import("postprocessing").BlendFunction;
+            ignoreBackground: boolean;
         };
+        toneMapping: boolean;
+        toneMappingParams: {
+            mode: import("postprocessing").ToneMappingMode;
+            resolution: number;
+            whitePoint: number;
+            middleGrey: number;
+            minLuminance: number;
+            averageLuminance: number;
+            adaptationRate: number;
+        };
+        crossOpacity: boolean;
         css2DRenderer: boolean;
         css2DRendererParams: {
             zIndex: string;
@@ -106,12 +131,14 @@ export default class Pencil {
             zIndex: string;
         };
     };
-    constructor(options: Options);
+    constructor(options: Options, plugin?: any);
     use(plugin: any, ...args: any[]): void;
     private init;
     private initComposer;
+    get opacity(): any;
+    set opacity(value: any);
     private initCSSRenderer;
-    private initControl;
+    private initControls;
     getSize(): {
         width: number;
         height: number;

package/dist/core/Renderer.d.ts

@@ -1,20 +1,13 @@
 import * as THREE from 'three';
-import GUI from 'lil-gui';
-declare const toneMappingOptions: {
-    None: THREE.ToneMapping;
-    Linear: THREE.ToneMapping;
-    Reinhard: THREE.ToneMapping;
-    Cineon: THREE.ToneMapping;
-    ACESFilmic: THREE.ToneMapping;
-};
+import { ColorSpace, TextureEncoding } from "../utils/colorCorrection";
 export interface RendererParams {
     antialias: boolean;
     devicePixelRatio: number;
     powerPreference: 'high-performance' | 'low-power' | 'default';
-    toneMapping: keyof typeof toneMappingOptions;
     toneMappingExposure: number;
     alpha: boolean;
-    outputEncoding: THREE.TextureEncoding;
+    outputEncoding: (typeof TextureEncoding)[keyof typeof TextureEncoding];
+    outputColorSpace: (typeof ColorSpace)[keyof typeof ColorSpace];
     logarithmicDepthBuffer: boolean;
     preserveDrawingBuffer: boolean;
     canvas?: HTMLCanvasElement | THREE.OffscreenCanvas;
@@ -27,10 +20,10 @@ export declare const defaultRendererParams: {
     antialias: boolean;
     devicePixelRatio: number;
     powerPreference: string;
-    toneMapping: string;
     toneMappingExposure: number;
     alpha: boolean;
-    outputEncoding: THREE.TextureEncoding;
+    outputEncoding: 3000;
+    outputColorSpace: "srgb";
     logarithmicDepthBuffer: boolean;
     preserveDrawingBuffer: boolean;
     stencil: boolean;
@@ -51,7 +44,6 @@ export default class {
     constructor(options: Options);
     setSize(width: number, height: number): void;
     render(): void;
-    setGui(gui: GUI): void;
     dispose(): void;
 }
 export {};

package/dist/core/TransformControls.d.ts

@@ -0,0 +1,18 @@
+import * as THREE from 'three';
+import { TransformControls } from 'three/examples/jsm/controls/TransformControls';
+import { EventEmitter } from 'events';
+interface Options {
+    renderer: THREE.WebGLRenderer;
+    scene: THREE.Scene;
+    camera: THREE.Camera;
+}
+export default class {
+    controls: TransformControls;
+    get detach(): () => TransformControls;
+    get attach(): (object: THREE.Object3D<THREE.Event>) => TransformControls;
+    event: EventEmitter;
+    constructor(options: Options);
+    addEvent(): void;
+    dispose(): void;
+}
+export {};

package/dist/core/pass/CrossFadePass.d.ts

@@ -0,0 +1,11 @@
+import { ShaderMaterial } from 'three';
+import { Pass } from 'postprocessing';
+declare class CrossFadeMaterial extends ShaderMaterial {
+    constructor();
+}
+export default class CrossFadePass extends Pass {
+    constructor();
+    fullscreenMaterial: CrossFadeMaterial;
+    render(renderer: THREE.WebGLRenderer, inputBuffer: THREE.WebGLRenderTarget, outputBuffer: THREE.WebGLRenderTarget): void;
+}
+export {};