快速入门

1. 前端Viewer概要说明

前端Viewer集成，是将业务端生成的轻量化数据文件，下载到业务端，通过Viewer离线包或组件包进行加载显示。

2. 3D Viewer离线包集成指南（2DViewer集成方式相同）

  1. 创建空项目文件，用于加载Viewer，截图参考：
  2. 放置Viewer离线包资源到3D Viewer文件夹，截图参考：
  3. 编辑demo.html文件内容，代码参考：
    <!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
	<title>图纸预览</title>
	<style>
		html, body { position: fixed; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; margin: 0; }
		#iframeDiv { position: relative; height: 100%; width: 100%; }
		iframe { width: 100%; height: 100%; border: none; margin: 0; padding: 0; }
	</style>
</head>
<body>
	<!-- 用于放模型展示的iframe，id不能修改 -->
	<div id="iframeDiv"> </div>
</body>
<script src="viewer.js"></script>
<script>
	window.onload = function () {
		nd_viewCtrl.fingerHttp = '';	// 设置云API地址，如：http://192.1.1.1:8000
		// 初始化Viewer，注：单页面同时加载多个Viewer时注意保持nd_viewCtrl唯一性
                nd_viewCtrl.init({
			src: './models/bim',	// 设置轻量化文件所在文件夹路径
		});	
	}
</script>
</html>

    注意在nd_viewCtrl中设置fingerHttp才能正常预览模型。

  4. 编辑viewer.js文件内容，代码参考：
    var nd_viewCtrl = {
	src: '', // 轻量化模型地址
	fingerHttp: '', // 云API地址，如：http://192.1.1.1:8000
  	/** init初始化方法 */
	init: function (opt) {
        // 设置轻量化文件路径
		this.src = opt.src;
      	// 加载Viewer资源。src路径填写实际存放Viewer资源的地址
		document.querySelector("#iframeDiv").innerHTML = '<iframe id="viewer" src="3Dviewer/index.html" allowFullScreen></iframe>';
	},
  	/** 模型加载完成回调方法 */
  	initLoad: function () { //加载完成
		console.log('model loaded!');
	},
  	/** 截图方法参考 */
  	screenshot: function (cc) {
      	// 获取Viewer全局对象
		var _contentWindow = document.getElementById("viewer").contentWindow;
      	// 调用控制类接口
		_contentWindow && _contentWindow.nd_screenCapture(function (base64Img) {
				cc && cc(base64Img);
		});
	},
  	/** 其它方法 */
  	...
}
  5. 放置轻量化文件到models文件夹。

    轻量化文件放置在本地或服务器上都可以，src需要指向到轻量化文件根目录。

    轻量化文件根目录参考截图：

3. 进行模型预览

3.1 预览方式：

  • 开启服务：在项目根目录启动一个前端服务，在浏览器打开demo.html即可进行模型预览。
  • 跨域浏览器：直接在跨域浏览器打开demo.html也可进行模型预览。如何对浏览器设置跨域，参考常见问题说明。

3.2 2D预览集成：

2D或其它种类Viewer集成方式与上述一致，需要注意的是，不同类型的Viewer是单独的文件资源。