i3viewer v0.5.12
🔨 示例
VUE
使用官方模型示例
<template><div class="home" ref="home"></div></template>
<script>
import { Viewer, Setting, Examples } from "i3viewer";
export default {
mounted() {
const settings = new Setting({ camInitDirection: [1, 1, 1], sceneBgColor: 0xffffff });
const viewer = new Viewer(this.$refs["home"], settings);
new Examples.SmallCity(viewer).load();
},
};
</script>
<style lang="scss" scoped>
.home {
width: 100%;
height: 100%;
}
</style>
加载后端模型数据
<template>
<div class="home" ref="home"></div>
</template>
<script>
import { Viewer, Setting, Model, Source } from "i3viewer";
const modelUrl = `http://220.168.85.72:10000/i3viewer/mdsbk/40287e0289f801050189f80105db0000_LOD0.zip`;
const infoUrl = `http://220.168.85.72:10000/i3viewer/mdsbk/40287e0289f801050189f80105db0000_json.zip`;
const metaUrl = `http://220.168.85.72:10000/i3viewer/mdsbk/40287e0289f801050189f80105db0000_metadata.zip`;
export default {
mounted() {
const settings = new Setting({
camInitDirection: [1, 1, 1],
sceneBgColor: 0xffffff,
});
const viewer = new Viewer(this.$refs["home"], settings);
const models = [
new Model({
id: "40287e0289f801050189f80105db0000",
modelSrc: new Source({ url: modelUrl }),
infoSrc: new Source({ url: infoUrl }),
metaSrc: new Source({ url: metaUrl }),
}),
];
viewer.load(models);
},
};
</script>
<style lang="scss" scoped>
.home {
width: 100%;
height: 100%;
}
</style>
🔠 类型
Viewer 三维浏览器类
属性
属性名 | 类型 | 描述 |
---|---|---|
isModelLoading | boolean | 模型是否正在下载或加载中 |
setting | Setting | 获取设置信息 |
boundingBox | Object | 获取当前所有模型的总包围盒 |
boundingSphere | Object | 获取当前所有模型的总包围球 |
dataHelper | DataHelper | 数据相关辅助方法 |
operaHelper | OperaHelper | 操作相关辅助方法 |
settingHelper | SettingHelper | 设置相关辅助方法 |
controlsHelper | ControlsHelper | 轨道控制器辅助方法 |
currSelected | ThingContainerShell | 获取当前被选中的构件的业务信息 |
构造方法
constructor(dom: HTMLElement, setting?: Setting);
- outerContainer: 需要加载 Viewer 的 dom 容器
- setting: (可选) 设置项
实例方法
load(models: Array): Promise;
on(eventName: string, fn: (data?: any) => void): Viewer;
监听事件的方法
- eventName: 事件名称
- fn: 事件回调
off(eventName: string, fn: (data?: any) => void): Viewer;
解除事件监听的方法
- eventName: 事件名称
- fn: 之前注册过的事件回调
updateSize(): void;
根据 Viewer 所在 DOM 容器的尺寸更新 Viewer 尺寸(不会触发 viewer-resized 事件)
事件
事件名 | 解释 | 参数 |
---|---|---|
viewer-resized | 模型视口尺寸改变并更新模型位置后 | - |
model-loaded | 模型加载后触发 | 被加载的模型信息对象 |
单击、双击等更多事件
DataHelper 数据辅助类
OperaHelper 操作辅助类
SettingHelper 设置辅助类
ControlsHelper 轨道控制器辅助类
Setting 设置类
属性
属性名 | 类型 | 默认值 | 描述 |
---|---|---|---|
camInitDirection | number, number, number | 1, 1, 1 | 初始的摄像头方位(顺序xyz) |
upAxis | 'X', 'Y', 'Z' | 'Y' | 设置朝向上的轴 |
sceneBgColor | number | 0x000000 | 场景背景色(16进制数字) |
axesHelperMultiples | number | 0 | 3色坐标与场景包围盒尺寸的比例(为0时无3色坐标) |
toolBarSetting | IToolBarSetting | undefined | 对工具条的设置 |
useCache | 'none', 'parsed', 'final' | 'none' | 是否缓存模型数据到本地(parsed 缓存中间过程, final 缓存最终结果) |
isOutlineDrawn | boolean | false | 是否描边 |
outlineColorHex | number | 0x000000 | 描边的颜色(16进制数字) |
Model 模型类
属性
属性名 | 类型 | 默认值 | 描述 |
---|---|---|---|
id | string | '' | 模型全局唯一id |
prefix | string | '' | 指定 bizId 的前缀 |
modelSrc | Source | 必传 | 模型三维数据获取地址 |
infoSrc | Source | undefined | 模型额外信息获取地址 |
compSrc | Source | undefined | 模型构件信息获取地址 |
Source 模型来源类
属性
属性名 | 类型 | 描述 |
---|---|---|
url | string | 资源地址 |
method | 'GET', 'POST' | 下载方法 |
token | Token | 请求 Token |
Token 模型来源凭证类
属性
属性名 | 类型 | 描述 |
---|---|---|
value | string | token 的值 |
key | 'GET', 'POST' | token 的键 |
position | 'header', 'query', 'body' | token 的传输方式 |
Transform 移动、旋转、缩放类
属性
属性名 | 类型 | 默认值 | 描述 |
---|---|---|---|
id | string | - | - |
position | Point | new Point() | 位置 |
rotation | Point | new Point() | 旋转 |
scale | Point | new Point() | 缩放 |
Point 位置/向量
属性
属性名 | 类型 | 默认值 | 描述 |
---|---|---|---|
x | number | 0 | x 轴数值 |
y | number | 0 | y 轴数值 |
z | number | 0 | z 轴数值 |
IToolBarSetting
属性名 | 类型 | 默认值 | 描述 |
---|---|---|---|
rowCount | number | 1 | 工具条分多少行 |
include | string[] | undefined | 包含哪些按钮(若为空数组,则工具条不显示) |
exclude | string[] | undefined | 不包含哪些按钮 |
Examples 可选模型库
模型类名 | 描述 |
---|---|
Examples.SmallCity | 小城市 |
Examples.Building | 小区排楼 |
Examples.BlueHouse | 小别墅 |
Examples.ResidentalHouse | 花园别墅 |
Examples.TwoStoryHouse | 二层独栋别墅 |
Examples.SimpleGeomatry01 | 立方体和球体 |
ThingContainerShell 组件信息集合类
实例方法
on(eventName: string, fn: (data?: any) => void): ThingContainerShell;
监听事件的方法
- eventName: 事件名称
- fn: 事件回调
off(eventName: string, fn: (data?: any) => void): ThingContainerShell;
解除事件监听的方法
- eventName: 事件名称
- fn: 之前注册过的事件回调
get length(): number;
获取构件的个数
getAll(): Array\;
获取所有相关构件的业务数据
empty(): void;
清除所有相关构件
事件
事件名 | 解释 | 参数 |
---|---|---|
add | 添加一个或多个键值对之后触发 | BizInfo |
del | 删除一个或多个键值对之后触发 | BizInfo |
BizInfo 组件业务数据
属性名 | 类型 | 描述 |
---|---|---|
innerId | number | 内置 id |
bizId | string | 组件 id |
modelId | number | 模型 id |
示例
获取当前被选中的构件的业务信息
// 监听当前新增选中的构件的业务信息
viewer.currSelected.on("add", (bizInfos) => {
console.log("bizInfos adding:>> ", bizInfos);
});
// 监听当前取消选中的构件的业务信息
viewer.currSelected.on("del", (bizInfos) => {
console.log("bizInfos deleting:>> ", bizInfos);
});
// 获取当前选中的所有构件的业务信息
const bizInfos = viewer.currSelected.getAll();
console.log("current bizInfos:>> ", bizInfos);
🔌 插件开发
🛠️ 更多示例
18 days ago
28 days ago
27 days ago
1 month ago
4 months ago
8 months ago
8 months ago
7 months ago
7 months ago
7 months ago
7 months ago
8 months ago
8 months ago
8 months ago
7 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago