@baidu-map/three-3d
v0.0.7
Published
装箱3d展示
Downloads
15
Readme
说明
添加到项目
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/[email protected]/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)。