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?: PartialObjectDeep<{
    point: PointStyle;
    polyline: LineMeshStyle;
    polygon: AreaStyle;
    prism: PrismStyle;
    rectangle: RectangleWithEdgeMeshStyle;
    circle: CircleWithEdgeMeshStyle;
    cylinder: CircleWithEdgeMeshStyle;
    box: BoxStyle;
}, {}> | undefined): SculptSculpt(const five: Fivefive) // five 为 Five 实例

加载数据

在 sculpt 场景中添加物体有两种方式，一种是已有数据的情况下，通过 sculpt.load(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() 方法创建。

// 开始绘制一个多边形，通过鼠标的点击拖拽来完成绘制。
const sculpt: Sculptsculpt.Sculpt.createPolygon(params?: Partial<ColoredMeshStyle> | undefined): Promise<Polygon>@description: 开始绘制平面多边形createPolygon()

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;
    } | {
        points: [ArrayPosition, ArrayPosition, ArrayPosition];
        style: {
            color: 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 ...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;
    } | {
        points: [ArrayPosition, ArrayPosition, ArrayPosition];
        style: {
            color: 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 ...data

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

`sculpt.items`

返回值：Item[]

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

方法

`sculpt.load(data)`

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

`sculpt.createXXXX()`

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

支持的 function:

const sculpt: Sculptsculpt.Sculpt.createPoint(params?: PointStyle | undefined): Promise<Point>@description: 开始绘制点createPoint() // 绘制点
const sculpt: Sculptsculpt.Sculpt.createPolyline(params?: {
    color?: Color | undefined;
    lineWidth?: number | undefined;
} | undefined): Promise<Polyline>@description: 开始绘制空间折线createPolyline() // 绘制线段/折线
const sculpt: Sculptsculpt.Sculpt.createPolygon(params?: Partial<ColoredMeshStyle> | undefined): Promise<Polygon>@description: 开始绘制平面多边形createPolygon() // 绘制多边形
const sculpt: Sculptsculpt.Sculpt.createRectangle(params?: Partial<RectangleWithEdgeMeshStyle> | undefined): Promise<Rectangle>@description: 开始绘制矩形createRectangle() // 绘制矩形
const sculpt: Sculptsculpt.Sculpt.createCircle(params?: Partial<CircleWithEdgeMeshStyle> | undefined): Promise<Circle>@description: 开始绘制圆形createCircle() // 绘制圆
const sculpt: Sculptsculpt.Sculpt.createPrism(params?: Partial<PrismStyle> | undefined): Promise<Prism>@description: 开始绘制多棱柱createPrism() // 绘制多棱柱
const sculpt: Sculptsculpt.Sculpt.createBox(params?: Partial<BoxStyle> | undefined): Promise<Box>@description: 开始绘制 BoxcreateBox() // 绘制Box/立方体
const sculpt: Sculptsculpt.Sculpt.createCylinder(params?: Partial<CircleStyle> | undefined): Promise<Cylinder>@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.create()`

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

`item.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)) => 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" | "Cylinder"ItemType =
  | 'Point' // 点
  | 'Polyline' // 线段/折线
  | 'Polygon' // 多边形
  | 'Rectangle' // 矩形
  | 'Circle' // 圆
  | 'Prism' // 多棱柱
  | 'Box' // Box/立方体
  | 'Cylinder' // 圆柱体

data

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

import { SculptData } from "@realsee/dnalogel"

type type PointData = {
    type: LiteralString<"Point">;
    style?: {
        color?: Color | undefined;
        size?: number | undefined;
        occlusionVisibility?: boolean | undefined;
    } | undefined;
    id?: string | undefined;
    point: Vector3 | number[] | {
        x: number;
        y: number;
        z: number;
    };
}PointData = SculptData.type SculptData.PointData = {
    type: LiteralString<"Point">;
    style?: {
        color?: Color | undefined;
        size?: number | undefined;
        occlusionVisibility?: boolean | undefined;
    } | undefined;
    id?: string | undefined;
    point: Vector3 | number[] | {
        x: number;
        y: number;
        z: number;
    };
}PointData
type type PolylineData = {
    type: LiteralString<"Polyline">;
    style?: {
        lineColor?: Color | undefined;
        lineWidth?: number | undefined;
        dashed?: boolean | undefined;
        occlusionVisibility?: boolean | undefined;
    } | undefined;
    id?: string | undefined;
    points: AnyPosition[];
}PolylineData = SculptData.type SculptData.PolylineData = {
    type: LiteralString<"Polyline">;
    style?: {
        lineColor?: Color | undefined;
        lineWidth?: number | undefined;
        dashed?: boolean | undefined;
        occlusionVisibility?: boolean | undefined;
    } | undefined;
    id?: string | undefined;
    points: AnyPosition[];
}PolylineData
type type PolygonData = {
    type: LiteralString<"Polygon">;
    style?: {
        opacity?: number | undefined;
        color?: Color | undefined;
        occlusionVisibility?: boolean | undefined;
        lineColor?: Color | undefined;
        lineWidth?: number | undefined;
    } | undefined;
    id?: string | undefined;
    points: AnyPosition[];
}PolygonData = SculptData.type SculptData.PolygonData = {
    type: LiteralString<"Polygon">;
    style?: {
        opacity?: number | undefined;
        color?: Color | undefined;
        occlusionVisibility?: boolean | undefined;
        lineColor?: Color | undefined;
        lineWidth?: number | undefined;
    } | undefined;
    id?: string | undefined;
    points: AnyPosition[];
}PolygonData
type type RectangleData = {
    type: LiteralString<"Rectangle">;
    style?: {
        opacity?: number | undefined;
        color?: Color | undefined;
        occlusionVisibility?: boolean | undefined;
        lineColor?: Color | undefined;
        lineWidth?: number | undefined;
    } | undefined;
    id?: string | undefined;
    points: AnyPosition[];
}RectangleData = SculptData.type SculptData.RectangleData = {
    type: LiteralString<"Rectangle">;
    style?: {
        opacity?: number | undefined;
        color?: Color | undefined;
        occlusionVisibility?: boolean | undefined;
        lineColor?: Color | undefined;
        lineWidth?: number | undefined;
    } | undefined;
    id?: string | undefined;
    points: AnyPosition[];
}RectangleData
type type CircleData = {
    type: LiteralString<"Circle">;
    style?: {
        opacity?: number | undefined;
        color?: Color | undefined;
        occlusionVisibility?: boolean | undefined;
        lineColor?: Color | undefined;
        lineWidth?: number | undefined;
    } | undefined;
    id?: string | undefined;
    center: Vector3 | number[] | {
        x: number;
        y: number;
        z: number;
    };
    normal: Vector3 | number[] | {
        x: number;
        y: number;
        z: number;
    };
    radius: number;
}CircleData = SculptData.type SculptData.CircleData = {
    type: LiteralString<"Circle">;
    style?: {
        opacity?: number | undefined;
        color?: Color | undefined;
        occlusionVisibility?: boolean | undefined;
        lineColor?: Color | undefined;
        lineWidth?: number | undefined;
    } | undefined;
    id?: string | undefined;
    center: Vector3 | number[] | {
        x: number;
        y: number;
        z: number;
    };
    normal: Vector3 | number[] | {
        x: number;
        y: number;
        z: number;
    };
    radius: number;
}CircleData
type type PrismData = {
    type: LiteralString<"Prism">;
    style?: {
        opacity?: number | undefined;
        color?: Color | undefined;
        occlusionVisibility?: boolean | undefined;
        lineColor?: Color | undefined;
        lineWidth?: number | undefined;
    } | undefined;
    id?: string | undefined;
    heightPoint: Vector3 | number[] | {
        x: number;
        y: number;
        z: number;
    };
    points: AnyPosition[];
}PrismData = SculptData.type SculptData.PrismData = {
    type: LiteralString<"Prism">;
    style?: {
        opacity?: number | undefined;
        color?: Color | undefined;
        occlusionVisibility?: boolean | undefined;
        lineColor?: Color | undefined;
        lineWidth?: number | undefined;
    } | undefined;
    id?: string | undefined;
    heightPoint: Vector3 | number[] | {
        x: number;
        y: number;
        z: number;
    };
    points: AnyPosition[];
}PrismData
type type BoxData = {
    type: LiteralString<"Box">;
    style?: {
        opacity?: number | undefined;
        color?: Color | undefined;
        occlusionVisibility?: boolean | undefined;
        lineColor?: Color | undefined;
        lineWidth?: number | undefined;
    } | undefined;
    id?: string | undefined;
    points: AnyPosition[];
    heightPoint: Vector3 | number[] | {
        x: number;
        y: number;
        z: number;
    };
}BoxData = SculptData.type SculptData.BoxData = {
    type: LiteralString<"Box">;
    style?: {
        opacity?: number | undefined;
        color?: Color | undefined;
        occlusionVisibility?: boolean | undefined;
        lineColor?: Color | undefined;
        lineWidth?: number | undefined;
    } | undefined;
    id?: string | undefined;
    points: AnyPosition[];
    heightPoint: Vector3 | number[] | {
        x: number;
        y: number;
        z: number;
    };
}BoxData
type type CylinderData = {
    type: LiteralString<"Cylinder">;
    style?: {
        opacity?: number | undefined;
        color?: Color | undefined;
        occlusionVisibility?: boolean | undefined;
    } | undefined;
    id?: string | undefined;
    bottomCenter: Vector3 | number[] | {
        x: number;
        y: number;
        z: number;
    };
    topCenter: Vector3 | number[] | {
        x: number;
        y: number;
        z: number;
    };
    radius: number;
}CylinderData = SculptData.type SculptData.CylinderData = {
    type: LiteralString<"Cylinder">;
    style?: {
        opacity?: number | undefined;
        color?: Color | undefined;
        occlusionVisibility?: boolean | undefined;
    } | undefined;
    id?: string | undefined;
    bottomCenter: Vector3 | number[] | {
        x: number;
        y: number;
        z: number;
    };
    topCenter: Vector3 | number[] | {
        x: number;
        y: number;
        z: number;
    };
    radius: number;
}CylinderData

功能说明​

效果展示​

快速开始​

初始化​

加载数据​

创建物体​

Sculpt API​

sculpt.data​

sculpt.items​

sculpt.load(data)​

sculpt.createXXXX()​

sculpt.getItemById(id)​

sculpt.clear()​

Item API​

item.type​

item.data​

item.create()​

item.delete()​

item.on(event)​

Reference​

ItemType​

data​