i3viewer v0.5.21

🔨 示例

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 三维浏览器类

属性

构造方法

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 事件)

事件

单击、双击等更多事件

DataHelper 数据辅助类

点此跳转

OperaHelper 操作辅助类

点此跳转

SettingHelper 设置辅助类

点此跳转

ControlsHelper 轨道控制器辅助类

点此跳转

Setting 设置类

属性

Model 模型类

属性

Source 模型来源类

属性

Token 模型来源凭证类

属性

Transform 移动、旋转、缩放类

属性

Point 位置/向量

属性

IToolBarSetting

Examples 可选模型库

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;

清除所有相关构件

事件

BizInfo 组件业务数据

示例

获取当前被选中的构件的业务信息

// 监听当前新增选中的构件的业务信息
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);

🔌 插件开发

点此跳转

🛠️ 更多示例

点此跳转