说明
添加到项目
yarn add @baidu-map/three-3d
# 或者
npm install -s @baidu-map/three-3d示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
#content {
width: 100%;
height: 600px;
}
</style>
<script src="https://unpkg.com/@baidu-map/three-3d@0.0.4/dist/index.umd.min.js"></script>
</head>
<body>
<div id="content"></div>
<script>
var data = [
{
x: 0,
y: 0,
z: 0,
height: 0.84,
width: 0.76,
depth: 1.19,
},
{
x: 0,
y: 0,
z: 0.84,
height: 0.84,
width: 0.76,
depth: 1.19,
},
{
x: 0,
y: 0,
z: 1.68,
height: 0.84,
width: 0.76,
depth: 1.19,
},
{
x: 0.76,
y: 0,
z: 0,
height: 0.84,
width: 0.76,
depth: 1.19,
},
];
var size = { length: 11.88, width: 2.3, height: 2.58 };
const sdk = new Three3D(document.getElementById('content'), { size });
sdk.setData(data);
</script>
</body>
</html>Three3D 构造函数
构造函数 Three3D(dom: Element, options?: Options) 实例化接收两个参数：DOM 节点和初始化配置，返回的实例有以下方法可用：
API
setData
setData(data: DataItem[] | (data: DataItem[]) => DataItem[] ) 设置装箱数据，接收 DataItem 数组或者是一个返回 DataItem 数组的函数，函数的参数是上一次的装箱数据。
setOptions
setOptions(options: Options) 设置坐标等辅助物体的配置和容器的尺寸。
shootCanvasPicture
shootCanvasPicture()
调用返回 canvas 对象，可用于下载图片。
destroy
destroy() 调用以销毁 canvas，为保证性能尽量在离开页面时执行销毁。
数据结构
DataItem 类型
| 属性名称 | 类型 | 是否必填 | 默认值 | 说明 |
|---|---|---|---|---|
| x | Number | 是 | \ | 箱子在空间中的 X 坐标 |
| y | Number | 是 | \ | 箱子在空间中的 Y 坐标 |
| z | Number | 是 | \ | 箱子在空间中的 Z 坐标 |
| width | Number | 是 | \ | 箱子的宽，平行于 X 轴 |
| height | Number | 是 | \ | 箱子的高，平行于 Z 轴 |
| depth | Number | 是 | \ | 箱子的长，平行于 Y 轴 |
| customise.visible | Boolean | 'border' | 'cover' | 否 | true | 指定显示部分，true 全显，false 隐藏，border 只显示边框，cover 只显示箱子表面 |
| customise.borderColor | ColorString | 否 | '#000000' | 箱子边框颜色 |
| customise.coverColor | ColorString | 否 | '#f3033c' | 箱子表面颜色 |
| customise.openMidline | Boolean | 否 | true | 是否显示开口线 |
Options 类型
options 中的 axis、grid、boundary 如果不想要，可以将其设置为 false。
| 属性名称 | 类型 | 是否必填 | 默认值 | 说明 |
|---|---|---|---|---|
| size.length | Number | 否 | 1 | 容器的长，平行于 Y 轴 |
| size.width | Number | 否 | 1 | 容器的宽，平行于 X 轴 |
| size.height | Number | 否 | 1 | 容器的高，平行于 Z 轴 |
| axis.color | ColorString[] | ColorString | 否 | ['#0000ff', '#ff0000', '#00ff00'] | 坐标系的颜色，数组表示分别设置 X、Y、Z 方向的颜色，字符串表示设置为同一种颜色 |
| grid.color | ColorString | 否 | '#888' | 底面网格线的颜色 |
| grid.division | Number | 否 | 10 | 底面网格线细分数 |
| boundary.color | ColorString[] | ColorString | 否 | ['#999c', '#aaa6'] | 容器的颜色，数组表示分别设置边框和表面的颜色，字符串表示设置为同一种颜色 |
ColorString 类型
符合 CSS 规则的颜色值，例如十六进制的颜色值 #ffffff 或 #fff，加上透明度如：#fff0 或 #ffffff00。再例如 RGB(A)颜色：rgb(255,255,255) 或 rgba(255,255,255, 0)。