Gl-draw NPM | npm.io

gl-draw 基于 Three.js 的可视化开发框架

gl-draw 旨在简化基于 Three.js 的可视化开发。用户可以通过组合现有 Object 或利用 gl-draw 的可扩展架构来满足自定义需求，从而以快速获得令人印象深刻的视觉效果。

快速开始

yarn add gl-draw
# or npm install gl-draw

依赖

{
  "three": ">=0.136.0"
}

使用

核心类：

Pencil: 初始化场景，控制整个场景的渲染、更新和废除
DrawController: 用于场景中元素的绘制、获取和删除
BaseObject: 元素基类，封装了一些生命周期和通用方法

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

// 参数
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

// 参数
{ [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

// 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 使用需要注册

const pencil = new Pencil({
  ...
})
pencil.use({
  install: () => {},
  update: () => {
    TWEEN.update();
  },
  dispose: () => {
    TWEEN.removeAll();
  },
})

@turf/boolean-clockwise @turf/boolean-point-in-polygon camera-controls d3-array d3-geo d3-geo-voronoi d3-scale deepmerge delaunator earcut esus-lite idb-keyval lil-gui postprocessing

@everything-registry/sub-chunk-1768 @infinitebrahmanuniverse/nolb-gl-

4 days ago

3 days ago

4 days ago

3 days ago

27 days ago

2 months ago

2 months ago

2 months ago

2 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

5 months ago

6 months ago

5 months ago

5 months ago

5 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

7 months ago

6 months ago

6 months ago

6 months ago

6 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

9 months ago

9 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

11 months ago

10 months ago

10 months ago

10 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

11 months ago

11 months ago

12 months ago

12 months ago

12 months ago

10 months ago

12 months ago

10 months ago

12 months ago

10 months ago

12 months ago

10 months ago

12 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

10 months ago

12 months ago

10 months ago

12 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

10 months ago

10 months ago

9 months ago

10 months ago

10 months ago

10 months ago

10 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

1 year ago

12 months ago

12 months ago

12 months ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

2 years ago

2 years ago

1 year ago

2 years ago

1 year ago

1 year ago

1 year ago

1 year ago

2 years ago

1 year ago

1 year ago

1 year ago

1 year ago

2 years ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago