i3viewer

示例

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(0, 0, 0)	位置，单位：默认长度单位
rotation	Point	new Point(0, 0, 0)	旋转，单位：弧度
scale	Point	new Point(1, 1, 1)	缩放，单位：缩放的倍数

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<BizInfo>;

获取所有相关构件的业务数据

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);

---

插件开发

点此跳转

更多示例

点此跳转