Appearance
辅助器
addAxesHelper
添加坐标轴辅助器
样例：
定义：
ts
interface AxesHelperOptions extends BaseHelperOptions {
axesLength?: number;
}
function addAxesHelper(options: AxesHelperOptions): AxesHelper;用法：
js
ssp.addAxesHelper({
id: 'test_axesHelper',
axesLength: 1000,
});参数：
options
- 描述: 可配置项
- 必填:
- 类型: AxesHelperOptions
AxesHelperOptions
| 属性 | 描述 | 类型 | 必填 | 默认值 |
|---|---|---|---|---|
| id | 唯一 ID | string | ||
| axesLength | 轴线长度 | number | 1000 |
addGridHelper
添加网格辅助器
定义：
ts
interface GridHelperOptions extends BaseHelperOptions {
size?: number;
divisions?: number;
color?: IColor;
position?: Position;
rotation?: Rotation;
scale?: Scale;
}
function addGridHelper(options: GridHelperOptions): GridHelper;用法：
js
ssp.addGridHelper({
id: 'test_gridHelper',
size: 1000,
divisions: 20,
color: '#fff',
});options
- 描述: 可配置项
- 必填:
- 类型: GridHelperOptions
GridHelperOptions
| 属性 | 描述 | 类型 | 必填 | 默认值 |
|---|---|---|---|---|
| id | 唯一 ID | string | ||
| size | 网格尺寸 | number | 1000 | |
| divisions | 网格横纵向分割格数 | number | 20 | |
| color | 网格颜色 | IColor | #ffffff | |
| position | 空间位置 | Position | { x: 0, y: 0, z: 0 } | |
| rotation | 空间旋转弧度 | Rotation | { x: 0, y: 0, z: 0 } | |
| scale | 缩放比 | Scale | { x: 1, y: 1, z: 1 } |
addPlaneHelper
添加面辅助器
定义：
ts
interface PlaneHelperOptions extends BaseHelperOptions {
width?: number;
height?: number;
color?: IColor;
opacity?: number;
position?: Position;
rotation?: Rotation;
scale?: Scale;
}
function addPlaneHelper(options: PlaneHelperOptions): BaseMesh;用法：
js
ssp.addPlaneHelper({
id: 'test_planeHelper',
width: 500,
height: 500,
color: '#00ff00',
opacity: 0.2,
position: { x: 0, y: 0, z: 0 },
rotation: { x: 0, y: 0, z: 0 },
});参数：
options
- 描述: 可配置项
- 必填:
- 类型: PlaneHelperOptions
PlaneHelperOptions
| 属性 | 描述 | 类型 | 必填 | 默认值 |
|---|---|---|---|---|
| id | 唯一 ID | string | ||
| width | 宽度 | number | 500 | |
| height | 高度 | number | 500 | |
| color | 颜色 | IColor | #00ff00 | |
| opacity | 不透明度 | number | 0.2 | |
| position | 空间位置 | Position | { x: 0, y: 0, z: 0 } | |
| rotation | 空间旋转弧度 | Rotation | { x: 0, y: 0, z: 0 } | |
| scale | 缩放比 | Scale | { x: 1, y: 1, z: 1 } |
addBoxHelper
添加包围盒辅助器
定义：
ts
interface BoxHelperOptions extends BaseHelperOptions {
box: Box3;
color?: IColor;
}
function addBoxHelper(options: BoxHelperOptions): Box3Helper;用法：
js
ssp.addBoxHelper({
id: 'test_boxHelper',
box: ssp.getObjectById('xxx_model').getBoundingBox(),
color: '#00ff00',
});参数：
options
- 描述: 可配置项
- 必填:
- 类型: BoxHelperOptions
BoxHelperOptions
| 属性 | 描述 | 类型 | 必填 | 默认值 |
|---|---|---|---|---|
| id | 唯一 ID | string | ||
| box | 包围盒 | string | ||
| color | 辅助线条颜色 | IColor | #00ff00 |
addGroundHelper
添加地面辅助器
样例：
定义：
ts
interface GroundHelperOptions extends BaseHelperOptions {
imgUrl: string;
width?: number;
height?: number;
opacity?: number;
position?: Position;
rotation?: Position;
scale?: Scale;
repeat?: IVector2;
}
function addGroundHelper(options: GroundHelperOptions): Promise<Ground>;用法：
js
await ssp.addGroundHelper({
id: 'test_ground'
imgUrl: 'http://xxx.com/xx.png',
width: 500,
height: 500,
// ...
})参数：
options
- 描述: 可配置项
- 必填:
- 类型: GroundHelperOptions
GroundHelperOptions
| 属性 | 描述 | 类型 | 必填 | 默认值 |
|---|---|---|---|---|
| imgUrl | 生成地面的图片资源路径 | string | ||
| id | 地面唯一 ID | string | ||
| width | 地面长（平面的宽） | number | 500 | |
| height | 地面宽（平面的高） | number | 500 | |
| opacity | 地面不透明度 | number | 1 | |
| position | 地面中心点坐标 | Position | { x: 0, y: 0, z: 0 } | |
| rotation | 地面旋转弧度 | Rotation | { x: 0, y: 0, z: 0 } | |
| scale | 地面缩放比 | Scale | { x: 1, y: 1, z: 1 } | |
| repeat | 地面在平面内的平铺数 | IVector2 | { x: 10, y: 10 } |
addDirectionalLightHelper
添加平行光辅助器
定义：
ts
interface DirectionalLightHelperOptions extends BaseHelperOptions {
light: DirectionalLight;
color?: IColor;
size?: number;
}
function addDirectionalLightHelper(
options: DirectionalLightHelperOptions
): THREE.DirectionalLightHelper;用法：
js
const light = ssp.createDirectionalLight({
id: 'directional_light',
});
ssp.addDirectionalLightHelper({
id: 'directional_light_helper',
light,
color: 'yellow',
});参数：
options
- 描述: 配置项
- 必填:
- 类型:
DirectionalLightHelperOptions
DirectionalLightHelperOptions
| 属性 | 描述 | 类型 | 必填 | 默认值 |
|---|---|---|---|---|
| id | 唯一 ID | string | ||
| light | 平行光对象 | DirectionalLight | ||
| color | 颜色 | IColor | 平行光的颜色 | |
| size | 大小 | number | 50 |
addHemisphereLightHelper
添加半球光辅助器
定义：
ts
interface HemisphereLightHelperOptions extends BaseHelperOptions {
light: HemisphereLight;
color?: IColor;
size?: number;
}
function addHemisphereLightHelper(
options: HemisphereLightHelperOptions
): THREE.HemisphereLightHelper;用法：
js
const light = ssp.createHemisphereLight({
id: 'hemisphere_light',
});
ssp.addHemisphereLightHelper({
id: 'hemisphere_light_helper',
light,
color: 'yellow',
});参数：
options
- 描述: 配置项
- 必填:
- 类型:
HemisphereLightHelperOptions
HemisphereLightHelperOptions
| 属性 | 描述 | 类型 | 必填 | 默认值 |
|---|---|---|---|---|
| id | 唯一 ID | string | ||
| light | 半球光对象 | HemisphereLight | ||
| color | 颜色 | IColor | 半球光的颜色 | |
| size | 大小 | number | 20 |
addSpotLightHelper
添加聚光灯辅助器
定义：
ts
interface SpotLightHelperOptions extends BaseHelperOptions {
light: SpotLight;
color?: IColor;
}
function addSpotLightHelper(
options: SpotLightHelperOptions
): THREE.SpotLightHelper;用法：
js
const light = ssp.createSpotLight({
id: 'spot_light',
});
ssp.addSpotLightHelper({
id: 'spot_light_helper',
light,
color: 'yellow',
});参数：
options
- 描述: 配置项
- 必填:
- 类型:
SpotLightHelperOptions
| 属性 | 描述 | 类型 | 必填 | 默认值 |
|---|---|---|---|---|
| id | 唯一 ID | string | ||
| light | 聚光灯对象 | SpotLight | ||
| color | 颜色 | IColor | 聚光灯的颜色 |
addPointLightHelper
添加点光辅助器
定义：
ts
interface PointLightHelperOptions extends BaseHelperOptions {
light: PointLight;
color?: IColor;
size?: number;
}
function addPointLightHelper(
options: PointLightHelperOptions
): THREE.PointLightHelper;用法：
js
const light = ssp.createPointLight({
id: 'point_light',
});
ssp.addPointLightHelper({
id: 'point_light_helper',
light,
color: 'yellow',
});参数：
options
- 描述: 配置项
- 必填:
- 类型:
PointLightHelperOptions
PointLightHelperOptions
| 属性 | 描述 | 类型 | 必填 | 默认值 |
|---|---|---|---|---|
| id | 唯一 ID | string | ||
| light | 点光对象 | PointLight | ||
| color | 颜色 | IColor | 点光的颜色 | |
| size | 大小 | number | 20 |
addRectAreaLightHelper
添加矩形区域光辅助器
定义：
ts
interface RectAreaLightHelperOptions extends BaseHelperOptions {
light: RectAreaLight;
color?: IColor;
}
function addRectAreaLightHelper(
options: RectAreaLightHelperOptions
): RectAreaLightHelper;用法：
js
const light = ssp.createRectAreaLight({
id: 'rect_area_light',
});
ssp.addRectAreaLightHelper({
id: 'rect_area_light_helper',
light,
color: 'yellow',
});参数：
options
- 描述: 配置项
- 必填:
- 类型:
RectAreaLightHelperOptions
RectAreaLightHelperOptions
| 属性 | 描述 | 类型 | 必填 | 默认值 |
|---|---|---|---|---|
| id | 唯一 ID | string | ||
| light | 矩形区域光对象 | RectAreaLight | ||
| color | 颜色 | IColor | 矩形区域光的颜色 |
clearHelper
清空辅助器
定义：
ts
function clearHelper(): void;用法：
js
ssp.clearHelper();showAllHelper
显示所有辅助器
定义：
ts
function showAllHelper(): void;用法：
js
ssp.showAllHelper();hideAllHelper
隐藏所有辅助器
定义：
ts
function hideAllHelper(): void;用法：
js
ssp.hideAllHelper();