## @xtctwins/tctwins-bimx-engine

# xtc 三维文件查看器

## 安装相关依赖

## UI element-plus

<https://www.npmjs.com/package/element-plus>

```ssh
npm i element-plus
```

## 事件总线 mitt

<https://www.npmjs.com/package/mitt>

```ssh
npm i mitt
```

## 状态管理 pinia

<https://www.npmjs.com/package/pinia>

```ssh
npm i pinia
```

## 文件获取 ali-oss

<https://www.npmjs.com/package/ali-oss>

```ssh
npm i ali-oss
```

# 安装依赖

```ssh
// 安装依赖
npm i @xtctwins/tctwins-bimx-engine
// 引入样式
import "@xtctwins/tctwins-bimx-engine/dist/style.css";
```

# Example

```ts
<template>
	<!-- 一个模型 -->
	<!-- :model-buffer 和 :file-path 选一个使用即可-->
	<!-- :model-buffer 是直接传入模型buffer数据-->
	<!-- :file-path 是传入文件下载路径-->
	<BIMXViewer
		v-if="initialzed"
		:load-meta="true"
		:file-path="filePath"
		:nav-cube-size="120"
		:background-color="'#d0d0d0'"
		@emit-handler="EmitHandler" />

	<!-- 集成模型 -->
	<!-- 请使用-->
	<!--:file-paths="filePaths"-->
	<!--:multi-model="true"-->
</template>

<script lang="ts" setup>
import { onMounted, ref } from "vue";
import { BIMXViewer } from "@xtctwins/tctwins-bimx-engine";
import type { EventContent } from "@xtctwins/tctwins-bimx-engine";
import "@xtctwins/tctwins-bimx-engine/dist/style.css";

const initialzed = ref(false);
const filePath = ref(`https://tctwins-oss-test.oss-cn-beijing.aliyuncs.com/test/1公寓幕墙.xtc`);
const filePaths = [
	"https://tctwins-oss-test.oss-cn-beijing.aliyuncs.com/tests/models/multiModel/model2/20250205170745913287.xtc",
	"https://tctwins-oss-test.oss-cn-beijing.aliyuncs.com/tests/models/multiModel/model2/20250205170736552499.xtc",
	"https://tctwins-oss-test.oss-cn-beijing.aliyuncs.com/tests/models/multiModel/model2/20250205170731500203.xtc"
];
const modelBuffer = ref<ArrayBuffer>();

onMounted(() => {
	//如果选择直接传入模型modelBuffer，请在获取到buffer后再初始化BIMXViewer
	// getModel(() => {
	// 	initialzed.value = true;
	// });

	//如果使用filePath或者filePaths则直接初始化BIMXViewer即可
	initialzed.value = true;
});

//监听引擎传出的事件
const EmitHandler = (content: EventContent) => {
	console.log(content);
};

//xtc模型数据
const getModel = (callback: () => void) => {
	// 自行填写获取模型文件的内容
	// ...
	// modelBuffer.value = ...
	callback();
};
</script>

<style>
#app {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
}
</style>

```

## 其他参数解释

### 基础设置

是否载入构件属性信息（xts文件），
如果要载入，在模型xtc文件相同路径下必须有同名xts文件

```ssh
:load-meta="true"
```

是否显示导航盒

```ssh
:showNavCube="true"
```

导航盒尺寸

```ssh
:nav-cube-size="120"
```

背景颜色

```ssh
:background-color="#d0d0d0"
```

### 功能

添加需要的即可

```ssh
inspector
```

inspector - 构建属性面板开启 (需要开启loadMeta)

```ssh
reseta
```

reseta - 重置模型视角

## 事件

```ssh
//监听引擎传出的事件
const EmitHandler = (content: EventContent) => {
	console.log(content);
};
```

```ts
//事件内容
type EventContent = {
	isTool: boolean;
	event_target: ComponentName | "BimXViewer" | "ToolBar";
	event_name: string;
	content: {};
};
```

事件内容包括：

```ssh
"pickedEntity" - 点击构件
"pickedNothing" - 点击空白处
...
```

---
##### 此版本为正式