3D 厂区

类型声明

export namespace PlantType {
  type AlignEnum =
    | 'top-left'
    | 'top-right'
    | 'bottom-left'
    | 'bottom-right'
    | 'center'

  type Config = {
    /**
     * 宽度
     */
    width?: number
    /**
     * 高度
     */
    height?: number
    /**
     * 对齐方式
     */
    align?: AlignEnum
    /**
     * 背景颜色
     */
    backgroundColor?: number
    /**
     * 主相机位置
     */
    camera: [number, number, number]
    /**
     * 天空盒
     */
    skyBox?: [string, string, string, string, string, string]
    /**
     * 坐标系
     */
    axesHelper?: number
    /**
     * 容器
     */
    container?: HTMLDivElement
    /**
     * 指南针
     */
    compass?: HTMLDivElement
    /**
     * 描述标签
     */
    describe?: HTMLDivElement
  }

  type RenderParams = {
    direction: {
      x: number
      y: number
      z: number
    }
    worldPosition: any
  }
}

export namespace ThreeJs {
  type Scene = any
  type Geometry = any
  type Camera = any
  type Renderer = any
  type Material = any
  type Edges = any
}

export namespace UtilType {
  type GeometryEnum = 'BoxGeometry' | 'PlaneGeometry'

  type Edges = {
    color: number
  }

  type Material = {
    color?: number
    image?: string
    model?: string
  }

  type BaseGeometry<T = {}> = {
    /**
     * 暂时用name做唯一标识（下划线连接）
     */
    name?: string
    data?: Record<string, any>

    size?: number[]
    position: [number, number, number]

    rotateX?: number
    rotateY?: number
    rotateZ?: number

    children?: BaseGeometry<T>[]
  } & T

  type GeoWithColor = BaseGeometry<{
    geometry: GeometryEnum
    edges?: Edges
    model: undefined
    material: {
      color: number
    }
  }>

  type GeoWithImage = BaseGeometry<{
    geometry: GeometryEnum
    model: undefined
    material: {
      image: number
    }
  }>

  type GeoWithModel = BaseGeometry<{
    material: undefined
    model: Partial<{
      obj: string
      mtl: string
      fbx: string
    }>
  }>

  type UnionGeometry = GeoWithColor | GeoWithImage | GeoWithModel

  type GeoStyle = {
    material?: UtilType.Material
    edges?: UtilType.Edges
  }

  type ModelOption = {
    name: string
    objPath: string
    mtlPath: string
  }
}

可用函数

export declare class Plant {
  constructor(config: PlantType.Config)
  /**
   * 设置容器的对齐样式
   * @param align 对齐样式
   */
  setAlign(align?: PlantType.AlignEnum): this
  /**
   * 设置背景颜色
   * @param color 颜色
   */
  setBackgroundColor(color?: number): this
  /**
   * 挂载容器
   * @param el 容器节点
   */
  setContainer(el?: PlantType.Config['container']): this
  /**
   * 挂载指南针节点
   * @param el 节点对象
   */
  setCompass(el?: PlantType.Config['compass']): this
  /**
   * 挂载描述节点
   * @param el 节点对象
   */
  setDescribe(el?: PlantType.Config['describe']): this
  /**
   * 添加对象
   * @param config 对象构建参数
   * @param parent 父级
   * @param callback 回调函数
   */
  append(
    config: UtilType.UnionGeometry,
    parent?: ThreeJs.Geometry,
    callback?: (geo: ThreeJs.Geometry) => void
  ): this
  /**
   * 删除对象
   * @param geo 目标对象
   */
  remove(geo: ThreeJs.Geometry): this
  /**
   *
   * @param aim 查找对象
   * @param parent 父级
   * @param result 内部调用, 不用传
   */
  find(
    aim: string,
    parent?: ThreeJs.Geometry,
    result: ThreeJs.Geometry[] = []
  ): ThreeJs.Geometry[]
  /**
   * 激活对象
   * @param geo 对象
   * @param style 激活样式
   */
  active(geo: ThreeJs.Geometry, style: UtilType.GeoStyle): this
  /**
   * 复原
   */
  restore(): this
  /**
   * 设置焦点
   * @param geo 焦点对象
   * @param style 焦点样式
   * @param clean 是否复原之前的焦点
   */
  setTarget(
    geo: ThreeJs.Geometry,
    style: UtilType.GeoStyle,
    clean: boolean = true
  ): this
  /**
   * 移除焦点
   */
  removeTarget(): this
  /**
   * 移动对象
   * @param geo 目标对象
   * @param position 移动坐标
   */
  move(geo: ThreeJs.Geometry, position: [number, number, number]): this
  /**
   * 更新对象
   * @param aim 目标对象
   * @param config 参数
   * @param callback 回调函数
   */
  update(
    aim: ThreeJs.Geometry | string,
    config: UtilType.UnionGeometry,
    callback?: (geo: ThreeJs.Geometry) => void
  ): this
}

更新日志

• [v1.0.8] 2025-03-18: 添加 README.md