空间画布对象

createCanvas3D

创建 Canvas3D 对象。

样例：

定义：

interface GradientTextureOptions {
  colors: IColor[];
  stops?: number[];
  size?: number;
}

interface PointInfo extends BaseMeshInfo {
  radius?: number;
  color?: IColor;
  opacity?: number;
  gradient?: GradientTextureOptions;
}

interface LineInfo extends BaseMeshInfo {
  points: Position[];
  width?: number;
  color?: IColor;
  opacity?: number;
  gradient?: GradientTextureOptions;
}

interface PolygonInfo extends BaseObjectInfo {
  yHeight: number;
  points: PlaneIVector2[];
  depth?: number;
  color?: IColor;
  opacity?: number;
  gradient?: GradientTextureOptions;
}

interface CircleInfo extends BaseMeshInfo {
  radius?: number;
  color?: IColor;
  opacity?: number;
  gradient?: GradientTextureOptions;
}

interface Canvas3DInfo extends BaseObject3DInfo {
  points?: PointInfo[];
  lines?: LineInfo[];
  polygons?: PolygonInfo[];
  circles?: CircleInfo[];
}

function createCanvas3D(canvas3DInfo: Canvas3DInfo): Canvas3D;

用法：

ssp.createCanvas3D({
  id: 'xx',
  name: 'xx',
  level: {
    max: 1000,
    min: null,
  },
  points: [],
  lines: [],
  polygons: [],
  circles: [],
  position: { x: 0, y: 0, z: 0 },
  rotation: { x: 0, y: 0, z: 0 },
  scale: { x: 2, y: 2, z: 2 },
  userData: {},
});

参数：

canvas3DInfo

描述: 动画到达目标
类型: Canvas3DInfo
必填: ss

Canvas3DInfo

属性	描述	类型	默认值
id	唯一ID	string \| number
name	名称	string
level	显示层级范围	Level	{ max: null, min: null }
visible	是否可见	boolean	true
points	点信息集合	PointInfo[]	[]
lines	线信息集合	LineInfo[]	[]
polygons	面信息集合	Polygons[]	[]
circles	圆信息集合	CircleInfo[]	[]
position	位置坐标	Position	{ x: 0, y: 0, z: 0 }
rotation	旋转弧度	Rotation	{ x: 0, y: 0, z: 0 }
scale	缩放比例	Scale	{ x: 1, y: 1, z: 1 }
userData	用户数据	any	{}

PointInfo

属性	描述	类型	默认值
id	点唯一ID	string \| number
name	点名称	string
radius	点半径	number	10
color	点颜色	IColor	0xffffff
gradient	点颜色渐变	GradientTextureOptions
opacity	点不透明度	number	1
level	显示层级范围	Level	{ max: null, min: null }
position	位置坐标	Position	{ x: 0, y: 0, z: 0 }
rotation	旋转弧度	Rotation	{ x: 0, y: 0, z: 0 }
scale	缩放比例	Scale	{ x: 1, y: 1, z: 1 }
userData	用户数据	any	{}

LineInfo

属性	描述	类型	默认值
id	线唯一ID	string \| number
name	线名称	string
points	组成面的点坐标集合	Position[]
width	线宽	number	20
color	线颜色	IColor	0xffffff
gradient	线颜色渐变	GradientTextureOptions
opacity	线不透明度	number	1
level	显示层级范围	Level	{ max: null, min: null }
position	位置坐标	Position	{ x: 0, y: 0, z: 0 }
rotation	旋转弧度	Rotation	{ x: 0, y: 0, z: 0 }
scale	缩放比例	Scale	{ x: 1, y: 1, z: 1 }
userData	用户数据	any	{}

PolygonInfo

属性	描述	类型	默认值
id	面唯一ID	string \| number
name	面名称	string
yHeight	面空间高度	number	1
points	组成面的点坐标集合	PlaneIVector2[]
depth	凸起的深度	number	0
color	面颜色	IColor	0xffffff
gradient	面颜色渐变	GradientTextureOptions
opacity	面不透明度	number	1
level	显示层级范围	Level	{ max: null, min: null }
position	位置坐标	Position	{ x: 0, y: 0, z: 0 }
rotation	旋转弧度	Rotation	{ x: 0, y: 0, z: 0 }
scale	缩放比例	Scale	{ x: 1, y: 1, z: 1 }
userData	用户数据	any	{}

CircleInfo

属性	描述	类型	默认值
id	圆唯一ID	string \| number
name	圆名称	string
radius	圆半径	number	10
color	圆颜色	IColor	0xffffff
gradient	圆颜色渐变	GradientTextureOptions
opacity	圆不透明度	number	1
level	显示层级范围	Level	{ max: null, min: null }
position	位置坐标	Position	{ x: 0, y: 0, z: 0 }
rotation	旋转弧度	Rotation	{ x: 0, y: 0, z: 0 }
scale	缩放比例	Scale	{ x: 1, y: 1, z: 1 }
userData	用户数据	any	{}

GradientTextureOptions

属性	描述	类型	默认值
colors	渐变色列表	IColor[]
stops	渐变色偏移，与 color 对应，值为0 ~ 1之间	number[]	根据 colors 均匀分布
size	渐变贴图的大小	numbert	1024

getCanvas3DById

通过 id 查找

定义：

function getCanvas3DById(id: Canvas3DInfo['id']): Canvas3D | null;

用法：

const Canvas3D = ssp.getCanvas3DById('xxx');

弃用警告

请使用 getObjectById 替代

getCanvas3DByName

通过 name 查找

定义：

function getCanvas3DByName(name: string): Canvas3D[];

用法：

const Canvas3DList = ssp.getCanvas3DByName('xxx');

弃用警告

请使用 getObjectByName 替代

getAllCanvas3D

获取所有 Canvas3D 对象

定义：

function getAllCanvas3D(): Canvas3D[];

用法：

const allCanvas3DList = ssp.getAllCanvas3D();

getCanvas3DByUserDataProperty

通过 userData 属性查找

定义：

function getCanvas3DByUserDataProperty(propNameOrFindFunc: string | UserDataPropertyFindFunc, value?: any): Canvas3D[];

用法：

const Canvas3DList = ssp.getCanvas3DByUserDataProperty('propKey'， 'propVal')
// or
const Canvas3DList = ssp.getCanvas3DByUserDataProperty(item => item['itemPropKey'] === 'itemPropVal')

参数：

propNameOrFindFunc

描述: userData 内属性名或 find 函数
类型: string | function
必填:

propValue

描述: userData 内属性值。
类型: any
必填:

find 函数使用场景

Canvas3D.userData = {
  people: {
    name: 'xiaoming',
    age: 18,
  },
};
const Canvas3DList = ssp.getCanvas3DByUserDataProperty((userData) => userData?.people?.name === 'xiaoming');

弃用警告

请使用 getObjectByUserDataProperty 替代

removeCanvas3DById

通过 id 移除

定义：

function removeCanvas3DById(id: Canvas3DInfo['id']): boolean;

用法：

ssp.removeCanvas3DById('xxx');

弃用警告

请使用 removeObjectById 替代

createCanvas3DToGroup

创建 Canvas3D 到一个组内。

定义：

function createCanvas3DToGroup(groupInfo: GroupInfo, canvas3DInfoList: Canvas3DInfo[]): Group;

用法：

ssp
  .createCanvas3DToGroup(
    // groupInfo
    {
      id: 'firstCanvas3DGroup',
      name: 'name_firstCanvas3DGroup',
      // ...
    },
    // canvas3DInfoList
    [Canvas3DInfo1, Canvas3DInfo2, Canvas3DInfo3]
  )
  .then((group) => console.log(group));

参数

groupInfo

描述: 实例组对象所需信息
类型: GroupInfo
必填:

canvas3DInfoList

描述: Canvas3DInfo 集合
类型: Canvas3Dinfo[]
必填:

createGroupForCanvas3D

为 Canvas3D 提前创建一个空组。

使用场景

与 createCanvas3DToGroup 不同，有些时候可能你还没有具体的 Canvas3DInfo 数据，但你想提前创建一个批量管理的空组，当有数据时再使用 addCanvas3DForGroup 插入。

定义：

function createGroupForCanvas3D(groupInfo: GroupInfo): Group;

用法：

ssp.createGroupForCanvas3D({
  id: 'firstCanvas3DGroup',
  name: 'name_firstCanvas3DGroup',
  // ...
});

参数

groupInfo

描述: 实例组对象所需信息
类型: GroupInfo
必填:

弃用警告

请使用 createGroup 替代

addCanvas3DForGroup

向一个已经存在的组内添加 Canvas3D 对象。

定义：

function addCanvas3DForGroup(groupId: GroupInfo['id'], canvas3DInfoList: Canvas3DInfo[]): Group | null;

用法：

ssp
  .addCanvas3DForGroup(
    // groupId
    'firstCanvas3DGroup',
    // canvas3DInfoList
    [Canvas3DInfo4, Canvas3DInfo5]
  )
  .then((group) => console.log(group));

参数

groupId

描述: 组 id
类型: groupId[‘id’]
必填:

canvas3DInfoList

描述: Canvas3DInfo 集合
类型: Canvas3Dinfo[]
必填:

getCanvas3DGroupById

通过 id 查找 Canvas3D 组

定义：

function getCanvas3DGroupById(id: GroupInfo['id']): Group | null;

用法：

const group = ssp.getCanvas3DGroupById('firstCanvas3DGroup');

弃用警告

请使用 getObjectById 替代

getCanvas3DGroupByName

通过 name 查找 Canvas3D 组

定义：

function getCanvas3DGroupByName(name: string): Group[];

用法：

const groupList = ssp.getCanvas3DGroupByName('name_firstCanvas3DGroup');

弃用警告

请使用 getObjectByName 替代

getAllCanvas3DGroup

获取所有 Canvas3D 对象组

定义：

function getAllCanvas3DGroup(): Group[];

用法：

const allCanvas3DGroupList = ssp.getAllCanvas3DGroup();

弃用警告

请使用 getAllGroup 替代

removeCanvas3DGroupById

通过 id 移除 Canvas3D 组

定义：

function removeCanvas3DGroupById(id: GroupInfo['id']): boolean;

用法：

const isRemoveSuccess = ssp.removeCanvas3DGroupById('firstCanvas3DGroup');

弃用警告

请使用 removeObjectById 替代

clearCanvas3D

清除当前场景内所有 Canvas3D 对象。

定义：

function clearCanvas3D(): void;

用法：

ssp.clearCanvas3D();

showAllCanvas3D

显示当前场景内所有 Canvas3D 对象。

定义：

function showAllCanvas3D(): void;

用法：

ssp.showAllCanvas3D();

hideAllCanvas3D

隐藏当前场景内所有 Canvas3D 对象。

定义：

function hideAllCanvas3D(): void;

用法：

ssp.hideAllCanvas3D();

空间画布对象 ​

createCanvas3D ​

样例： ​

定义： ​

用法： ​

参数： ​

canvas3DInfo ​

Canvas3DInfo ​

PointInfo ​

LineInfo ​

PolygonInfo ​

CircleInfo ​

GradientTextureOptions ​

getCanvas3DById ​

定义： ​

用法： ​

getCanvas3DByName ​

定义： ​

用法： ​

getAllCanvas3D ​

定义： ​

用法： ​

getCanvas3DByUserDataProperty ​

定义： ​

用法： ​

参数： ​

propNameOrFindFunc ​

propValue ​

removeCanvas3DById ​

定义： ​

用法： ​

createCanvas3DToGroup ​

定义： ​

用法： ​

参数 ​

groupInfo ​

canvas3DInfoList ​

createGroupForCanvas3D ​

定义： ​

用法： ​

参数 ​

groupInfo ​

addCanvas3DForGroup ​

定义： ​

用法： ​

参数 ​

groupId ​

canvas3DInfoList ​

getCanvas3DGroupById ​

定义： ​

用法： ​

getCanvas3DGroupByName ​

定义： ​

用法： ​

getAllCanvas3DGroup ​

定义： ​

用法： ​

removeCanvas3DGroupById ​

定义： ​

用法： ​

clearCanvas3D ​

定义： ​

用法： ​

showAllCanvas3D ​

定义： ​

用法： ​

hideAllCanvas3D ​

定义： ​

用法： ​

空间画布对象

createCanvas3D

样例：

定义：

用法：

参数：

canvas3DInfo

Canvas3DInfo

PointInfo

LineInfo

PolygonInfo

CircleInfo

GradientTextureOptions

getCanvas3DById

定义：

用法：

getCanvas3DByName

定义：

用法：

getAllCanvas3D

定义：

用法：

getCanvas3DByUserDataProperty

定义：

用法：

参数：

propNameOrFindFunc

propValue

removeCanvas3DById

定义：

用法：

createCanvas3DToGroup

定义：

用法：

参数

groupInfo

canvas3DInfoList

createGroupForCanvas3D

定义：

用法：

参数

groupInfo

addCanvas3DForGroup

定义：

用法：

参数

groupId

canvas3DInfoList

getCanvas3DGroupById

定义：

用法：

getCanvas3DGroupByName

定义：

用法：

getAllCanvas3DGroup

定义：

用法：

removeCanvas3DGroupById

定义：

用法：

clearCanvas3D

定义：

用法：

showAllCanvas3D

定义：

用法：

hideAllCanvas3D

定义：

用法：