@xtctwins/tctwins-bimx-engine

xtc 三维文件查看器

安装相关依赖

UI element-plus

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

npm i element-plus

事件总线 mitt

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

npm i mitt

状态管理 pinia

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

npm i pinia

文件获取 ali-oss

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

npm i ali-oss

安装依赖

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

Example

<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文件

:load-meta="true"

是否显示导航盒

:showNavCube="true"

导航盒尺寸

:nav-cube-size="120"

背景颜色

:background-color="#d0d0d0"

功能

添加需要的即可

inspector

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

reseta

reseta - 重置模型视角

事件

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

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

事件内容包括：

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