Sculpt

功能说明

Sculpt （/ skʌlpt / vt. 雕刻；n. 雕塑）是一个基于 @realsee/five 的 3D 编辑器，用于在 Five 场景中绘制和编辑 3D 物体。

效果展示

快速开始

初始化

通过 five plugins 方式初始化

import { const SculptPlugin: (five: Five) => Sculpt@description: Sculpt 插件SculptPlugin, SculptData } from '@realsee/dnalogel'
import { class Five如视 VR Web展示器
@example// 初始化构造函数
const five = new Five();
// 将绘制区域添加到页面上
five.appendTo(document.body);
// 加载 Work 数据
five.load({...});Five, type FivePlugin<Parameters = void, Returns = void> = Parameters extends void ? (five: Five) => Returns : (five: Five, parameters: Parameters) => ReturnsFive 插件
[[include:plugins.md]]
@templateParameters - 插件参数, 没有参数则为 void@templateReturns - 如果有参数则插件暴露的 api，没有参数则不传FivePlugin } from '@realsee/five'

const const fivePlugins: [((five: Five) => any) | ((five: Five, parameters: any) => any), string, any][]fivePlugins: [type FivePlugin<Parameters = void, Returns = void> = Parameters extends void ? (five: Five) => Returns : (five: Five, parameters: Parameters) => ReturnsFive 插件
[[include:plugins.md]]
@templateParameters - 插件参数, 没有参数则为 void@templateReturns - 如果有参数则插件暴露的 api，没有参数则不传FivePlugin<any, any>, string, any][] = [
  [const SculptPlugin: (five: Five) => Sculpt@description: Sculpt 插件SculptPlugin, 'sculpt', {}]
]

// 加载five插件
const const five: Fivefive = new new Five(initArgs?: FiveInitArgs | undefined): Five如视 VR Web展示器
@example// 初始化构造函数
const five = new Five();
// 将绘制区域添加到页面上
five.appendTo(document.body);
// 加载 Work 数据
five.load({...});Five({
  FiveInitArgs.plugins?: (((five: Five) => void) | [Plugin: ((five: Five) => any) | ((five: Five, parameters: any) => any), instanceName: string | null] | [Plugin: ((five: Five) => any) | ((five: Five, parameters: any) => any), instanceName: string | null, parameters: any] | [Plugin: (five: Five) => any, instanceName: string | null])[] | undefined插件定义
@description详见插件部分。plugins: const fivePlugins: [((five: Five) => any) | ((five: Five, parameters: any) => any), string, any][]fivePlugins
})

也可以自己初始化

import { class SculptSculpt } from '@realsee/dnalogel'

const const sculpt: Sculptsculpt = new new Sculpt(five: Five, theme?: Partial<{
    point: Partial<PointStyle>;
    line: Partial<LineMeshStyle>;
    polyline: Partial<LineMeshStyle>;
    ... 5 more ...;
    box: Partial<...>;
}> | undefined): SculptSculpt(const five: Fivefive) // five 为 Five 实例, theme 为可选值

加载数据

在 sculpt 场景中添加物体有两种方式，一种是已有数据的情况下，通过 sculpt.load(data) 方法加载。列表项数据结构：data

const const data: {
    items: ({
        id: string;
        type: string;
        point: number[];
        points?: undefined;
    } | {
        id: string;
        type: string;
        points: number[][];
        point?: undefined;
    })[];
}data = {
  items: ({
    id: string;
    type: string;
    point: number[];
} | {
    id: string;
    type: string;
    points: number[][];
})[]items: [
    {
      id: stringid: '1',
      type: stringtype: 'Point',
      point: number[]point: [0, 0, 0]
    },
    {
      id: stringid: '2',
      type: stringtype: 'Polyline',
      points: number[][]points: [[0, 0, 0], [1, 1, 1]]
    }
  ]
}

// 在场景中绘制一个点和一条线
const sculpt: Sculptsculpt.Sculpt.load(data: Data, config?: Partial<BaseObjectConfig> | undefined): void@description: 加载数据 展示load(const data: {
    items: ({
        id: string;
        type: string;
        point: number[];
        points?: undefined;
    } | {
        id: string;
        type: string;
        points: number[][];
        point?: undefined;
    })[];
}data)

创建物体

在 sculpt 场景中添加物体的另一种方式是通过 sculpt.createXXXX() 方法创建。

绘制一个 Box

const sculpt: Sculptsculpt.Sculpt.createBox(params?: Partial<OpacityStyle & ColorStyle & OcclusionStyle & LineColorStyle & LineOpacityStyle & LineWidthStyle & CreateLimitConfig & DrawMethodConfig> | undefined): Promise<...>@description: 开始绘制 BoxcreateBox()

绘制一个绿色边框的红色 Box

const sculpt: Sculptsculpt.Sculpt.createBox(params?: Partial<OpacityStyle & ColorStyle & OcclusionStyle & LineColorStyle & LineOpacityStyle & LineWidthStyle & CreateLimitConfig & DrawMethodConfig> | undefined): Promise<...>@description: 开始绘制 BoxcreateBox({ color?: Color | undefined@description: 颜色@default0xffffffcolor: 0xff0000, opacity?: number | undefined@description: 透明度@default0.5opacity: 0.8, lineColor?: Color | undefined@description: 边框线颜色@default0xfffffflineColor: 0x00ff00, lineWidth?: number | undefined@description: 线宽@default1lineWidth: 2 })

绘制一条红色的线段

const sculpt: Sculptsculpt.Sculpt.createLine(params?: Partial<LineColorStyle & LineOpacityStyle & LineWidthStyle & {
    dashed?: boolean | undefined;
} & OcclusionStyle & Partial<...> & Partial<...> & CreateLimitConfig> | undefined): Promise<...>@description: 开始绘制线段createLine({ lineColor?: Color | undefined@description: 边框线颜色@default0xfffffflineColor: 0xff0000 })

绘制一条带有距离的线段

const sculpt: Sculptsculpt.Sculpt.createLine(params?: Partial<LineColorStyle & LineOpacityStyle & LineWidthStyle & {
    dashed?: boolean | undefined;
} & OcclusionStyle & Partial<...> & Partial<...> & CreateLimitConfig> | undefined): Promise<...>@description: 开始绘制线段createLine({ lengthEnable?: boolean | undefined@description开启 距离 展示lengthEnable: true })

绘制一条带有tip的线段

const sculpt: Sculptsculpt.Sculpt.createLine(params?: Partial<LineColorStyle & LineOpacityStyle & LineWidthStyle & {
    dashed?: boolean | undefined;
} & OcclusionStyle & Partial<...> & Partial<...> & CreateLimitConfig> | undefined): Promise<...>@description: 开始绘制线段createLine({ tip?: string | undefined@description提示信息tip: '线段' })

绘制一条线段，要求锁定水平面绘制

const sculpt: Sculptsculpt.Sculpt.createLine(params?: Partial<LineColorStyle & LineOpacityStyle & LineWidthStyle & {
    dashed?: boolean | undefined;
} & OcclusionStyle & Partial<...> & Partial<...> & CreateLimitConfig> | undefined): Promise<...>@description: 开始绘制线段createLine({ limit?: "xoz" | "y" | "none" | undefined@description限制折线绘制的平面; xoz 限制在水平面; y 限制垂直面; none 不限制@defaultnonelimit: 'xoz' })

绘制一个矩形，要求锁定垂直面绘制，绘制方式为对角线绘制

const sculpt: Sculptsculpt.Sculpt.createRectangle(config?: Partial<OpacityStyle & ColorStyle & OcclusionStyle & LineColorStyle & LineOpacityStyle & LineWidthStyle & CreateLimitConfig & DrawMethodConfig> | undefined): Promise<...>@description: 开始绘制矩形createRectangle({ limit?: "xoz" | "y" | "none" | undefined@description限制折线绘制的平面; xoz 限制在水平面; y 限制垂直面; none 不限制@defaultnonelimit: 'y', drawMethod?: "vertex" | "diagonal" | undefined@description矩形绘制方式; vertex 按顺序绘制三个点; diagonal 先绘制对角线;@defaultdiagonaldrawMethod: 'diagonal' })

更自由的绘制及编辑

import { import UtilUtil } from '@realsee/dnalogel'

const { const PointSelector: typeof Util.PointSelectorPointSelector } = import UtilUtil
const { const BoxMesh: typeof Util.sculpt.BoxMeshBoxMesh, const BoxMeshEditor: typeof Util.sculpt.BoxMeshEditorBoxMeshEditor, const createBox: (boxMesh: Util.sculpt.BoxMesh, pointSelector: Util.PointSelector, config?: Partial<CreateLimitConfig & DrawMethodConfig> | undefined) => Promise<void>createBox } = import UtilUtil.import sculptsculpt

// 创建 boxMesh
const const boxMesh: Util.sculpt.BoxMeshboxMesh = new const BoxMesh: new (params?: Partial<PrismData & OpacityStyle & ColorStyle & OcclusionStyle & LineColorStyle & LineOpacityStyle & LineWidthStyle> | undefined) => Util.sculpt.BoxMeshBoxMesh({ lineColor?: Color | undefined@description: 边框线颜色@default0xfffffflineColor: 0xff0000 })
const five: Fivefive.Five.scene: Scene内部使用的 THREE.Scenescene.Scene.add(...objects: AddableObject[]): SceneAdds object as child of this object.add(const boxMesh: Util.sculpt.BoxMeshboxMesh)

// 按需初始化编辑器
const const editor: Util.sculpt.BoxMeshEditoreditor = new const BoxMeshEditor: new (boxMesh: Util.sculpt.BoxMesh) => Util.sculpt.BoxMeshEditorBoxMeshEditor(const boxMesh: Util.sculpt.BoxMeshboxMesh)

// 创建选择器
const const pointSelector: Util.PointSelectorpointSelector = new const PointSelector: new (five: Five, config?: Partial<Config> | undefined) => Util.PointSelectorPointSelector(const five: Fivefive)

const createBox: (boxMesh: Util.sculpt.BoxMesh, pointSelector: Util.PointSelector, config?: Partial<CreateLimitConfig & DrawMethodConfig> | undefined) => Promise<...>createBox(const boxMesh: Util.sculpt.BoxMeshboxMesh, const pointSelector: Util.PointSelectorpointSelector).Promise<void>.then<void, never>(onfulfilled?: ((value: void) => void | PromiseLike<void>) | null | undefined, onrejected?: ((reason: any) => PromiseLike<never>) | null | undefined): Promise<...>Attaches callbacks for the resolution and/or rejection of the Promise.
@paramonfulfilled The callback to execute when the Promise is resolved.@paramonrejected The callback to execute when the Promise is rejected.@returnsA Promise for the completion of which ever callback is executed.then(() => {
  var console: Consoleconsole.Console.log(...data: any[]): voidMDN Referencelog('绘制完成')

  // 按需启用编辑功能
  const editor: Util.sculpt.BoxMeshEditoreditor.BaseEditorWithObjectHelper<BoxMesh>.enable(): void@description: 开启编辑器enable()
})

开启编辑功能

默认编辑功能默认开启，可以通过加载数据时传参的方式关闭默认行为：

const sculpt: Sculptsculpt.Sculpt.load(data: Data, config?: Partial<BaseObjectConfig> | undefined): void@description: 加载数据 展示load(const data: {
    items: ({
        id: string;
        type: string;
        point: number[];
        points?: undefined;
    } | {
        id: string;
        type: string;
        points: number[][];
        point?: undefined;
    })[];
}data, { defaultAction?: boolean | undefined@description: 是否启用默认行为，包括：

点击物体后高亮选中，同时启用 editor；
esc 取消选中；
delete 删除选中的物体；
createXXXX 创建物体完成后自动启用 editor；
@defaulttruedefaultAction: false })

点击开始编辑

const sculpt: Sculptsculpt.Subscribe<Event>.on<"click">(name: "click", callback: (e: MouseEvent, item: BuiltInItem) => false | void, once?: boolean | undefined): () => void注册事件
@paramname - 事件类型@paramcallback - 事件回调函数@paramonce - 是否只执行一次@returns解除事件@templateK - 预设的监听事件名称@templateC - 回调函数函数上下文on('click', (e: MouseEvente, item: BuiltInItemitem) => {
  // 点击选中（有一个高亮效果）
  item: BuiltInItemitem.BaseObject<ImportData extends BaseImportData = BaseImportData, ExportData extends BaseExportData = { [KeyType in keyof ({ [Key in keyof PickIndexSignature<ReplaceDeep<ReplaceDeep<ImportData, Vector3, number[]>, Color, null>> as Key extends never ? never : Key]: PickIndexSignature<...>[Key]; } & PickIndexSignature<...> & { [Key in keyof OmitIndexSignature<...> as Key extends "id" ? never : Key]: OmitIndexSignature<...>[Key]; } & OmitIndexSignature<...>)]: ({ [Key in keyof PickIndexSignature<ReplaceDeep<ReplaceDeep<ImportData, Vector3, number[]>, Color, null>> as Key extends never ? never : Key]: PickIndexSignature<...>[Key]; } & ... 2 more ... & OmitIndexSignature<...>)[KeyType]; }, Config extends BaseObjectConfig = BaseObjectConfig>.select(params?: {
    only?: boolean | undefined;
} | undefined): void@description选择当前物体@paramparams.only 只选择当前物体，自动取消选择其他物体；默认 falseselect({ only?: boolean | undefinedonly: true })

  // 点击后开启编辑功能
  item: BuiltInItemitem.editor: PolylineEditor | PointEditor | PolygonEditor | PrismMeshEditor | RectangleMeshEditor | CircleMeshEditor | CylinderMeshEditor | BoxMeshEditor | LineEditoreditor.function enable(): void@description: 开启编辑器enable()

  // 物体移动/旋转/缩放时触发
  item: BuiltInItemitem.editor: PolylineEditor | PointEditor | PolygonEditor | PrismMeshEditor | RectangleMeshEditor | CircleMeshEditor | CylinderMeshEditor | BoxMeshEditor | LineEditoreditor.BaseEditor<OriginObject extends Object3D = Object3D>.hooks: Subscribe<{
    objectUpdate: () => void;
}>hooks.Subscribe<{ objectUpdate: () => void; }>.on<"objectUpdate">(name: "objectUpdate", callback: () => void, once?: boolean | undefined): () => void注册事件
@paramname - 事件类型@paramcallback - 事件回调函数@paramonce - 是否只执行一次@returns解除事件@templateK - 预设的监听事件名称@templateC - 回调函数函数上下文on('objectUpdate', () => {
    var console: Consoleconsole.Console.log(...data: any[]): voidMDN Referencelog('new Data: ', item: BuiltInItemitem.data: {
    points: [number, number, number][];
    style: {
        lineColor: number;
        lineWidth: number;
        dashed: boolean;
    };
    id: string;
    type: string;
} | {
    point: [number, number, number];
    style: {
        color: number;
        size: number;
    };
    id: string;
    type: string;
} | {
    points: [number, number, number][];
    style: {
        color: number;
        lineColor: number;
        lineWidth: number;
    };
    id: string;
    type: string;
} | {
    readonly points: [number, number, number][];
    readonly heightPoint: [number, number, number];
    readonly style: {
        readonly color: number;
        readonly lineWidth: number;
        readonly lineColor: number;
    };
    readonly id: string;
    readonly type: string;
} | {
    points: [number, number, number][];
    style: {
        color: number;
        opacity: number;
        lineWidth: number;
        lineColor: number;
    };
    id: string;
    type: string;
} | {
    center: [number, number, number];
    normal: [number, number, number];
    radius: number;
    style: {
        color: number;
    };
    id: string;
    type: string;
} | {
    bottomCenter: [number, number, number];
    topCenter: [number, number, number];
    radius: number;
    style: {
        color: number;
    };
    id: string;
    type: string;
} | {
    points: [number, number, number][];
    heightPoint: [number, number, number];
    style: {
        color: number;
        opacity: number;
        lineWidth: number;
        lineColor: number;
    };
    id: string;
    type: string;
} ...@description物体导出数据@description物体导出数据@description物体导出数据@description物体导出数据@description物体导出数据@description物体导出数据@description物体导出数据@description物体导出数据@description物体导出数据data)
  })
})

点击展示删除按钮

const sculpt: Sculptsculpt.Subscribe<Event>.on<"click">(name: "click", callback: (e: MouseEvent, item: BuiltInItem) => false | void, once?: boolean | undefined): () => void注册事件
@paramname - 事件类型@paramcallback - 事件回调函数@paramonce - 是否只执行一次@returns解除事件@templateK - 预设的监听事件名称@templateC - 回调函数函数上下文on('click', (e: MouseEvente, item: BuiltInItemitem) => {
  const const x: numberx = e: MouseEvente instanceof var TouchEvent: {
    new (type: string, eventInitDict?: TouchEventInit | undefined): TouchEvent;
    prototype: TouchEvent;
}An event sent when the state of contacts with a touch-sensitive surface changes. This surface can be a touch screen or trackpad, for example. The event can describe one or more points of contact with the screen and includes support for detecting movement, addition and removal of contact points, and so forth.
MDN ReferenceTouchEvent ? e: MouseEvent & TouchEvente.TouchEvent.touches: TouchListMDN Referencetouches[0].Touch.clientX: numberMDN ReferenceclientX : e: MouseEvente.MouseEvent.clientX: numberMDN ReferenceclientX
  const const y: numbery = e: MouseEvente instanceof var TouchEvent: {
    new (type: string, eventInitDict?: TouchEventInit | undefined): TouchEvent;
    prototype: TouchEvent;
}An event sent when the state of contacts with a touch-sensitive surface changes. This surface can be a touch screen or trackpad, for example. The event can describe one or more points of contact with the screen and includes support for detecting movement, addition and removal of contact points, and so forth.
MDN ReferenceTouchEvent ? e: MouseEvent & TouchEvente.TouchEvent.touches: TouchListMDN Referencetouches[0].Touch.clientY: numberMDN ReferenceclientY : e: MouseEvente.MouseEvent.clientY: numberMDN ReferenceclientY
  item: BuiltInItemitem.BaseObject<ImportData extends BaseImportData = BaseImportData, ExportData extends BaseExportData = { [KeyType in keyof ({ [Key in keyof PickIndexSignature<ReplaceDeep<ReplaceDeep<ImportData, Vector3, number[]>, Color, null>> as Key extends never ? never : Key]: PickIndexSignature<...>[Key]; } & PickIndexSignature<...> & { [Key in keyof OmitIndexSignature<...> as Key extends "id" ? never : Key]: OmitIndexSignature<...>[Key]; } & OmitIndexSignature<...>)]: ({ [Key in keyof PickIndexSignature<ReplaceDeep<ReplaceDeep<ImportData, Vector3, number[]>, Color, null>> as Key extends never ? never : Key]: PickIndexSignature<...>[Key]; } & ... 2 more ... & OmitIndexSignature<...>)[KeyType]; }, Config extends BaseObjectConfig = BaseObjectConfig>.showDeleteButton(clientX: number, clientY: number): void@description显示删除按钮showDeleteButton(const x: numberx, const y: numbery)
})

Sculpt API

名词解释

Item

物体的实例，sculpt中的每个物体都是一个Item。API

目前支持的 Item 种类：ItemType

`Theme`

初始化时可以设置每种物体的默认样式。

import { class SculptSculpt } from '@realsee/dnalogel'

/**
 * - color: 颜色
 * - opacity: 透明度
 * - lineColor: 边框线颜色
 * - lineWidth: 线宽
 * - lineOpacity: 边框线透明度
 * - occlusionVisibility: 是否以一种半透明的方式显示遮挡的部分
 * - occlusionMode: 遮挡模式
 */
const const theme: {
    readonly point: {
        readonly color: 16777215;
    };
    readonly line: {
        readonly lineColor: 16777215;
        readonly lineWidth: 1;
    };
    readonly polyline: {
        readonly lineColor: 255;
        readonly lineWidth: 2;
    };
    readonly polygon: {
        readonly color: 16777215;
        readonly lineColor: 0;
        readonly lineWidth: 2;
        readonly lineOpacity: 0.8;
    };
    readonly prism: {
        readonly color: 16777215;
        readonly lineColor: 0;
        readonly lineWidth: 2;
        readonly lineOpacity: 1;
    };
    readonly rectangle: {
        readonly color: 16777215;
        readonly lineColor: 0;
        readonly opacity: 0.5;
    };
    readonly circle: {
        readonly color: 16777215;
        readonly lineColor: 0;
        readonly occlusionVisibility: false;
    };
    readonly cylinder: {
        readonly color: 16777215;
        readonly lineColor: 0;
        readonly occlusionMode: "translucence";
    };
    readonly box: {
        readonly color: 16777215;
        readonly lineColor: 0;
    };
}
color: 颜色
opacity: 透明度
lineColor: 边框线颜色
lineWidth: 线宽
lineOpacity: 边框线透明度
occlusionVisibility: 是否以一种半透明的方式显示遮挡的部分
occlusionMode: 遮挡模式
theme = {
  point: {
    readonly color: 16777215;
}point: { color: 16777215color: 0xffffff },
  line: {
    readonly lineColor: 16777215;
    readonly lineWidth: 1;
}line: { lineColor: 16777215lineColor: 0xffffff, lineWidth: 1lineWidth: 1 },
  polyline: {
    readonly lineColor: 255;
    readonly lineWidth: 2;
}polyline: { lineColor: 255lineColor: 0x0000ff, lineWidth: 2lineWidth: 2 },
  polygon: {
    readonly color: 16777215;
    readonly lineColor: 0;
    readonly lineWidth: 2;
    readonly lineOpacity: 0.8;
}polygon: { color: 16777215color: 0xffffff, lineColor: 0lineColor: 0x000000, lineWidth: 2lineWidth: 2, lineOpacity: 0.8lineOpacity: 0.8 },
  prism: {
    readonly color: 16777215;
    readonly lineColor: 0;
    readonly lineWidth: 2;
    readonly lineOpacity: 1;
}prism: { color: 16777215color: 0xffffff, lineColor: 0lineColor: 0x000000, lineWidth: 2lineWidth: 2, lineOpacity: 1lineOpacity: 1 },
  rectangle: {
    readonly color: 16777215;
    readonly lineColor: 0;
    readonly opacity: 0.5;
}rectangle: { color: 16777215color: 0xffffff, lineColor: 0lineColor: 0x000000, opacity: 0.5opacity: 0.5 },
  circle: {
    readonly color: 16777215;
    readonly lineColor: 0;
    readonly occlusionVisibility: false;
}circle: { color: 16777215color: 0xffffff, lineColor: 0lineColor: 0x000000, occlusionVisibility: falseocclusionVisibility: false },
  cylinder: {
    readonly color: 16777215;
    readonly lineColor: 0;
    readonly occlusionMode: "translucence";
}cylinder: { color: 16777215color: 0xffffff, lineColor: 0lineColor: 0x000000, occlusionMode: "translucence"occlusionMode: 'translucence' },
  box: {
    readonly color: 16777215;
    readonly lineColor: 0;
}box: { color: 16777215color: 0xffffff, lineColor: 0lineColor: 0x000000 },
} as type const = {
    readonly point: {
        readonly color: 16777215;
    };
    readonly line: {
        readonly lineColor: 16777215;
        readonly lineWidth: 1;
    };
    readonly polyline: {
        readonly lineColor: 255;
        readonly lineWidth: 2;
    };
    readonly polygon: {
        readonly color: 16777215;
        readonly lineColor: 0;
        readonly lineWidth: 2;
        readonly lineOpacity: 0.8;
    };
    readonly prism: {
        readonly color: 16777215;
        readonly lineColor: 0;
        readonly lineWidth: 2;
        readonly lineOpacity: 1;
    };
    readonly rectangle: {
        readonly color: 16777215;
        readonly lineColor: 0;
        readonly opacity: 0.5;
    };
    readonly circle: {
        readonly color: 16777215;
        readonly lineColor: 0;
        readonly occlusionVisibility: false;
    };
    readonly cylinder: {
        readonly color: 16777215;
        readonly lineColor: 0;
        readonly occlusionMode: "translucence";
    };
    readonly box: {
        readonly color: 16777215;
        readonly lineColor: 0;
    };
}const

const const sculpt: Sculptsculpt = new new Sculpt(five: Five, theme?: Partial<{
    point: Partial<PointStyle>;
    line: Partial<LineMeshStyle>;
    polyline: Partial<LineMeshStyle>;
    ... 5 more ...;
    box: Partial<...>;
}> | undefined): SculptSculpt(const five: Fivefive, const theme: {
    readonly point: {
        readonly color: 16777215;
    };
    readonly line: {
        readonly lineColor: 16777215;
        readonly lineWidth: 1;
    };
    readonly polyline: {
        readonly lineColor: 255;
        readonly lineWidth: 2;
    };
    readonly polygon: {
        readonly color: 16777215;
        readonly lineColor: 0;
        readonly lineWidth: 2;
        readonly lineOpacity: 0.8;
    };
    readonly prism: {
        readonly color: 16777215;
        readonly lineColor: 0;
        readonly lineWidth: 2;
        readonly lineOpacity: 1;
    };
    readonly rectangle: {
        readonly color: 16777215;
        readonly lineColor: 0;
        readonly opacity: 0.5;
    };
    readonly circle: {
        readonly color: 16777215;
        readonly lineColor: 0;
        readonly occlusionVisibility: false;
    };
    readonly cylinder: {
        readonly color: 16777215;
        readonly lineColor: 0;
        readonly occlusionMode: "translucence";
    };
    readonly box: {
        readonly color: 16777215;
        readonly lineColor: 0;
    };
}
color: 颜色
opacity: 透明度
lineColor: 边框线颜色
lineWidth: 线宽
lineOpacity: 边框线透明度
occlusionVisibility: 是否以一种半透明的方式显示遮挡的部分
occlusionMode: 遮挡模式
theme)

`sculpt.data`

const const data: {
    items: ({
        points: [number, number, number][];
        style: {
            lineColor: number;
            lineWidth: number;
            dashed: boolean;
        };
        id: string;
        type: string;
    } | {
        point: [number, number, number];
        style: {
            color: number;
            size: number;
        };
        id: string;
        type: string;
    } | {
        points: [number, number, number][];
        style: {
            color: number;
            lineColor: number;
            lineWidth: number;
        };
        id: string;
        type: string;
    } | {
        readonly points: [number, number, number][];
        readonly heightPoint: [number, number, number];
        readonly style: {
            readonly color: number;
            readonly lineWidth: number;
            readonly lineColor: number;
        };
        readonly id: string;
        readonly type: string;
    } | {
        center: [number, number, number];
        normal: [number, number, number];
        radius: number;
        style: {
            color: number;
        };
        id: string;
        type: string;
    } | {
        bottomCenter: [number, number, number];
        topCenter: [number, number, number];
        radius: number;
        style: {
            color: number;
        };
        id: string;
        type: string;
    })[];
}data = const sculpt: Sculptsculpt.Sculpt.data: {
    items: ({
        points: [number, number, number][];
        style: {
            lineColor: number;
            lineWidth: number;
            dashed: boolean;
        };
        id: string;
        type: string;
    } | {
        point: [number, number, number];
        style: {
            color: number;
            size: number;
        };
        id: string;
        type: string;
    } | {
        points: [number, number, number][];
        style: {
            color: number;
            lineColor: number;
            lineWidth: number;
        };
        id: string;
        type: string;
    } | {
        readonly points: [number, number, number][];
        readonly heightPoint: [number, number, number];
        readonly style: {
            readonly color: number;
            readonly lineWidth: number;
            readonly lineColor: number;
        };
        readonly id: string;
        readonly type: string;
    } | {
        center: [number, number, number];
        normal: [number, number, number];
        radius: number;
        style: {
            color: number;
        };
        id: string;
        type: string;
    } | {
        bottomCenter: [number, number, number];
        topCenter: [number, number, number];
        radius: number;
        style: {
            color: number;
        };
        id: string;
        type: string;
    })[];
}data

获取当前场景的全量Item数据。

`sculpt.items`

返回值：Item[]

获取当前场景的所有Item实例。

`sculpt.load(data)`

加载数据，将数据渲染到场景中。

`sculpt.createXXXX()`

开始在屏幕上绘制一个物体，通过鼠标的点击，拖拽，键盘快捷键（esc）等操作来完成绘制。

支持的 function:

const sculpt: Sculptsculpt.Sculpt.createPoint(params?: Partial<PointStyle> | undefined): Promise<any>@description: 开始绘制点createPoint() // 绘制点
const sculpt: Sculptsculpt.Sculpt.createline(params?: Partial<LineColorStyle & LineOpacityStyle & LineWidthStyle & {
    dashed?: boolean | undefined;
} & OcclusionStyle & Partial<...> & Partial<...> & CreateLimitConfig> | undefined): Promise<...>@deprecateduse createLine insteadcreateline() // 绘制线段
const sculpt: Sculptsculpt.Sculpt.createPolyline(params?: Partial<LineColorStyle & LineOpacityStyle & LineWidthStyle & {
    dashed?: boolean | undefined;
} & OcclusionStyle & Partial<...> & Partial<...> & CreateLimitConfig> | undefined): Promise<...>@description: 开始绘制空间折线createPolyline() // 绘制折线
const sculpt: Sculptsculpt.Sculpt.createPolygon(params?: Partial<OpacityStyle & ColorStyle & OcclusionStyle & {
    lengthEnable: boolean;
} & CreateLimitConfig> | undefined): Promise<...>@description: 开始绘制平面多边形createPolygon() // 绘制多边形
const sculpt: Sculptsculpt.Sculpt.createRectangle(config?: Partial<OpacityStyle & ColorStyle & OcclusionStyle & LineColorStyle & LineOpacityStyle & LineWidthStyle & CreateLimitConfig & DrawMethodConfig> | undefined): Promise<...>@description: 开始绘制矩形createRectangle() // 绘制矩形
const sculpt: Sculptsculpt.Sculpt.createCircle(params?: Partial<CircleWithEdgeMeshStyle> | undefined): Promise<any>@description: 开始绘制圆形createCircle() // 绘制圆
const sculpt: Sculptsculpt.Sculpt.createPrism(params?: Partial<PrismStyle> | undefined): Promise<any>@description: 开始绘制多棱柱createPrism() // 绘制多棱柱
const sculpt: Sculptsculpt.Sculpt.createBox(params?: Partial<OpacityStyle & ColorStyle & OcclusionStyle & LineColorStyle & LineOpacityStyle & LineWidthStyle & CreateLimitConfig & DrawMethodConfig> | undefined): Promise<...>@description: 开始绘制 BoxcreateBox() // 绘制Box/立方体
const sculpt: Sculptsculpt.Sculpt.createCylinder(params?: Partial<CircleStyle> | undefined): Promise<any>@description: 开始绘制圆柱createCylinder() // 绘制圆柱体

`sculpt.getItemById(id)`

通过id获取Item实例。

const const item: BuiltInItemitem = const sculpt: Sculptsculpt.Sculpt.getItemById(id: string): BuiltInItem@description: 获取物体实例getItemById('1')

`sculpt.clear()`

清空场景中的所有物体。

const sculpt: Sculptsculpt.Sculpt.clear(): void@description: 清空数据clear()

Item API

`item.type`

返回值: ItemType

返回当前Item的类型。

`item.data`

返回当前Item的数据。

`item.setData()`

设置当前Item的数据。参数数据结构：data

`item.create()`

const item: BuiltInItemitem.function create(arg0?: (Partial<LineColorStyle & LineOpacityStyle & LineWidthStyle & {
    dashed?: boolean | undefined;
} & OcclusionStyle & Partial<...> & Partial<...> & CreateLimitConfig> & ... 5 more ... & Partial<...>) | undefined): Promise<...>@description: 创建点create()

开始通过鼠标，键盘等操作绘制Item

`item.stopCreating()`

const item: BuiltInItemitem.BaseObject<ImportData extends BaseImportData = BaseImportData, ExportData extends BaseExportData = { [KeyType in keyof ({ [Key in keyof PickIndexSignature<ReplaceDeep<ReplaceDeep<ImportData, Vector3, number[]>, Color, null>> as Key extends never ? never : Key]: PickIndexSignature<...>[Key]; } & PickIndexSignature<...> & { [Key in keyof OmitIndexSignature<...> as Key extends "id" ? never : Key]: OmitIndexSignature<...>[Key]; } & OmitIndexSignature<...>)]: ({ [Key in keyof PickIndexSignature<ReplaceDeep<ReplaceDeep<ImportData, Vector3, number[]>, Color, null>> as Key extends never ? never : Key]: PickIndexSignature<...>[Key]; } & ... 2 more ... & OmitIndexSignature<...>)[KeyType]; }, Config extends BaseObjectConfig = BaseObjectConfig>.stopCreating(): void@description停止创建当前物体，等同于escstopCreating()

退出创建当前Item，等同于esc快捷键，如果当前Item未完成绘制，会删除当前Item。

`item.delete()`

const item: BuiltInItemitem.BaseObject<ImportData extends BaseImportData = BaseImportData, ExportData extends BaseExportData = { [KeyType in keyof ({ [Key in keyof PickIndexSignature<ReplaceDeep<ReplaceDeep<ImportData, Vector3, number[]>, Color, null>> as Key extends never ? never : Key]: PickIndexSignature<...>[Key]; } & PickIndexSignature<...> & { [Key in keyof OmitIndexSignature<...> as Key extends "id" ? never : Key]: OmitIndexSignature<...>[Key]; } & OmitIndexSignature<...>)]: ({ [Key in keyof PickIndexSignature<ReplaceDeep<ReplaceDeep<ImportData, Vector3, number[]>, Color, null>> as Key extends never ? never : Key]: PickIndexSignature<...>[Key]; } & ... 2 more ... & OmitIndexSignature<...>)[KeyType]; }, Config extends BaseObjectConfig = BaseObjectConfig>.delete(): void@description从场景中删除当前物体，并且移除事件监听delete()

删除当前Item

`item.on(event)`

const item: BuiltInItemitem.BaseObject<ImportData extends BaseImportData = BaseImportData, ExportData extends BaseExportData = { [KeyType in keyof ({ [Key in keyof PickIndexSignature<ReplaceDeep<ReplaceDeep<ImportData, Vector3, number[]>, Color, null>> as Key extends never ? never : Key]: PickIndexSignature<...>[Key]; } & PickIndexSignature<...> & { [Key in keyof OmitIndexSignature<...> as Key extends "id" ? never : Key]: OmitIndexSignature<...>[Key]; } & OmitIndexSignature<...>)]: ({ [Key in keyof PickIndexSignature<ReplaceDeep<ReplaceDeep<ImportData, Vector3, number[]>, Color, null>> as Key extends never ? never : Key]: PickIndexSignature<...>[Key]; } & ... 2 more ... & OmitIndexSignature<...>)[KeyType]; }, Config extends BaseObjectConfig = BaseObjectConfig>.on: <keyof FiveDomEventMap>(event: keyof FiveDomEventMap, callback: ((event: FiveDomEvent) => boolean | void) | ((event: FiveDomEvent) => void) | ... 6 more ... | ((event: FiveDomEvent) => void), config?: EventHandlerConfig | undefined) => voidon('click
dblclick
mousedown
mouseup
hover
unHover
dragstart
drag
dragend')


interface FiveDomEvent {
  FiveDomEvent.type: keyof FiveDomEventMaptype: type EventName = keyof FiveDomEventMapEventName
  FiveDomEvent.target: THREE.Object3Dtarget: import THREETHREE.class Object3DBase class for scene graph objectsObject3D
  FiveDomEvent.origDomEvent?: Event | undefinedorigDomEvent?: Event
  FiveDomEvent.raycaster: THREE.Raycasterraycaster: import THREETHREE.class RaycasterRaycaster
  FiveDomEvent.intersects?: THREE.Intersection[] | undefinedintersects?: import THREETHREE.Intersection[]
  FiveDomEvent.stopPropagation: () => voidstopPropagation: () => void
}

interface FiveDomEventMap {
  /**
   * @description 点击事件
   * @return {PreventFiveEvent} 返回 false 可以不阻止 five 的 tap 事件; default: true
   */
  FiveDomEventMap.click: (event: FiveDomEvent) => PreventFiveEvent | void@description点击事件@return返回 false 可以不阻止 five 的 tap 事件; default: trueclick: (event: FiveDomEventevent: FiveDomEvent) => type PreventFiveEvent = booleanPreventFiveEvent | void

  /**
   * @description 双击事件
   */
  FiveDomEventMap.dblclick: (event: FiveDomEvent) => void@description双击事件dblclick: (event: FiveDomEventevent: FiveDomEvent) => void

  /**
   * @description 鼠标按下事件
   */
  FiveDomEventMap.mousedown: (event: FiveDomEvent) => void@description鼠标按下事件mousedown: (event: FiveDomEventevent: FiveDomEvent) => void

  /**
   * @description 鼠标抬起事件
   */
  FiveDomEventMap.mouseup: (event: FiveDomEvent) => void@description鼠标抬起事件mouseup: (event: FiveDomEventevent: FiveDomEvent) => void

  /**
   * @description 鼠标移入事件
   */
  FiveDomEventMap.hover: (event: FiveDomEvent) => void@description鼠标移入事件hover: (event: FiveDomEventevent: FiveDomEvent) => void

  /**
   * @description 鼠标移出事件
   */
  FiveDomEventMap.unHover: (event: FiveDomEvent) => void@description鼠标移出事件unHover: (event: FiveDomEventevent: FiveDomEvent) => void

  /**
   * @description: 拖动开始
   */
  FiveDomEventMap.dragstart: (event: FiveDomEvent) => void@description: 拖动开始dragstart: (event: FiveDomEventevent: FiveDomEvent) => void

  /**
   * @description: 拖动中
   */
  FiveDomEventMap.drag: (event: FiveDomEvent) => void@description: 拖动中drag: (event: FiveDomEventevent: FiveDomEvent) => void

  /**
   * @description: 拖动结束
   */
  FiveDomEventMap.dragend: (event: FiveDomEvent) => void@description: 拖动结束dragend: (event: FiveDomEventevent: FiveDomEvent) => void
}

Reference

ItemType

type type ItemType = "Point" | "Polyline" | "Polygon" | "Rectangle" | "Circle" | "Prism" | "Box"ItemType =
  | 'Point' // 点
  | 'Polyline' // 线段/折线
  | 'Polygon' // 多边形
  | 'Rectangle' // 矩形
  | 'Circle' // 圆
  | 'Prism' // box 
  | 'Box' // Box/立方box  | 'Cylinder' // 圆柱体

data

将鼠标hover到相应data上查看类型。

import { SculptData } from "@realsee/dnalogel"

/**
 * point: 三维空间点坐标
 */
type type PointData = {
    type: LiteralString<"Point">;
    style?: {
        color?: Color | undefined;
        size?: number | undefined;
        occlusionVisibility?: boolean | undefined;
        occlusionMode?: "translucence" | "depthTest" | undefined;
        tip?: string | undefined;
    } | undefined;
    id?: string | undefined;
    point: Vector3 | number[] | {
        x?: number | undefined;
        y?: number | undefined;
        z?: number | undefined;
    };
}point: 三维空间点坐标PointData = SculptData.type SculptData.PointData = {
    type: LiteralString<"Point">;
    style?: {
        color?: Color | undefined;
        size?: number | undefined;
        occlusionVisibility?: boolean | undefined;
        occlusionMode?: "translucence" | "depthTest" | undefined;
        tip?: string | undefined;
    } | undefined;
    id?: string | undefined;
    point: Vector3 | number[] | {
        x?: number | undefined;
        y?: number | undefined;
        z?: number | undefined;
    };
}PointData
/**
 * points: 折线的点坐标集合
 */
type type PolylineData = {
    type: LiteralString<"Polyline">;
    style?: {
        lineColor?: Color | undefined;
        lineOpacity?: number | undefined;
        lineWidth?: number | undefined;
        dashed?: boolean | undefined;
        occlusionVisibility?: boolean | undefined;
        occlusionMode?: "translucence" | "depthTest" | undefined;
        lengthEnable?: boolean | undefined;
        tip?: string | undefined;
    } | undefined;
    id?: string | undefined;
    points: AnyPosition[];
}points: 折线的点坐标集合PolylineData = SculptData.type SculptData.PolylineData = {
    type: LiteralString<"Polyline">;
    style?: {
        lineColor?: Color | undefined;
        lineOpacity?: number | undefined;
        lineWidth?: number | undefined;
        dashed?: boolean | undefined;
        occlusionVisibility?: boolean | undefined;
        occlusionMode?: "translucence" | "depthTest" | undefined;
        lengthEnable?: boolean | undefined;
        tip?: string | undefined;
    } | undefined;
    id?: string | undefined;
    points: AnyPosition[];
}PolylineData
/**
 * points: 多边形的顶点坐标集合
 */
type type PolygonData = {
    type: LiteralString<"Polygon">;
    style?: {
        opacity?: number | undefined;
        color?: Color | undefined;
        occlusionVisibility?: boolean | undefined;
        occlusionMode?: "translucence" | "depthTest" | undefined;
        lineColor?: Color | undefined;
        lineOpacity?: number | undefined;
        lineWidth?: number | undefined;
    } | undefined;
    id?: string | undefined;
    points: AnyPosition[];
}points: 多边形的顶点坐标集合PolygonData = SculptData.type SculptData.PolygonData = {
    type: LiteralString<"Polygon">;
    style?: {
        opacity?: number | undefined;
        color?: Color | undefined;
        occlusionVisibility?: boolean | undefined;
        occlusionMode?: "translucence" | "depthTest" | undefined;
        lineColor?: Color | undefined;
        lineOpacity?: number | undefined;
        lineWidth?: number | undefined;
    } | undefined;
    id?: string | undefined;
    points: AnyPosition[];
}PolygonData
/**
 * points: 矩形的四个顶点坐标集合
 */
type type RectangleData = {
    type: LiteralString<"Rectangle">;
    style?: {
        opacity?: number | undefined;
        color?: Color | undefined;
        occlusionVisibility?: boolean | undefined;
        occlusionMode?: "translucence" | "depthTest" | undefined;
        lineColor?: Color | undefined;
        lineOpacity?: number | undefined;
        lineWidth?: number | undefined;
    } | undefined;
    id?: string | undefined;
    points: AnyPosition[];
}points: 矩形的四个顶点坐标集合RectangleData = SculptData.type SculptData.RectangleData = {
    type: LiteralString<"Rectangle">;
    style?: {
        opacity?: number | undefined;
        color?: Color | undefined;
        occlusionVisibility?: boolean | undefined;
        occlusionMode?: "translucence" | "depthTest" | undefined;
        lineColor?: Color | undefined;
        lineOpacity?: number | undefined;
        lineWidth?: number | undefined;
    } | undefined;
    id?: string | undefined;
    points: AnyPosition[];
}RectangleData
/**
 * center: 圆心坐标
 * normal: 圆的法向量
 * radius: 圆的半径
 */
type type CircleData = {
    type: LiteralString<"Circle">;
    style?: {
        opacity?: number | undefined;
        color?: Color | undefined;
        occlusionVisibility?: boolean | undefined;
        occlusionMode?: "translucence" | "depthTest" | undefined;
        lineColor?: Color | undefined;
        lineOpacity?: number | undefined;
        lineWidth?: number | undefined;
    } | undefined;
    id?: string | undefined;
    center: Vector3 | number[] | {
        x?: number | undefined;
        y?: number | undefined;
        z?: number | undefined;
    };
    normal: Vector3 | number[] | {
        x?: number | undefined;
        y?: number | undefined;
        z?: number | undefined;
    };
    radius: number;
}center: 圆心坐标
normal: 圆的法向量
radius: 圆的半径CircleData = SculptData.type SculptData.CircleData = {
    type: LiteralString<"Circle">;
    style?: {
        opacity?: number | undefined;
        color?: Color | undefined;
        occlusionVisibility?: boolean | undefined;
        occlusionMode?: "translucence" | "depthTest" | undefined;
        lineColor?: Color | undefined;
        lineOpacity?: number | undefined;
        lineWidth?: number | undefined;
    } | undefined;
    id?: string | undefined;
    center: Vector3 | number[] | {
        x?: number | undefined;
        y?: number | undefined;
        z?: number | undefined;
    };
    normal: Vector3 | number[] | {
        x?: number | undefined;
        y?: number | undefined;
        z?: number | undefined;
    };
    radius: number;
}CircleData
/**
 * points: 多棱柱的底面顶点坐标集合
 * heightPoint: 多棱柱的底面的第一个点对应的上表面的点的坐标
 */
type type PrismData = {
    type: LiteralString<"Prism">;
    style?: {
        opacity?: number | undefined;
        color?: Color | undefined;
        occlusionVisibility?: boolean | undefined;
        occlusionMode?: "translucence" | "depthTest" | undefined;
        lineColor?: Color | undefined;
        lineOpacity?: number | undefined;
        lineWidth?: number | undefined;
    } | undefined;
    id?: string | undefined;
    heightPoint: Vector3 | number[] | {
        x?: number | undefined;
        y?: number | undefined;
        z?: number | undefined;
    };
    points: AnyPosition[];
}points: 多棱柱的底面顶点坐标集合
heightPoint: 多棱柱的底面的第一个点对应的上表面的点的坐标PrismData = SculptData.type SculptData.PrismData = {
    type: LiteralString<"Prism">;
    style?: {
        opacity?: number | undefined;
        color?: Color | undefined;
        occlusionVisibility?: boolean | undefined;
        occlusionMode?: "translucence" | "depthTest" | undefined;
        lineColor?: Color | undefined;
        lineOpacity?: number | undefined;
        lineWidth?: number | undefined;
    } | undefined;
    id?: string | undefined;
    heightPoint: Vector3 | number[] | {
        x?: number | undefined;
        y?: number | undefined;
        z?: number | undefined;
    };
    points: AnyPosition[];
}PrismData
/**
 * points: box 的底面顶点坐标集合
 * heightPoint: box 的底面的第一个点对应的上表面的点的坐标
 */
type type BoxData = {
    type: LiteralString<"Box">;
    style?: {
        opacity?: number | undefined;
        color?: Color | undefined;
        occlusionVisibility?: boolean | undefined;
        occlusionMode?: "translucence" | "depthTest" | undefined;
        lineColor?: Color | undefined;
        lineOpacity?: number | undefined;
        lineWidth?: number | undefined;
    } | undefined;
    id?: string | undefined;
    points: AnyPosition[];
    heightPoint: Vector3 | number[] | {
        x?: number | undefined;
        y?: number | undefined;
        z?: number | undefined;
    };
}points: box 的底面顶点坐标集合
heightPoint: box 的底面的第一个点对应的上表面的点的坐标BoxData = SculptData.type SculptData.BoxData = {
    type: LiteralString<"Box">;
    style?: {
        opacity?: number | undefined;
        color?: Color | undefined;
        occlusionVisibility?: boolean | undefined;
        occlusionMode?: "translucence" | "depthTest" | undefined;
        lineColor?: Color | undefined;
        lineOpacity?: number | undefined;
        lineWidth?: number | undefined;
    } | undefined;
    id?: string | undefined;
    points: AnyPosition[];
    heightPoint: Vector3 | number[] | {
        x?: number | undefined;
        y?: number | undefined;
        z?: number | undefined;
    };
}BoxData
/**
 * bottomCenter: 圆柱体底面中心点坐标
 * topCenter: 圆柱体顶面中心点坐标
 * radius: 圆柱体半径
 */
type type CylinderData = {
    type: LiteralString<"Cylinder">;
    style?: {
        opacity?: number | undefined;
        color?: Color | undefined;
        occlusionVisibility?: boolean | undefined;
        occlusionMode?: "translucence" | "depthTest" | undefined;
    } | undefined;
    id?: string | undefined;
    bottomCenter: Vector3 | number[] | {
        x?: number | undefined;
        y?: number | undefined;
        z?: number | undefined;
    };
    topCenter: Vector3 | number[] | {
        x?: number | undefined;
        y?: number | undefined;
        z?: number | undefined;
    };
    radius: number;
}bottomCenter: 圆柱体底面中心点坐标
topCenter: 圆柱体顶面中心点坐标
radius: 圆柱体半径CylinderData = SculptData.type SculptData.CylinderData = {
    type: LiteralString<"Cylinder">;
    style?: {
        opacity?: number | undefined;
        color?: Color | undefined;
        occlusionVisibility?: boolean | undefined;
        occlusionMode?: "translucence" | "depthTest" | undefined;
    } | undefined;
    id?: string | undefined;
    bottomCenter: Vector3 | number[] | {
        x?: number | undefined;
        y?: number | undefined;
        z?: number | undefined;
    };
    topCenter: Vector3 | number[] | {
        x?: number | undefined;
        y?: number | undefined;
        z?: number | undefined;
    };
    radius: number;
}CylinderData

功能说明​

效果展示​

快速开始​

初始化​

加载数据​

创建物体​

绘制一个 Box​

绘制一个绿色边框的红色 Box​

绘制一条红色的线段​

绘制一条带有距离的线段​

绘制一条带有tip的线段​

绘制一条线段，要求锁定水平面绘制​

绘制一个矩形，要求锁定垂直面绘制，绘制方式为对角线绘制​

更自由的绘制及编辑​

开启编辑功能​

点击开始编辑​

点击展示删除按钮​

Sculpt API​

名词解释​

Theme​

sculpt.data​

sculpt.items​

sculpt.load(data)​

sculpt.createXXXX()​

sculpt.getItemById(id)​

sculpt.clear()​

Item API​

item.type​

item.data​

item.setData()​

item.create()​

item.stopCreating()​

item.delete()​

item.on(event)​

Reference​

ItemType​

data​