跳到主要内容

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) => Returns
Five 插件
[[include:plugins.md]]
@template
Parameters - 插件参数, 没有参数则为 void
@template
Returns - 如果有参数则插件暴露的 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) => Returns
Five 插件
[[include:plugins.md]]
@template
Parameters - 插件参数, 没有参数则为 void
@template
Returns - 如果有参数则插件暴露的 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 实例

加载数据​

在 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
: 开始绘制 Box
createBox()

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

const sculpt: Sculptsculpt.Sculpt.createBox(params?: Partial<OpacityStyle & ColorStyle & OcclusionStyle & LineColorStyle & LineOpacityStyle & LineWidthStyle & CreateLimitConfig & DrawMethodConfig> | undefined): Promise<...>
@description
: 开始绘制 Box
createBox({ color?: Color | undefined
@description
: 颜色
@default
0xffffff
color: 0xff0000, opacity?: number | undefined
@description
: 透明度
@default
0.5
opacity: 0.8, lineColor?: Color | undefined
@description
: 边框线颜色
@default
0xffffff
lineColor: 0x00ff00, lineWidth?: number | undefined
@description
: 线宽
@default
1
lineWidth: 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
: 边框线颜色
@default
0xffffff
lineColor: 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 不限制
@default
none
limit: '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 不限制
@default
none
limit: 'y', drawMethod?: "vertex" | "diagonal" | undefined
@description
矩形绘制方式; vertex 按顺序绘制三个点; diagonal 先绘制对角线;
@default
diagonal
drawMethod: '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
: 边框线颜色
@default
0xffffff
lineColor: 0xff0000 })
const five: Fivefive.Five.scene: Scene
内部使用的 THREE.Scene
scene.Scene.add(...objects: AddableObject[]): Scene
Adds 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.
@param
onfulfilled The callback to execute when the Promise is resolved.
@param
onrejected The callback to execute when the Promise is rejected.
@returns
A Promise for the completion of which ever callback is executed.
then(() => {
  var console: Consoleconsole.Console.log(...data: any[]): void
MDN Reference
log('绘制完成')

  // 按需启用编辑功能
  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；
    • 

@default
true
defaultAction: false })

点击开始编辑​

const sculpt: Sculptsculpt.Subscribe<Event>.on<"click">(name: "click", callback: (e: MouseEvent, item: BuiltInItem) => false | void, once?: boolean | undefined): () => void
注册事件
@param
name - 事件类型
@param
callback - 事件回调函数
@param
once - 是否只执行一次
@returns
解除事件
@template
K - 预设的监听事件名称
@template
C - 回调函数函数上下文
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
选择当前物体
@param
params.only 只选择当前物体，自动取消选择其他物体；默认 false
select({ 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
注册事件
@param
name - 事件类型
@param
callback - 事件回调函数
@param
once - 是否只执行一次
@returns
解除事件
@template
K - 预设的监听事件名称
@template
C - 回调函数函数上下文
on('objectUpdate', () => {
    var console: Consoleconsole.Console.log(...data: any[]): void
MDN Reference
log('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
注册事件
@param
name - 事件类型
@param
callback - 事件回调函数
@param
once - 是否只执行一次
@returns
解除事件
@template
K - 预设的监听事件名称
@template
C - 回调函数函数上下文
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 Reference
TouchEvent ? e: MouseEvent & TouchEvente.TouchEvent.touches: TouchList
MDN Reference
touches[0].Touch.clientX: number
MDN Reference
clientX : e: MouseEvente.MouseEvent.clientX: number
MDN Reference
clientX
  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 Reference
TouchEvent ? e: MouseEvent & TouchEvente.TouchEvent.touches: TouchList
MDN Reference
touches[0].Touch.clientY: number
MDN Reference
clientY : e: MouseEvente.MouseEvent.clientY: number
MDN Reference
clientY
  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

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<...>
@deprecated
use createLine instead
createline() // 绘制线段
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
: 开始绘制 Box
createBox() // 绘制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
停止创建当前物体，等同于esc
stopCreating()

退出创建当前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 Object3D
Base class for scene graph objects
Object3D
  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: true
click: (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