gl-draw

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();
  },
})