uniapp简易集成bimface模型展示

Believe时

已于 2022-03-10 14:26:02 修改

阅读量1.4k

点赞数 2

文章标签： webview javascript html

于 2022-03-10 14:25:18 首次发布

本文链接：https://blog.csdn.net/weixin_41813738/article/details/123398198

版权

总览：1、uniapp静态资源目录内新建bim.html，bim.html中集成bimface；2、uniapp页面利用web-view组件引用bim.html页面。通过这种形式简单将bimface模型展示集成到uniapp。

1、bim.html

<!DOCTYPE html>
<html style="height: 100%;;padding: 0px;margin: 0px;">
	<head>
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
	</head>
	<body style="height: 100%;;padding: 0px;margin: 0px;">
		<div id="domId" style="width:100%; height:100%;padding: 0px;margin: 0px;" class="bimdiv"></div>
      //引入路径根据自己项目修改
		<script src="../js/BimfaceSDKLoader.js" charset="utf-8"></script>
		<script>
            //通过访问路径获取viewtoken，viewtoken是webview组件传参过来的，也可传参其他参数
			let token = getQueryVariable("token")
			let viewer3D;
			let app;
			let loaderConfig = new BimfaceSDKLoaderConfig();
			loaderConfig.viewToken = token;
			BimfaceSDKLoader.load(loaderConfig, successCallback, failureCallback);

			function successCallback(viewMetaData) {
				let domShow = document.getElementById('domId');
				let webAppConfig = new Glodon.Bimface.Application.WebApplication3DConfig();
				webAppConfig.domElement = domShow;
				app = new Glodon.Bimface.Application.WebApplication3D(webAppConfig);
				app.addView(token);
				viewer3D = app.getViewer();
			};

			function failureCallback(error) {
				console.log(error);
			};

			function getQueryVariable(variable) {
				var query = window.location.search.substring(1);
				var vars = query.split("&");
				for (var i = 0; i < vars.length; i++) {
					var pair = vars[i].split("=");
					if (pair[0] == variable) {
						return pair[1];
					}
				}
				return (false);
			}
		</script>
		<style>
		</style>
	</body>
</html>

2、bim.vue页面内，通过web-view组件引用bim.html

<template>
	<web-view :webview-styles="webviewStyles" :src="bimUrl" :update-title="false" 
	style="width: 100%;height: 100%;">
	</web-view>
</template>

<script>
	export default {
		data() {
			return {
				bimUrl: "",
				tokenUrl: "/cus/bridgeInfo/getBimFaceViewToken", //服务端获取viewtoken接口
				webviewStyles: {
					progress: {
						color: '#55aaff'
					}
				}
			}
		},
		onShow() {
			// let fileUrl = this.$Route.query
			this.$http.get(this.tokenUrl, {
				data: {
					bridgeId: "ssss"
				}
			}).then(res => {
				let token = res.data.result
				//web-view组件引用bim.html路径，访问路径带viewtoken参数
				this.bimUrl = "/static/html/bim/bim.html?token=" + token
			}).catch(e => {
				console.log("请求错误", e)
			})
		}
	}
</script>

<style>

</style>

Believe时

关注

2
点赞
踩
6

收藏

觉得还不错? 一键收藏
3
评论
uniapp简易集成bimface模型展示

总览：1、uniapp静态资源目录内新建bim.html，bim.html中集成bimface；2、uniapp页面利用web-view组件引用bim.html页面。通过这种形式简单将bimface模型展示集成到uniapp。1、bim.html<!DOCTYPE html><html style="height: 100%;;padding: 0px;margin: 0px;"> <head> <meta name="viewport" con
复制链接

扫一扫