<template>
<div class="wl-bim-viewer">
<!-- 注入外部Viewer3Dcss -->
<cssLink></cssLink>
<!-- 注入外部Viewer3Djs -->
<scriptLink></scriptLink>
<!-- 模型区 -->
<div id="wl-viewer-box" class="wl-viewer-box">
<div class="wl-viewer-loading" v-if="init"></div>
</div>
<!-- 自定义区 -->
<slot></slot>
</div>
</template>
<script>
export default {
name: "WlBimViewer",
components: {
scriptLink: {
render(createElement) {
return createElement("script", {
attrs: {
type: "text/javascript",
src:
// "https://developer.api.autodesk.com/modelderivative/v2/viewers/7.*/viewer3D.min.js"
"http://wlui.oss-cn-beijing.aliyuncs.com/viewer3D.min.js",
},
});
},
},
cssLink: {
render(createElement) {
return createElement("link", {
attrs: {
type: "text/css",
rel: "stylesheet",
href:
// "https://developer.api.autodesk.com/modelderivative/v2/viewers/7.*/style.min.css"
"http://wlui.oss-cn-beijing.aliyuncs.com/style.min.css",
},
});
},
},
},
props: {
// 模型数据
docs: Array,
// 配置项
props: Object,
// 是否开启多模型，如果开启则按顺序加载docs数组内的模型
multiple: {
type: Boolean,
default: false,
},
// 是否开启docs变化，清理之前的模型然后重新加载新模型
changeClean: {
type: Boolean,
default: false,
},
},
data() {
return {
viewer: null, // 模型环境变量
db: {}, // 记录模型数据
load_options: {}, // 模型加载配置项
index: null, // 在加载过程中的当前模型索引
select_info: [], // 选中构建信息
timer: null,
init: false,
};
},
computed: {
// 模型数组
modelArray() {
return this.docs || [];
},
// 模型配置项
selfProps() {
return {
path: "path", // docs数据内得路径字段 必填
options: "options", // docs数据内的配置项字段，此字段应是一个对象，具体看autodesk forge viewer文档
name: "name", // 模型名称
};
},
},
watch: {
modelArray() {
this.changeClean && this.reloadModel();
},
},
mounted() {
this.init = true;
this.timer = setInterval(() => {
if (window.THREE && window.THREE.Matrix4) {
clearInterval(this.timer);
let mat = new window.THREE.Matrix4();
this.load_options = {
placementTransform: mat,
};
this.initViewer();
}
}, 1000);
},
beforeDestroy() {
clearInterval(this.timer);
this.timer = null;
this.init = false;
this.uploadViewer();
},
methods: {
// 初始化模型加载器
initViewer() {
// 初始化配置项
let options = {
env: "Local",
offline: "true",
useADP: false,
};
let self = this;
// 初始化
window.Autodesk.Viewing.Initializer(options, function onInitialized() {
//get the viewer div
let viewerDiv = document.getElementById("wl-viewer-box");
//initialize the viewer object
self.viewer = new window.Autodesk.Viewing.Private.GuiViewer3D(viewerDiv, {});
// 初始化回调
self.$emit("init", self.viewer);
// self.viewer.initialize();
// self.viewer.setReverseZoomDirection(true);
// 关掉渐进式渲染来避免场景闪烁
// self.viewer.setProgressiveRendering(false);
// 调用模型加载
self.multiple ? self.orderLoading() : self.promiseEachModel(0);
// 多模型选择构建事件监听
self.viewer.addEventListener(
window.Autodesk.Viewing.AGGREGATE_SELECTION_CHANGED_EVENT,
function (event) {
/* let color = new THREE.Vector4(0, 0.5, 0, 1);
let id = event.selections[0].dbIdArray[0];
self.viewer.setThemingColor(id, color); */
self.select_info = self.viewer.getAggregateSelection();
self.$emit(
"partSelect",
event.selections,
event,
self.viewer.getAggregateSelection()
);
}
);
// 摄像头新事件 当摄像头的 Transition 完成后就会被触发
/* self.viewer.addEventListener(
window.Autodesk.Viewing.CAMERA_TRANSITION_COMPLETED,
function() {}
); */
// 摄像头变化事件
self.viewer.addEventListener(
window.Autodesk.Viewing.CAMERA_CHANGE_EVENT,
function (rvt) {
self.$emit("cameraMove", rvt);
//find out all pushpin markups
/* let $eles = $("div[id^='mymk']");
let DOMeles = $eles.get();
for (let index in DOMeles) {
//get each DOM element
let DOMEle = DOMeles[index];
let divEle = $("#" + DOMEle.id);
//get out the 3D coordination
let val = divEle.data("3DData");
let pushpinModelPt = JSON.parse(val);
//get the updated screen point
// let screenpoint = viewer.worldToClient(
// new THREE.Vector3(
// pushpinModelPt.x,
// pushpinModelPt.y,
// pushpinModelPt.z
// )
// );
let screenpoint = self.worldToClient(
pushpinModelPt.id,
self.db[pushpinModelPt.mid]
);
//update the SVG position.
divEle.css({
left: screenpoint.x,
top: screenpoint.y
});
} */
}
);
// 动画初始化触发
/* self.viewer.addEventListener(
window.Autodesk.Viewing.ANIMATION_READY_EVENT,
function(e) {}
); */
});
},
/**
* 加载模型
* item 模型数据
* index 模型索引
*/
loadModel(item = {}, index = 0, successCb, errorCb) {
let _options = Object.assign({}, this.load_options, item[this.selfProps.options]);
index === 0
? this.viewer.start(item[this.selfProps.path], _options, successCb, errorCb)
: this.viewer.loadModel(item[this.selfProps.path], _options, successCb, errorCb);
},
// 有序加载
orderLoading() {
let index_arr = Array.apply(null, Array(this.modelArray.length)).map(
(item, index) => index
);
// 调用队列加载
this.processArray(index_arr, this.promiseEachModel).then(
(result) => {
//全部加载完成
this.$emit("successAll", result);
},
(reason) => {
this.$emit("errorAll", reason);
}
);
},
/**
* 顺序异步加载model
*/
promiseEachModel(index) {
return new Promise((resolve, reject) => {
let modelName = this.modelArray[index][this.selfProps.name];
let self = this;
this.loadModel(
this.modelArray[index],
index,
_onLoadModelSuccess,
_onLoadModelError
);
return;
// 加载成功回调
function _onLoadModelSuccess(model) {
self.$emit("success", model);
self.db[model.id] = model;
// 监听model渲染完成
self.viewer.addEventListener(
window.Autodesk.Viewing.GEOMETRY_LOADED_EVENT,
_onGeometryLoaded
);
//map this item with the corresponding model in case of use
self.modelArray[index].modelObj = model;
self.init = false;
}
// model渲染完毕回调
function _onGeometryLoaded(evt) {
self.init = false;
self.$emit("loaded", evt);
// 移除model渲染完毕事件监听
self.viewer.removeEventListener(
window.Autodesk.Viewing.GEOMETRY_LOADED_EVENT,
_onGeometryLoaded
);
resolve(self.modelArray[index]);
}
// 加载失败回调
function _onLoadModelError(viewerErrorCode) {
console.error(modelName + ": Load Model Error, errorCode:" + viewerErrorCode);
self.$emit("error", modelName, viewerErrorCode);
self.init = false;
//any error
reject(modelName + " Loading Failed!" + viewerErrorCode);
// 加载失败回调结束
}
});
},
// 队列调用
processArray(array, fn) {
let results = [];
return array.reduce(function (p, item) {
return p.then(function () {
return fn(item).then(function (data) {
results.push(data);
return results;
});
});
}, Promise.resolve());
},
// 清空cad颜色
clearColor() {
this.viewer && this.viewer.clearThemingColors();
},
/**
* 聚焦指定构件
* dbids 构件ids
* focal 焦距
*/
viewerFiting(ids, focal) {
if (!this.viewer) return;
// 调整焦距
let _focal = focal || this.viewer.getFocalLength();
this.viewer.setFocalLength(_focal);
this.viewer.fitToView(ids);
},
// 卸载model
unloadModel(model) {
this.viewer.impl.unloadModel(model || this.viewer.model);
return Promise.resolve();
},
// 卸载viewer
uploadViewer() {
this.viewer.tearDown();
this.viewer.finish();
this.viewer = null;
window.Autodesk.Viewing.shutdown();
},
// 获取模型信息
getModelInfo() {
return {
viewer: this.viewer,
models: this.db,
};
},
// 重启模型
reloadModel() {
this.init = true;
this.unloadModel().then(() => {
this.initViewer();
});
},
},
};
</script>
