<!-- -->
|
<template>
|
<div
|
:style="{
|
width: width ? width : '100%',
|
height: height ? height : '100%',
|
}"
|
>
|
<div
|
v-if="m_isShowWaitingFrm"
|
:key="1"
|
style="width: 100%; height: 100%; position: relative"
|
id="viewport"
|
>
|
<div v-if="!isMobile" class="tool">
|
<div style="display: none" class="itemcss" title="导入模型文件">
|
<van-icon name="share-o" class="van-icon-folder-opened big" />
|
<!-- <van-icon class="van-icon-folder-opened big"><folder-opened /></van-icon> -->
|
</div>
|
<div class="itemcss" title="复位">
|
<van-icon name="wap-home-o" class="el-icon-s-home big"></van-icon>
|
</div>
|
<div class="itemcss" title="截图">
|
<van-icon name="photo-o" class="el-icon-camera big"></van-icon>
|
</div>
|
<div class="itemcss" title="左转">
|
<van-icon name="arrow-left" class="el-icon-refresh-left big"></van-icon>
|
</div>
|
<div class="itemcss" title="右转">
|
<van-icon name="arrow" class="el-icon-refresh-right big"></van-icon>
|
</div>
|
<div class="itemcss" title="透明显示">
|
<van-icon class="el-icon-magic-stick big"></van-icon>
|
</div>
|
<div class="itemcss" title="轮廓线">
|
<van-icon class="el-icon-box big"></van-icon>
|
</div>
|
<div style="display: none" class="itemcss" title="剖切面">
|
<van-icon class="el-icon-scissors big"></van-icon>
|
</div>
|
<div style="display: none" class="itemcss" title="圆切面">
|
<van-icon class="el-icon-aim big"></van-icon>
|
</div>
|
<div class="itemcss" title="俯视">
|
<van-icon class="el-icon-bottom big"></van-icon>
|
</div>
|
<div class="itemcss" title="仰视">
|
<van-icon class="el-icon-top big"></van-icon>
|
</div>
|
<div class="itemcss" title="左视">
|
<van-icon class="el-icon-right big"></van-icon>
|
</div>
|
<div
|
v-if="m_isShowDownloadCmd"
|
@click="downloadModel3D"
|
class="itemcss"
|
title="模型下载"
|
>
|
<van-icon class="el-icon-download big"></van-icon>
|
</div>
|
<div
|
v-if="isHaveScaleModel"
|
@click="setModelVisible"
|
:class="['itemcss']"
|
:title="isShowDefault ? '原模型隐藏' : '原模型显示'"
|
>
|
<i
|
:class="[
|
'iconfont',
|
isShowDefault ? 'iconicon-test' : 'iconbiyan2',
|
'big',
|
]"
|
></i>
|
</div>
|
<div style="display: none" class="itemcss" title="全屏">
|
<van-icon class="el-icon-monitor big"></van-icon>
|
</div>
|
<div v-show="m_isHaveDim" class="itemcss" title="标注">
|
<van-icon
|
:class="['el-icon-info', 'big', m_isDispDim ? 'active' : '']"
|
></van-icon>
|
</div>
|
<div class="itemcss" title="更多">
|
<van-icon name="apps-o" class="el-icon-copy-document big"></van-icon>
|
</div>
|
</div>
|
<div v-if="isMobile" class="mtool">
|
<div class="mitemcss" title="复位">
|
<van-icon name="home-o" class="el-icon-s-home mbig"></van-icon>
|
</div>
|
<div v-show="m_isHaveDim" class="mitemcss" title="标注">
|
<van-icon
|
name="info-o"
|
:class="['el-icon-info', 'mbig', m_isDispDim ? 'active' : '']"
|
></van-icon>
|
</div>
|
<div style="display: none" class="mitemcss" title="全屏">
|
<van-icon class="el-icon-monitor mbig"></van-icon>
|
</div>
|
<div class="mitemcss" title="更多">
|
<van-icon name="apps-o" class="el-icon-copy-document mbig"></van-icon>
|
</div>
|
</div>
|
<div v-if="isMobile" class="mtool2">
|
<div class="mitemcss" title="导入模型文件" style="display: none">
|
<van-icon class="el-icon-folder-opened mbig"></van-icon>
|
</div>
|
<div class="mitemcss" style="transform: rotateY(180deg);" title="左转">
|
<van-icon name="replay" class="el-icon-refresh-left mbig"></van-icon>
|
</div>
|
<div class="mitemcss" title="右转">
|
<van-icon name="replay" class="el-icon-refresh-right mbig"></van-icon>
|
</div>
|
<div class="mitemcss" title="透明显示">
|
<van-icon name="browsing-history-o" class="el-icon-magic-stick mbig"></van-icon>
|
</div>
|
<div class="mitemcss" title="轮廓线">
|
<van-icon name="send-gift-o" class="el-icon-box mbig"></van-icon>
|
</div>
|
<div class="mitemcss" title="剖切面">
|
<van-icon name="filter-o" class="el-icon-scissors mbig"></van-icon>
|
</div>
|
<div class="mitemcss" title="俯视">
|
<van-icon name="arrow-down" class="el-icon-bottom mbig"></van-icon>
|
</div>
|
<div class="mitemcss" title="仰视">
|
<van-icon name="arrow-up" class="el-icon-top mbig"></van-icon>
|
</div>
|
<div class="mitemcss" title="左视">
|
<van-icon name="arrow-left" class="el-icon-right mbig"></van-icon>
|
</div>
|
<div class="mitemcss" title="截图">
|
<van-icon name="photo-o" class="el-icon-camera mbig"></van-icon>
|
</div>
|
<div
|
v-if="m_isShowDownloadCmd"
|
@click="downloadModel3D"
|
class="mitemcss"
|
title="模型下载"
|
>
|
<van-icon name="down" class="el-icon-download mbig"></van-icon>
|
</div>
|
<div
|
v-if="isHaveScaleModel"
|
@click="setModelVisible"
|
class="mitemcss"
|
:title="isShowDefault ? '原模型隐藏' : '原模型显示'"
|
>
|
<i
|
:class="[
|
'iconfont',
|
isShowDefault ? 'iconicon-test' : 'iconbiyan2',
|
'mbig',
|
]"
|
></i>
|
</div>
|
</div>
|
</div>
|
<div
|
v-if="!m_isShowWaitingFrm"
|
:key="2"
|
style="width: 100%; height: 100%; position: relative"
|
id="viewport"
|
>
|
<div v-if="!isMobile" class="tool">
|
<div style="display: none" class="itemcss" title="导入模型文件">
|
<van-icon class="el-icon-folder-opened big"></van-icon>
|
</div>
|
<div class="itemcss" title="复位">
|
<van-icon class="el-icon-s-home big"></van-icon>
|
</div>
|
<div class="itemcss" title="截图">
|
<van-icon class="el-icon-camera big"></van-icon>
|
</div>
|
<div class="itemcss" title="左转">
|
<van-icon class="el-icon-refresh-left big"></van-icon>
|
</div>
|
<div class="itemcss" title="右转">
|
<van-icon class="el-icon-refresh-right big"></van-icon>
|
</div>
|
<div class="itemcss" title="透明显示">
|
<van-icon class="el-icon-magic-stick big"></van-icon>
|
</div>
|
<div class="itemcss" title="轮廓线">
|
<van-icon class="el-icon-box big"></van-icon>
|
</div>
|
<div style="display: none" class="itemcss" title="剖切面">
|
<van-icon class="el-icon-scissors big"></van-icon>
|
</div>
|
<div style="display: none" class="itemcss" title="圆切面">
|
<van-icon class="el-icon-aim big"></van-icon>
|
</div>
|
<div class="itemcss" title="俯视">
|
<van-icon class="el-icon-bottom big"></van-icon>
|
</div>
|
<div class="itemcss" title="仰视">
|
<van-icon class="el-icon-top big"></van-icon>
|
</div>
|
<div class="itemcss" title="左视">
|
<van-icon class="el-icon-right big"></van-icon>
|
</div>
|
<div
|
v-if="m_isShowDownloadCmd"
|
@click="downloadModel3D"
|
class="itemcss"
|
title="模型下载"
|
>
|
<van-icon class="el-icon-download big"></van-icon>
|
</div>
|
<div
|
v-if="isHaveScaleModel"
|
@click="setModelVisible"
|
:class="['itemcss']"
|
:title="isShowDefault ? '原模型隐藏' : '原模型显示'"
|
>
|
<i
|
:class="[
|
'iconfont',
|
isShowDefault ? 'iconicon-test' : 'iconbiyan2',
|
'big',
|
]"
|
></i>
|
</div>
|
<div style="display: none" class="itemcss" title="全屏">
|
<van-icon class="el-icon-monitor big"></van-icon>
|
</div>
|
<div v-show="m_isHaveDim" class="itemcss" title="标注">
|
<van-icon
|
:class="['el-icon-info', 'big', m_isDispDim ? 'active' : '']"
|
></van-icon>
|
</div>
|
<div style="display: none" class="itemcss" title="更多">
|
<van-icon class="el-icon-copy-document big"></van-icon>
|
</div>
|
</div>
|
<div v-if="isMobile" class="mtool">
|
<div class="mitemcss" title="复位">
|
<van-icon name="home-o" class="el-icon-s-home mbig"></van-icon>
|
</div>
|
<div v-show="m_isHaveDim" class="mitemcss" title="标注">
|
<van-icon
|
name="info-o"
|
:class="['el-icon-info', 'mbig', m_isDispDim ? 'active' : '']"
|
></van-icon>
|
</div>
|
<div style="display: none" class="mitemcss" title="全屏">
|
<van-icon class="el-icon-monitor mbig"></van-icon>
|
</div>
|
<div class="mitemcss" title="更多">
|
<van-icon name="apps-o" class="el-icon-copy-document mbig"></van-icon>
|
</div>
|
</div>
|
<div v-if="isMobile" class="mtool2">
|
<div class="mitemcss" title="导入模型文件" style="display: none">
|
<van-icon class="el-icon-folder-opened mbig"></van-icon>
|
</div>
|
<div class="mitemcss" style="transform: rotateY(180deg);" title="左转">
|
<van-icon name="replay" class="el-icon-refresh-left mbig"></van-icon>
|
</div>
|
<div class="mitemcss" title="右转">
|
<van-icon name="replay" class="el-icon-refresh-right mbig"></van-icon>
|
</div>
|
<div class="mitemcss" title="透明显示">
|
<van-icon name="browsing-history-o" class="el-icon-magic-stick mbig"></van-icon>
|
</div>
|
<div class="mitemcss" title="轮廓线">
|
<van-icon name="send-gift-o" class="el-icon-box mbig"></van-icon>
|
</div>
|
<div class="mitemcss" title="剖切面">
|
<van-icon name="filter-o" class="el-icon-scissors mbig"></van-icon>
|
</div>
|
<div class="mitemcss" title="俯视">
|
<van-icon name="arrow-down" class="el-icon-bottom mbig"></van-icon>
|
</div>
|
<div class="mitemcss" title="仰视">
|
<van-icon name="arrow-up" class="el-icon-top mbig"></van-icon>
|
</div>
|
<div class="mitemcss" title="左视">
|
<van-icon name="arrow-left" class="el-icon-right mbig"></van-icon>
|
</div>
|
<div class="mitemcss" title="截图">
|
<van-icon name="photo-o" class="el-icon-camera mbig"></van-icon>
|
</div>
|
<div
|
v-if="m_isShowDownloadCmd"
|
@click="downloadModel3D"
|
class="mitemcss"
|
title="模型下载"
|
>
|
<van-icon name="down" class="el-icon-download mbig"></van-icon>
|
</div>
|
<div
|
v-if="isHaveScaleModel"
|
@click="setModelVisible"
|
class="mitemcss"
|
:title="isShowDefault ? '原模型隐藏' : '原模型显示'"
|
>
|
<i
|
:class="[
|
'iconfont',
|
isShowDefault ? 'iconicon-test' : 'iconbiyan2',
|
'mbig',
|
]"
|
></i>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import Model3dView from "./model3DView.js";
|
let m_model3dView = null; //模型加载对象
|
export default {
|
name: "Model3dContainer",
|
props: [
|
"width",
|
"height",
|
"isMobile", //是手机端
|
],
|
components: {},
|
data() {
|
return {
|
m_originModelUrl: "", //模型加载url
|
m_isLoadFinish: false, //加载是否完成
|
m_isShowWaitingFrm: false, //改变模型使用
|
m_loadDownCmdCb: null, //文件下载回调
|
isShowDefault: true, //是否显示原模型
|
m_isShowDownloadCmd: false, //是否显示下载
|
isHaveScaleModel: false, //是否有缩放模型
|
isloadSetting: false, //是否加载模型json文件
|
m_isDispDim: false, //是否显示尺寸
|
m_isHaveDim: false, //是否有尺寸配置
|
m_styleSetting: null, //默认Style
|
};
|
},
|
created() {},
|
mounted() {},
|
computed: {},
|
watch: {},
|
methods: {
|
//设置默认样式,设置就不用后端返回的JSON文件配置
|
setStyleSetting(styleSetting) {
|
this.m_styleSetting = styleSetting;
|
},
|
//加载三维模型(外部加载)
|
loadModel(url, isloadSetting, callback) {
|
/**
|
* url 模型路径
|
* callback 回调函数
|
* isloadSetting 是否加载模型的json文件
|
*/
|
if (url == null) return;
|
if (!url) {
|
return;
|
}
|
if (url == this.m_originModelUrl) return;
|
|
let _this = this;
|
this.isloadSetting = isloadSetting;
|
this.m_isLoadFinish = false;
|
this.m_originModelUrl = url;
|
this.m_isShowWaitingFrm = !this.m_isShowWaitingFrm;
|
|
var onFinish = function () {
|
//加载三维模型完成后的回调
|
_this.m_isLoadFinish = true;
|
if (typeof callback == "function") {
|
callback(true);
|
}
|
};
|
|
setTimeout(function () {
|
//console.log(url,isloadSetting ,"22222222222222" )
|
_this.loadModelAndDimJson(url, isloadSetting, onFinish);
|
}, 30);
|
},
|
|
//设置下载模型的回调函数
|
setLoadModelCommandCb(cb) {
|
this.m_isShowDownloadCmd = true;
|
this.m_loadDownCmdCb = cb;
|
},
|
//加载三维模型(和判断JSON文件是否存在)
|
loadModelAndDimJson(full_url, isloadSetting, finish_callback) {
|
let _this = this;
|
//console.log(full_url,isloadSetting)
|
m_model3dView = new Model3dView({ elId: "viewport" });
|
_this.m_isHaveDim = false;
|
|
//获取尺寸等信息配置通过json文件
|
if (isloadSetting) {
|
var json_file_url = full_url.split(".fbx")[0] + ".json";
|
//console.log("json_file_url", json_file_url);
|
|
m_model3dView.initialSetting(
|
json_file_url,
|
_this.m_styleSetting,
|
function (isSuccess, setting_data) {
|
// console.log("isSuccess", isSuccess, setting_data);
|
if (isSuccess && setting_data) {
|
if (
|
setting_data.dimention != null &&
|
setting_data.dimention.elements != null &&
|
setting_data.dimention.elements.length > 0
|
){
|
_this.m_isHaveDim = true;
|
}
|
|
|
// if (_this.m_styleSetting) {
|
// if (
|
// _this.m_styleSetting.background &&
|
// _this.m_styleSetting.background.color
|
// ) {
|
// setting_data.background.color =
|
// _this.m_styleSetting.background.color;
|
// }
|
// }
|
|
// if (setting_data.background && setting_data.background.color) {
|
// _this.setBackgroundColor(setting_data.background.color);
|
// }
|
}
|
|
m_model3dView.renderFromUrl(full_url, finish_callback);
|
}
|
);
|
} else {
|
m_model3dView.renderFromUrl(full_url, finish_callback);
|
}
|
},
|
//下载自定义事件
|
downloadModel3D() {
|
if (this.m_loadDownCmdCb == null) return;
|
var isSuccess = this.m_loadDownCmdCb();
|
if (!isSuccess) return;
|
// console.log("down model3d ok");
|
//this.$emit("download");
|
},
|
//模型克隆缩放
|
setDimRatio(dimRatio) {
|
this.isHaveScaleModel = false;
|
if (this.m_isLoadFinish && dimRatio && dimRatio > 0) {
|
this.isHaveScaleModel = true;
|
m_model3dView.scaleCloneModel(dimRatio);
|
}
|
},
|
//设置元模型是否显示
|
setModelVisible() {
|
this.isShowDefault = !this.isShowDefault;
|
m_model3dView.setModelVisible(this.isShowDefault);
|
},
|
//是否显示尺寸
|
setDimDisplay(isDisp) {
|
this.m_isDispDim = isDisp;
|
},
|
//更新尺寸值(数据格式 ID,Value)
|
updateSizeValue(data) {
|
if (data == null) return;
|
|
m_model3dView && m_model3dView.updateSizeValue(data);
|
},
|
|
//更新尺寸根据json
|
updataSizeByJson(data) {
|
console.log(data);
|
m_model3dView.initSizeByJson(data);
|
},
|
//改变模型的背景颜色
|
setBackgroundColor(color) {
|
//console.log(color)
|
color && m_model3dView && m_model3dView.setBackgroundColor(color);
|
},
|
|
//父级元素尺寸变化是调用
|
handleResize() {
|
if (m_model3dView != null) {
|
setTimeout(() => {
|
m_model3dView.handleResize();
|
}, 100);
|
}
|
},
|
},
|
};
|
</script>
|
<style scoped>
|
.tool {
|
position: absolute;
|
top: 10px;
|
right: 13px;
|
z-index: 999;
|
background-color: #606266;
|
border: 2px solid #1492ff;
|
height: 45px;
|
}
|
|
.big {
|
font-size: 30px;
|
color: #409eff;
|
}
|
|
.itemcss {
|
float: left;
|
margin-left: 10px;
|
margin-top: 5px;
|
z-index: 999;
|
cursor: pointer;
|
}
|
.mtool {
|
position: absolute;
|
top: 10px;
|
right: 10px;
|
z-index: 999;
|
background-color: #606266;
|
border: 2px solid #409eff;
|
padding-bottom: 5px;
|
width: 40px;
|
opacity: 0.7;
|
}
|
.mtool2 {
|
display: none;
|
position: absolute;
|
top: 10px;
|
right: 54px;
|
z-index: 999;
|
background-color: #606266;
|
border: 2px solid #409eff;
|
padding-bottom: 5px;
|
width: 110px;
|
opacity: 0.7;
|
}
|
.mbig {
|
font-size: 30px;
|
color: #409eff;
|
}
|
.active {
|
color: #f8f8f8;
|
}
|
.mitemcss {
|
float: left;
|
margin-left: 6px;
|
margin-top: 5px;
|
z-index: 999;
|
}
|
</style>
|
