gl-draw 0.1.6 → 0.2.0

package/README.md

@@ -1 +1,258 @@
-1
+[![npm version](https://img.shields.io/npm/v/gl-draw.svg?style=flat-square)](https://www.npmjs.com/package/gl-draw)
+[![npm downloads](https://img.shields.io/npm/dm/gl-draw.svg?style=flat-square)](https://www.npmjs.com/package/gl-draw)
+
+gl-draw 旨在简化基于 Three.js 的可视化开发。 用户可以通过组合现有 Object 或利用 gl-draw 的可扩展架构来满足自定义需求，从而以快速获得令人印象深刻的视觉效果。
+
+<!-- Documentation -->
+
+## 快速开始
+
+```bash
+yarn add gl-draw
+# or npm install gl-draw
+```
+
+依赖
+
+```javascript
+{
+  "@tweenjs/tween.js": "^18.6.4",
+  "three": "^0.136.0"
+}
+```
+使用
+
+核心类：
+
+- Pencil: 初始化场景，控制整个场景的渲染、更新和废除
+- DrawController: 用于场景中元素的绘制、获取和删除
+- BaseObject: 元素基类，封装了一些生命周期和通用方法
+
+
+
+```javascript
+import {Node, Video, Image} from 'gl-draw/dist/objects'
+class MyObject extends BaseObject {
+  create() {
+    const geo = new THREE.PlaneBufferGeometry(100, 100)
+    const mat = new THREE.MeshBasicMaterial({
+      color: new THREE.Color('#00243B'),
+    })
+    this.createMesh(geo, mat)
+  }
+}
+const drawController = new DrawController({
+    Node,
+    Video,
+    Image,
+    obj: MyObject,
+});
+const pencil = new Pencil(
+  {
+    container: document.querySelector('#container'),
+    control: true,
+    axesHelper: true,
+    stats: true,
+  }
+);
+pencil.use(drawController)
+await drawController.draw('obj')
+await Promise.all(drawController.objectsPromise);
+pencil.start();
+
+```
+
+## 参数&API
+
+### Pencil
+
+```js
+// 参数
+interface Options {
+  // 容器元素
+  container: HTMLElement;
+  // 是否为开发模式
+  isdev?: boolean;
+  // 是否创建stats
+  stats?: boolean;
+  // 是否创建gui
+  gui?: boolean;
+  // 是否显示坐标轴
+  axesHelper?: boolean;
+  // 是否开启控制器
+  control?: boolean;
+  // 如果为true则使用MapControls否则使用OrbitControls
+  mapControl?: boolean;
+  // WebGLRenderer配置，与three.js中配置相同
+  renderer?: {
+    antialias?: false | 'fxaa' | 'smaa' | 'ssaa' | 'msaa';
+  } & Omit<Partial<RendererParams>, 'antialias'>;
+  // MSAA抗锯齿采样数，默认为8
+  multisampling?: number;
+  // 按需渲染，开启后只有当相机移动时才重新渲染
+  staticRender?: boolean;
+  // 配置背景
+  scene?: {
+    background?: THREE.Scene['background'];
+  }
+  // 摄像机机相关配置
+  camera?: Partial<{
+     fov: number;
+     near: number;
+     far: number;
+  }> | THREE.PerspectiveCamera;
+  // 是否开启辉光后期处理
+  bloom?: boolean;
+  // 辉光参数
+  bloomParams?: Partial<{
+     threshold: number;
+     strength: number;
+     radius: number;
+  }>;
+  // 是否开启描边后期处理
+  outline?: boolean;
+  // 描边参数，具体可查看https://threejs.org/examples/?q=outline#webgl_postprocessing_outline
+  outlineParams?: Partial<OutlineParams>;
+  // 是否开启ssr后期处理
+  ssr?: boolean;
+  // ssr参数，具体可查看https://threejs.org/examples/?q=ssr#webgl_postprocessing_ssr
+  ssrParams?: Partial<SSRParams>;
+  // 是否加载css2DRenderer
+  css2DRenderer?: boolean;
+  // 配置css2DRenderer容器z-index
+  css2DRendererParams?: Partial<{
+    zIndex: string;
+  }>;
+  // 是否加载css3DRenderer
+  css3DRenderer?: boolean;
+  // 配置css3DRenderer容器z-index
+  css3DRendererParams?: Partial<{
+    zIndex: string;
+  }>;
+}
+
+// API
+// 获取renderer
+(getter) Pencil.renderer: THREE.WebGLRenderer | undefined
+
+// 获取控制器
+(getter) Pencil.control: OrbitControls | undefined
+
+// 获取摄像机
+(getter) Pencil.camera: THREE.PerspectiveCamera | undefined
+
+// 获取Scene
+(getter) Pencil.scene: THREE.Scene | undefined
+
+// 事件处理
+(property) Pencil.event: EventEmitter
+
+// 射线交互
+(method) Pencil.pick(event: MouseEvent, objects?: THREE.Object3D[], recursive?: boolean): {
+    object: THREE.Object3D<THREE.Event>;
+    intersects: THREE.Intersection<THREE.Object3D<THREE.Event>>[];
+} | undefined
+
+// 开启渲染循环
+(method) Pencil.start(): void
+
+// 废除整个场景
+(method) Pencil.dispose(): void
+```
+### DrawController
+```js
+// 参数
+{ [key: string]: new (...args: any[]) => IBaseObject; }
+
+// API
+// 所有创建元素的Promise
+(getter) Draw.objectsPromise: Promise<any>[]
+
+// 根据名称和key获取元素
+(method) Draw.getObject<Y extends Extract<keyof T, string>>(nameOrigin: Y, options?: {
+    key: string;
+} | undefined): InstanceType<T[Y]>
+
+// 根据名称和key获取所有元素
+(method) Draw.getAllObject<Y extends Extract<keyof T, string>>(nameOrigin: Y, options?: {
+    key: string;
+} | undefined): InstanceType<T[Y]>[]
+
+// 绘制元素
+(method) Draw.draw(nameOrigin: Y, options?: ConstructorParameters<T[Y]>[0] & {
+    key?: string;
+    target?: U;
+}, target?: U): Promise<...>
+
+// 删除元素
+(method) Dra.erase(...args: (KeyOf<T> | `${KeyOf<T>}#${string}` | InstanceType<T[keyof T]>)[]): void
+```
+### BaseObject
+```js
+// API
+// 该元素唯一key
+(property) BaseObject.key: string
+
+// 该元素对应Pencil
+(property) BaseObject.pencil: Pencil
+
+// 内部保存最终加载到场景中的three对象
+(property) BaseObject.object3d: THREE.Object3D<THREE.Event>
+
+// 该元素Promise，在创建完成后会resolve
+(property) BaseObject.pm: {
+    promise: Promise<any>;
+    resolve: (value?: any) => void;
+    reject: (value?: any) => void;
+}
+
+// 获取父元素
+(getter) BaseObject.parent: IBaseObject | THREE.Scene
+
+// 获取子元素
+(getter) BaseObject.children: IBaseObject[]
+
+// create钩子在创建时调用
+(method) BaseObject.create(): void
+
+// render钩子在创建完成加入到场景后调用
+(method) BaseObject.render(): void
+
+// update钩子在每一帧渲染时调用
+(method) BaseObject.update(delta: number, elapsed: number): void
+
+// 显示元素
+(method) BaseObject.show(): this
+
+// 隐藏元素
+(method) BaseObject.hide(): this
+
+// 获取该元素包围盒
+(method) BaseObject.getSize(): {
+    min: THREE.Vector3;
+    max: THREE.Vector3;
+    size: THREE.Vector3;
+}
+
+// 废除元素
+(method) BaseObject.dispose(): void
+```
+
+## 提示
+### @tweenjs/tween.js 使用需要注册
+```js
+const pencil = new Pencil({
+  ...
+})
+pencil.use({
+  install: () => {},
+  update: () => {
+    TWEEN.update();
+  },
+  dispose: () => {
+    TWEEN.removeAll();
+  },
+})
+```
+
+

package/dist/effect/bloom.d.ts

@@ -0,0 +1,14 @@
+import type { IBaseObject } from '../core/BaseObject';
+interface Options {
+    exclude?: THREE.Mesh[];
+    include?: THREE.Mesh[];
+}
+export default class {
+    object: IBaseObject;
+    options: Options;
+    constructor(object: IBaseObject, options?: Options);
+    private check;
+    enable(): void;
+    disable(): void;
+}
+export {};

package/dist/effect/index.d.ts

@@ -0,0 +1,5 @@
+export { default as Bloom } from './bloom';
+export { default as Outline } from './outline';
+export { default as SSR } from './ssr';
+export { default as Scan } from './scan';
+export { default as Scan2 } from './scan2';

package/dist/effect/index.js

@@ -0,0 +1,160 @@
+(function(){var K={666:function(b){var O=function(m){"use strict";var F=Object.prototype,D=F.hasOwnProperty,M,q=typeof Symbol=="function"?Symbol:{},A=q.iterator||"@@iterator",V=q.asyncIterator||"@@asyncIterator",I=q.toStringTag||"@@toStringTag";function W(r,t,o){return Object.defineProperty(r,t,{value:o,enumerable:!0,configurable:!0,writable:!0}),r[t]}try{W({},"")}catch(r){W=function(t,o,c){return t[o]=c}}function Y(r,t,o,c){var u=t&&t.prototype instanceof H?t:H,y=Object.create(u.prototype),j=new v(c||[]);return y._invoke=i(r,o,j),y}m.wrap=Y;function G(r,t,o){try{return{type:"normal",arg:r.call(t,o)}}catch(c){return{type:"throw",arg:c}}}var R="suspendedStart",J="suspendedYield",L="executing",N="completed",P={};function H(){}function T(){}function E(){}var U={};W(U,A,function(){return this});var p=Object.getPrototypeOf,f=p&&p(p(h([])));f&&f!==F&&D.call(f,A)&&(U=f);var a=E.prototype=H.prototype=Object.create(U);T.prototype=E,W(a,"constructor",E),W(E,"constructor",T),T.displayName=W(E,I,"GeneratorFunction");function n(r){["next","throw","return"].forEach(function(t){W(r,t,function(o){return this._invoke(t,o)})})}m.isGeneratorFunction=function(r){var t=typeof r=="function"&&r.constructor;return t?t===T||(t.displayName||t.name)==="GeneratorFunction":!1},m.mark=function(r){return Object.setPrototypeOf?Object.setPrototypeOf(r,E):(r.__proto__=E,W(r,I,"GeneratorFunction")),r.prototype=Object.create(a),r},m.awrap=function(r){return{__await:r}};function e(r,t){function o(y,j,x,g){var _=G(r[y],r,j);if(_.type==="throw")g(_.arg);else{var z=_.arg,C=z.value;return C&&typeof C=="object"&&D.call(C,"__await")?t.resolve(C.__await).then(function(k){o("next",k,x,g)},function(k){o("throw",k,x,g)}):t.resolve(C).then(function(k){z.value=k,x(z)},function(k){return o("throw",k,x,g)})}}var c;function u(y,j){function x(){return new t(function(g,_){o(y,j,g,_)})}return c=c?c.then(x,x):x()}this._invoke=u}n(e.prototype),W(e.prototype,V,function(){return this}),m.AsyncIterator=e,m.async=function(r,t,o,c,u){u===void 0&&(u=Promise);var y=new e(Y(r,t,o,c),u);return m.isGeneratorFunction(t)?y:y.next().then(function(j){return j.done?j.value:y.next()})};function i(r,t,o){var c=R;return function(y,j){if(c===L)throw new Error("Generator is already running");if(c===N){if(y==="throw")throw j;return w()}for(o.method=y,o.arg=j;;){var x=o.delegate;if(x){var g=d(x,o);if(g){if(g===P)continue;return g}}if(o.method==="next")o.sent=o._sent=o.arg;else if(o.method==="throw"){if(c===R)throw c=N,o.arg;o.dispatchException(o.arg)}else o.method==="return"&&o.abrupt("return",o.arg);c=L;var _=G(r,t,o);if(_.type==="normal"){if(c=o.done?N:J,_.arg===P)continue;return{value:_.arg,done:o.done}}else _.type==="throw"&&(c=N,o.method="throw",o.arg=_.arg)}}}function d(r,t){var o=r.iterator[t.method];if(o===M){if(t.delegate=null,t.method==="throw"){if(r.iterator.return&&(t.method="return",t.arg=M,d(r,t),t.method==="throw"))return P;t.method="throw",t.arg=new TypeError("The iterator does not provide a 'throw' method")}return P}var c=G(o,r.iterator,t.arg);if(c.type==="throw")return t.method="throw",t.arg=c.arg,t.delegate=null,P;var u=c.arg;if(!u)return t.method="throw",t.arg=new TypeError("iterator result is not an object"),t.delegate=null,P;if(u.done)t[r.resultName]=u.value,t.next=r.nextLoc,t.method!=="return"&&(t.method="next",t.arg=M);else return u;return t.delegate=null,P}n(a),W(a,I,"Generator"),W(a,A,function(){return this}),W(a,"toString",function(){return"[object Generator]"});function s(r){var t={tryLoc:r[0]};1 in r&&(t.catchLoc=r[1]),2 in r&&(t.finallyLoc=r[2],t.afterLoc=r[3]),this.tryEntries.push(t)}function l(r){var t=r.completion||{};t.type="normal",delete t.arg,r.completion=t}function v(r){this.tryEntries=[{tryLoc:"root"}],r.forEach(s,this),this.reset(!0)}m.keys=function(r){var t=[];for(var o in r)t.push(o);return t.reverse(),function c(){for(;t.length;){var u=t.pop();if(u in r)return c.value=u,c.done=!1,c}return c.done=!0,c}};function h(r){if(r){var t=r[A];if(t)return t.call(r);if(typeof r.next=="function")return r;if(!isNaN(r.length)){var o=-1,c=function u(){for(;++o<r.length;)if(D.call(r,o))return u.value=r[o],u.done=!1,u;return u.value=M,u.done=!0,u};return c.next=c}}return{next:w}}m.values=h;function w(){return{value:M,done:!0}}return v.prototype={constructor:v,reset:function(r){if(this.prev=0,this.next=0,this.sent=this._sent=M,this.done=!1,this.delegate=null,this.method="next",this.arg=M,this.tryEntries.forEach(l),!r)for(var t in this)t.charAt(0)==="t"&&D.call(this,t)&&!isNaN(+t.slice(1))&&(this[t]=M)},stop:function(){this.done=!0;var r=this.tryEntries[0],t=r.completion;if(t.type==="throw")throw t.arg;return this.rval},dispatchException:function(r){if(this.done)throw r;var t=this;function o(g,_){return y.type="throw",y.arg=r,t.next=g,_&&(t.method="next",t.arg=M),!!_}for(var c=this.tryEntries.length-1;c>=0;--c){var u=this.tryEntries[c],y=u.completion;if(u.tryLoc==="root")return o("end");if(u.tryLoc<=this.prev){var j=D.call(u,"catchLoc"),x=D.call(u,"finallyLoc");if(j&&x){if(this.prev<u.catchLoc)return o(u.catchLoc,!0);if(this.prev<u.finallyLoc)return o(u.finallyLoc)}else if(j){if(this.prev<u.catchLoc)return o(u.catchLoc,!0)}else if(x){if(this.prev<u.finallyLoc)return o(u.finallyLoc)}else throw new Error("try statement without catch or finally")}}},abrupt:function(r,t){for(var o=this.tryEntries.length-1;o>=0;--o){var c=this.tryEntries[o];if(c.tryLoc<=this.prev&&D.call(c,"finallyLoc")&&this.prev<c.finallyLoc){var u=c;break}}u&&(r==="break"||r==="continue")&&u.tryLoc<=t&&t<=u.finallyLoc&&(u=null);var y=u?u.completion:{};return y.type=r,y.arg=t,u?(this.method="next",this.next=u.finallyLoc,P):this.complete(y)},complete:function(r,t){if(r.type==="throw")throw r.arg;return r.type==="break"||r.type==="continue"?this.next=r.arg:r.type==="return"?(this.rval=this.arg=r.arg,this.method="return",this.next="end"):r.type==="normal"&&t&&(this.next=t),P},finish:function(r){for(var t=this.tryEntries.length-1;t>=0;--t){var o=this.tryEntries[t];if(o.finallyLoc===r)return this.complete(o.completion,o.afterLoc),l(o),P}},catch:function(r){for(var t=this.tryEntries.length-1;t>=0;--t){var o=this.tryEntries[t];if(o.tryLoc===r){var c=o.completion;if(c.type==="throw"){var u=c.arg;l(o)}return u}}throw new Error("illegal catch attempt")},delegateYield:function(r,t,o){return this.delegate={iterator:h(r),resultName:t,nextLoc:o},this.method==="next"&&(this.arg=M),P}},m}(b.exports);try{regeneratorRuntime=O}catch(m){typeof globalThis=="object"?globalThis.regeneratorRuntime=O:Function("r","regeneratorRuntime = r")(O)}}},Q={};function S(b){var O=Q[b];if(O!==void 0)return O.exports;var m=Q[b]={exports:{}};return K[b](m,m.exports,S),m.exports}(function(){S.n=function(b){var O=b&&b.__esModule?function(){return b.default}:function(){return b};return S.d(O,{a:O}),O}})(),function(){S.d=function(b,O){for(var m in O)S.o(O,m)&&!S.o(b,m)&&Object.defineProperty(b,m,{enumerable:!0,get:O[m]})}}(),function(){S.o=function(b,O){return Object.prototype.hasOwnProperty.call(b,O)}}(),function(){S.r=function(b){typeof Symbol!="undefined"&&Symbol.toStringTag&&Object.defineProperty(b,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(b,"__esModule",{value:!0})}}();var $={};(function(){"use strict";S.r($),S.d($,{Bloom:function(){return I},Outline:function(){return W},SSR:function(){return Y},Scan:function(){return E},Scan2:function(){return U}});function b(p,f){if(!(p instanceof f))throw new TypeError("Cannot call a class as a function")}function O(p,f,a){return f in p?Object.defineProperty(p,f,{value:a,enumerable:!0,configurable:!0,writable:!0}):p[f]=a,p}function m(p){for(var f=1;f<arguments.length;f++){var a=arguments[f]!=null?arguments[f]:{},n=Object.keys(a);typeof Object.getOwnPropertySymbols=="function"&&(n=n.concat(Object.getOwnPropertySymbols(a).filter(function(e){return Object.getOwnPropertyDescriptor(a,e).enumerable}))),n.forEach(function(e){O(p,e,a[e])})}return p}var F=function(){try{var p=document.createElement("canvas");return!!(window.WebGL2RenderingContext&&p.getContext("webgl2"))}catch(f){return!1}},D=0,M=1,q=null,A=F()!==!1,V={},I=function(){"use strict";function p(a){var n=arguments.length>1&&arguments[1]!==void 0?arguments[1]:{};b(this,p),this.object=a,this.options=m({},n)}var f=p.prototype;return f.check=function(){var n,e=this.object.pencil;return!((n=e.composerController)===null||n===void 0)&&n.bloomController?!0:(console.warn("err:pencil.options.bloom"),!1)},f.enable=function(){var n;if(!!this.check()){var e=this.object.pencil,i=this.options,d=i.exclude,s=i.include,l=(n=e.composerController)===null||n===void 0?void 0:n.bloomController;l.enable(),e.event.emit("passcheck","bloom"),this.object.object3d.traverse(function(v){var h=v;s&&!s.includes(h)||d&&d.includes(h)||(h.layers.enable(M),V[h.uuid]=!0)})}},f.disable=function(){var n;if(!!this.check()){var e=this.object.pencil,i=this.options,d=i.exclude,s=i.include,l=(n=e.composerController)===null||n===void 0?void 0:n.bloomController;this.object.object3d.traverse(function(v){var h=v;s&&!s.includes(h)||d&&d.includes(h)||(h.layers.disable(M),delete V[h.uuid])}),Object.keys(V).length===0&&(l.disable(),e.event.emit("passcheck","bloom"))}},p}(),W=function(){"use strict";function p(a){var n=arguments.length>1&&arguments[1]!==void 0?arguments[1]:{};b(this,p),this.object=a,this.options=m({},n)}var f=p.prototype;return f.check=function(){var n,e=this.object.pencil;return!((n=e.composerController)===null||n===void 0)&&n.outlineController?!0:(console.warn("err:pencil.options.outline"),!1)},f.enable=function(){var n;if(!!this.check()){var e=this.object.pencil,i=this.options,d=i.exclude,s=i.include,l=(n=e.composerController)===null||n===void 0?void 0:n.outlineController;l.enable(),e.event.emit("passcheck","outline"),this.object.object3d.traverse(function(v){var h=v;s&&!s.includes(h)||d&&d.includes(h)||h.material&&l.selectedObjects.push(h)})}},f.disable=function(){var n;if(!!this.check()){var e=this.object.pencil,i=this.options,d=i.exclude,s=i.include,l=(n=e.composerController)===null||n===void 0?void 0:n.outlineController;this.object.object3d.traverse(function(v){var h=v;s&&!s.includes(h)||d&&d.includes(h)||!h.material||l.selectedObjects.splice(l.selectedObjects.indexOf(h),1)}),l.selectedObjects.length===0&&(l.disable(),e.event.emit("passcheck","outline"))}},p}(),Y=function(){"use strict";function p(a){var n=arguments.length>1&&arguments[1]!==void 0?arguments[1]:{};b(this,p),this.object=a,this.options=m({},n)}var f=p.prototype;return f.check=function(){var n,e=this.object.pencil;return!((n=e.composerController)===null||n===void 0)&&n.ssrController?!0:(console.warn("err:pencil.options.ssr"),!1)},f.enable=function(){var n;if(!!this.check()){var e=this.object.pencil,i=this.options,d=i.exclude,s=i.include,l=(n=e.composerController)===null||n===void 0?void 0:n.ssrController;l.enable(),e.event.emit("passcheck","ssr"),this.object.object3d.traverse(function(v){var h=v;s&&!s.includes(h)||d&&d.includes(h)||h.material&&l.selectedObjects.push(h)})}},f.disable=function(){var n;if(!!this.check()){var e=this.object.pencil,i=this.options,d=i.exclude,s=i.include,l=(n=e.composerController)===null||n===void 0?void 0:n.ssrController;this.object.object3d.traverse(function(v){var h=v;s&&!s.includes(h)||d&&d.includes(h)||!h.material||l.selectedObjects.splice(l.selectedObjects.indexOf(h),1)}),l.selectedObjects.length===0&&(l.disable(),e.event.emit("passcheck","ssr"))}},p}();function G(p,f,a,n,e,i,d){try{var s=p[i](d),l=s.value}catch(v){a(v);return}s.done?f(l):Promise.resolve(l).then(n,e)}function R(p){return function(){var f=this,a=arguments;return new Promise(function(n,e){var i=p.apply(f,a);function d(l){G(i,n,e,d,s,"next",l)}function s(l){G(i,n,e,d,s,"throw",l)}d(void 0)})}}var J=S(666),L=S.n(J),N=require("three"),P=require("popmotion");function H(p){var f=arguments.length>1&&arguments[1]!==void 0?arguments[1]:{};return p.then(function(a){return m({err:null,res:a},f)}).catch(function(a){return m({err:a,res:void 0},f)})}function T(){var p=arguments.length>0&&arguments[0]!==void 0?arguments[0]:!1,f=arguments.length>1&&arguments[1]!==void 0?arguments[1]:{},a={};return a.promise=new Promise(function(n,e){a.resolve=n,a.reject=e}),p&&(a.promise=H(a.promise,f)),a}var E=function(){"use strict";function p(a){var n=arguments.length>1&&arguments[1]!==void 0?arguments[1]:{};b(this,p),this.object=a,this.options=m({},{color:16777215,opacity:1,lineNum:10,lineWidth:1,lineHieght:10,fade:!1,fadeType:2,radius:0,range:new N.Vector2(0,1),vertical:!1,step:0,pos:"bottom",duration:5e3,yoyo:!1,repeat:0},n)}var f=p.prototype;return f.initMaterial=function(){var n=this,e=this.options,i=e.color,d=e.lineNum,s=e.lineWidth,l=e.lineHieght,v=e.fade,h=e.fadeType,w=e.radius,r=e.range,t=e.vertical,o=e.step,c=e.opacity,u=e.exclude,y={field:{value:new N.Vector4(0,0,0,0)},color:{value:new N.Color(i)},opacity:{value:c},lineNum:{value:d},lineWidth:{value:s},lineHieght:{value:l},sizeNum:{value:new N.Vector3(w,w,w)},objPos:{value:new N.Vector3(0,0,0)},fade:{value:v},fadeType:{value:h},range:{value:r},angle:{value:0},stepNum:{value:o}};if(!w){var j=this.object.getSize().size;y.sizeNum.value.copy(j)}this.uniforms=y,this.object.object3d.traverse(function(x){var g=x;!g.material||u&&u.includes(g)||(g.userData.materialO?g.material=g.userData.materialO.clone():g.userData.materialO=Array.isArray(g.material)?g.material.map(function(_){return _.clone()}):g.material.clone(),Array.isArray(g.material)?g.material.forEach(function(_){t?n.setVerticalMaterial(_):n.setMaterial(_)}):t?n.setVerticalMaterial(g.material):n.setMaterial(g.material))})},f.setMaterial=function(n){var e=this.uniforms;n.onBeforeCompile=function(i){i.uniforms.field=e.field,i.uniforms.fieldColor=e.color,i.uniforms.fieldOpacity=e.opacity,i.uniforms.lineNum=e.lineNum,i.uniforms.lineWidth=e.lineWidth,i.uniforms.sizeNum=e.sizeNum,i.uniforms.fade=e.fade,i.uniforms.fadeType=e.fadeType,i.uniforms.range=e.range,i.uniforms.stepNum=e.stepNum,i.vertexShader=`
+        varying vec4 vWorldPos;
+        `.concat(i.vertexShader,`
+      `).replace("#include <worldpos_vertex>",`#include <worldpos_vertex>
+        vWorldPos = vec4( transformed, 1.0 );
+        #ifdef USE_INSTANCING
+          vWorldPos = instanceMatrix * vWorldPos;
+        #endif
+        vWorldPos = modelMatrix * vWorldPos;
+      `),i.fragmentShader=`
+      uniform vec4 field;
+      uniform vec3 fieldColor;
+      uniform float fieldOpacity;
+      uniform int lineNum;
+      uniform vec3 sizeNum;
+      uniform float lineWidth;
+      uniform float fade;
+      uniform int fadeType;
+      uniform vec2 range;
+      uniform int stepNum;
+      varying vec4 vWorldPos;
+      `.concat(i.fragmentShader,`
+      `).replace("#include <dithering_fragment>",`#include <dithering_fragment>
+        float height = sizeNum.y;
+        bool isTop = field.y > vWorldPos.y;
+        float worldDist = distance(field.y, vWorldPos.y);
+        // bool isMix = isTop?
+        //   worldDist >=  sizeNum.y * (1.0 -range):
+        //   worldDist <=  sizeNum.y * range;
+        float wMin = range.x * height;
+        float wMax = range.y * height;
+        bool isMix = worldDist >= wMin && worldDist <= wMax && field.w > 0.0;
+
+        if(isMix){
+          float stepf = sizeNum.y / float(lineNum);
+          vec3 posf = fwidth(vWorldPos.xyz);
+          float f = length(posf);
+          for(int i=0; i<lineNum; i++){
+            float fw = field.w- stepf * float(i) + (stepNum > 0? lineWidth : 0.0);
+            float fadeout = smoothstep(fw -lineWidth, fw, worldDist);
+            fadeout -= smoothstep(fw, fw + f, worldDist);
+            if(fadeout!=0.0 && fieldOpacity!=-1.0) {
+              fadeout = fieldOpacity;
+            }
+            if(fade ==1.0 && fadeType == 2){
+              fadeout =  float(lineNum-i) * fadeout/ float(lineNum);
+            }
+            if (fade ==1.0 && fadeType == 1) {
+              fadeout -= smoothstep(wMin, wMax, worldDist);
+            }
+            if(fadeout != 0.0){
+              gl_FragColor.rgb = mix(gl_FragColor.rgb, fieldColor, fadeout);
+              break;
+            }
+          }
+        }
+      `)},n.needsUpdate=!0},f.setVerticalMaterial=function(n){var e=this.uniforms;n.onBeforeCompile=function(i){i.uniforms.field=e.field,i.uniforms.fieldColor=e.color,i.uniforms.fieldOpacity=e.opacity,i.uniforms.lineNum=e.lineNum,i.uniforms.lineWidth=e.lineWidth,i.uniforms.lineHieght=e.lineHieght,i.uniforms.sizeNum=e.sizeNum,i.uniforms.fade=e.fade,i.uniforms.range=e.range,i.uniforms.angle=e.angle,i.uniforms.objPos=e.objPos,i.vertexShader=`
+        varying vec4 vWorldPos;
+        `.concat(i.vertexShader,`
+      `).replace("#include <worldpos_vertex>",`#include <worldpos_vertex>
+        vWorldPos = vec4( transformed, 1.0 );
+        #ifdef USE_INSTANCING
+          vWorldPos = instanceMatrix * vWorldPos;
+        #endif
+        vWorldPos = modelMatrix * vWorldPos;
+      `),i.fragmentShader=`
+      uniform vec4 field;
+      uniform vec3 fieldColor;
+      uniform float fieldOpacity;
+      uniform int lineNum;
+      uniform vec3 sizeNum;
+      uniform float lineWidth;
+      uniform float lineHieght;
+      uniform float fade;
+      uniform vec2 range;
+      uniform float angle;
+      uniform vec3 objPos;
+      varying vec4 vWorldPos;
+
+      float aa(float x, float z,float a) {
+        return(x - objPos.x)*cos(a) - (z - objPos.z)*sin(a) + objPos.x ;
+      }
+
+      `.concat(i.fragmentShader,`
+      `).replace("#include <dithering_fragment>",`#include <dithering_fragment>
+
+        float worldDist = distance(field.y, vWorldPos.y);
+        bool isTop = field.x > vWorldPos.x;
+        float height = sizeNum.y;
+        // bool isMix = isTop?
+        //   worldDist >=  sizeNum.y * (1.0 -range):
+        //   worldDist <=  sizeNum.y * range;
+        float wMin = range.x * height;
+        float wMax = range.y * height;
+        bool isMix = worldDist >= wMin && worldDist <= wMax;
+
+
+        if(isMix){
+          vec3 posf = fwidth(vWorldPos.xyz);
+          float f = length(posf);
+          float gap =0.0;
+          float sx= sqrt(pow(sizeNum.x,2.0)+pow(sizeNum.z,2.0));
+          float worldDistx = distance(field.x, aa(vWorldPos.x,vWorldPos.z,angle));
+          float stepf = sx / float(lineNum);
+          float gapWidth = stepf-lineWidth;
+          for(int i=0; i<lineNum; i++){
+            float fw = sx -  stepf * float(i);
+            gap = smoothstep(fw - gapWidth, fw, worldDistx);
+            gap -= smoothstep(fw, fw + f, worldDistx);
+            gap = gap != 0.0 ? 1.0 : 0.0;
+            if(gap != 0.0){
+              // gl_FragColor.rgb = mix(gl_FragColor.rgb, fieldColor, gap);
+              break;
+
+            }
+          }
+          if(gap == 0.0){
+            float fw = field.w;
+            float fadeout = smoothstep(fw - lineHieght, fw, worldDist);
+            fadeout -= smoothstep(fw, fw + f, worldDist);
+            if(fadeout!=0.0 && fieldOpacity!=-1.0) {
+              fadeout = fieldOpacity;
+            }
+            gl_FragColor.rgb = mix(gl_FragColor.rgb, fieldColor, fadeout);
+          }
+        }
+
+      `)},n.needsUpdate=!0},f.resetMaterial=function(){this.object.object3d.traverse(function(n){var e=n;e.material&&e.userData.materialO&&(e.material=e.userData.materialO.clone(),e.userData.materialO=void 0)})},f.play=function(){var n=arguments.length>0&&arguments[0]!==void 0?arguments[0]:{},e=this;this.stop();var i=T(!0),d=this,s=d.object,l=d.uniforms,v=m({},this.options,n),h=v.lineNum,w=v.step,r=v.lineWidth,t=v.pos,o=v.duration,c=s.getSize(),u=c.min,y=c.max,j=c.size,x=h,g=r;w>0&&(x=1,g=j.y/w);var _=l.sizeNum.value.y*(x>1?2:1);return this.tween=(0,P.animate)({from:0,to:1,duration:o,onPlay:function(){var z,C=new N.Vector3;t==="bottom"?C.set(u.x-.001,u.y-.001,u.z-.001):t==="top"&&C.set(y.x+.001,y.y+.001,y.z+.001);var k=((z=s.pencil.control)===null||z===void 0?void 0:z.getAzimuthalAngle())||0,B=e.object.object3d.position.clone();if(k){var X=Math.sqrt(Math.pow(j.x,2)+Math.pow(j.z,2))/2;C.x=B.x+X,C.z=B.z+X;var Z=new N.Vector3().subVectors(C,B),ee=new N.Vector3(0,1,0);Z.applyAxisAngle(ee,k),C.addVectors(B,Z)}l.objPos.value.copy(B),l.field.value.set(C.x,C.y,C.z,0),l.angle.value=k,l.lineNum.value=x,l.lineWidth.value=g},onUpdate:function(z){w>0?l.field.value.w=Math.floor(z*w)/w*_:l.field.value.w=z*_},onStop:function(){l.field.value.w=0,i.reject("stop")},onComplete:function(){i.resolve()}}),i.promise},f.checkRepeat=function(){var n=arguments.length>0&&arguments[0]!==void 0?arguments[0]:{},e=this;return R(L().mark(function i(){var d,s,l,v,h,w;return L().wrap(function(t){for(;;)switch(t.prev=t.next){case 0:return d=m({},e.options,n),s=d.yoyo,l=d.repeat,v=d.pos,l===e.options.repeat&&e.initMaterial(),t.next=4,e.play(n);case 4:if(h=t.sent.err,!h){t.next=8;break}return e.resetMaterial(),t.abrupt("return");case 8:if(!l){t.next=15;break}return w=v,s&&(w=w==="bottom"?"top":"bottom"),t.next=13,e.checkRepeat({pos:w,repeat:l===1/0?-1:l-1});case 13:t.next=16;break;case 15:e.resetMaterial();case 16:case"end":return t.stop()}},i)}))()},f.start=function(){return this.checkRepeat()},f.stop=function(){this.tween&&this.tween.stop()},p}(),U=function(){"use strict";function p(a){var n=arguments.length>1&&arguments[1]!==void 0?arguments[1]:{};b(this,p),this.object=a,this.options=m({},{color:16777215,lineWidth:2,opacity:.5,fade:!1,position:new N.Vector3(0,0,0),duration:5e3,repeat:0},n)}var f=p.prototype;return f.initMaterial=function(){var n=this,e=this.options.exclude,i={field:{value:new N.Vector4(0,0,0,1e-4)},color:{value:new N.Color(this.options.color)},opacity:{value:this.options.opacity},lineWidth:{value:this.options.lineWidth}};this.uniforms=i,this.object.object3d.traverse(function(d){var s=d;!s.material||e&&e.includes(s)||(s.userData.materialO?s.material=s.userData.materialO:s.userData.materialO=Array.isArray(s.material)?s.material.map(function(l){return l.clone()}):s.material.clone(),Array.isArray(s.material)?s.material.forEach(function(l){n.setMaterial(l)}):n.setMaterial(s.material))})},f.setMaterial=function(n){var e=this.uniforms;n.onBeforeCompile=function(i){i.uniforms.field=e.field,i.uniforms.fieldColor=e.color,i.uniforms.fieldOpacity=e.opacity,i.uniforms.lineWidth=e.lineWidth,i.vertexShader=`
+        varying vec4 vWorldPos;
+        `.concat(i.vertexShader,`
+      `).replace("#include <worldpos_vertex>",`#include <worldpos_vertex>
+        vWorldPos = vec4( transformed, 1.0 );
+        #ifdef USE_INSTANCING
+          vWorldPos = instanceMatrix * vWorldPos;
+        #endif
+        vWorldPos = modelMatrix * vWorldPos;
+      `),i.fragmentShader=`
+      uniform vec4 field;
+      uniform vec3 fieldColor;
+      uniform float fieldOpacity;
+      uniform float lineWidth;
+      
+      varying vec4 vWorldPos;
+      `.concat(i.fragmentShader,`
+      `).replace("#include <dithering_fragment>",`#include <dithering_fragment>
+  
+        float worldDist = distance(field.xyz, vWorldPos.xyz);
+        float fadeoutWidth = lineWidth;
+        vec3 posf = fwidth(vWorldPos.xyz);
+        float f = length(posf);
+
+        float fw = field.w;
+        float fadeout = smoothstep(fw - fadeoutWidth, fw, worldDist);
+        fadeout -= smoothstep(fw, fw + f, worldDist);
+        if(fadeout!=0.0 && fieldOpacity!=-1.0) {
+          fadeout = fieldOpacity;
+        }
+        gl_FragColor.rgb = mix(gl_FragColor.rgb, fieldColor, fadeout);
+  
+      `)},n.needsUpdate=!0},f.resetMaterial=function(){this.object.object3d.traverse(function(n){var e=n;e.material&&e.userData.materialO&&(e.material=e.userData.materialO.clone(),e.userData.materialO=void 0)})},f.play=function(){var n=this;this.stop();var e=T(!0),i=this,d=i.object,s=i.uniforms,l=this.options,v=l.position,h=l.duration,w=this.options.radius;if(!w){var r=d.getSize().size;w=Math.max(r.x,r.y,r.z)}return this.tween=(0,P.animate)({from:1e-4,to:1,duration:h,onPlay:function(){s.field.value.set(v.x,v.y,v.z,1e-4),n.options.fade&&(s.opacity.value=n.options.opacity)},onUpdate:function(t){s.field.value.w=t*w,n.options.fade&&(s.opacity.value=(1-t)*n.options.opacity)},onStop:function(){s.field.value.w=0,e.reject("stop")},onComplete:function(){e.resolve()}}),e.promise},f.checkRepeat=function(){var n=arguments.length>0&&arguments[0]!==void 0?arguments[0]:{},e=this;return R(L().mark(function i(){var d,s;return L().wrap(function(v){for(;;)switch(v.prev=v.next){case 0:return d=m({},e.options,n).repeat,d===e.options.repeat&&e.initMaterial(),v.next=4,e.play();case 4:if(s=v.sent.err,!s){v.next=8;break}return e.resetMaterial(),v.abrupt("return");case 8:if(!d){v.next=13;break}return v.next=11,e.checkRepeat({repeat:d===1/0?-1:d-1});case 11:v.next=14;break;case 13:e.resetMaterial();case 14:case"end":return v.stop()}},i)}))()},f.start=function(){return this.checkRepeat()},f.stop=function(){this.tween&&this.tween.stop()},p}()})(),module.exports=$})();