快速接入

1. 快速入门

1.1 将 Viewer 资源包存放到业务端项目中

资源包截图如下：

1.2 创建网页集成 Viewer 资源

代码参考如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable= 0" name="viewport">
    <title></title> 
</head>
<body>
    <!-- 用于放模型展示的iframe ，id不能修改 --> 
    <divid="iframeDiv"> </div>
</body>
<!-- 引入公共控制类，用于控制模型外部数据传递--> 
<script src="viewer.js"></script>
<script>
    window.onload = function () { 
        nd_viewCtrl.init({
        src:"./models/bim" //轻量化⽂件所在⽂件夹路径 
        });
    }
</script> 
</html>

1.3 加载模型

在 window.onload 事件中调用控制类方法 nd_viewCtrl.init 即可进行模型加载。

1.4 控制类方法和对外方法详细说明

Table 1. 控制类方法详细说明
属性	类型	说明	回调参数
src	String	初始化模型地址，独立入口不用赋值	-
init(opt)	Function	初始化模型	opt：业务端可传入定义的参数用于修改控制类属性
hidebtnCfg	Arrary	配置隐藏功能按钮导入： #ico-import 保存：#ico-publish	-
title	Object	设置动画设计工具的标题内容	-
unExistIds	Arrary	用于设置主文件不渲染的节点值是由节点的objectid组成的数据使用方式参考src	-
renderKey	String	动画工具授权key值	-
initLoad()	Function	模型加载完成后的通知	-
loadFaild()	Function	模型资源加载错误	-
initAloneModel(cc)	Function	独立入口时点击了导入文件时触发	cc：回调函数，传值模型地址并执行，即可在独立入口初始化模型
insertModel()	Function	动画工具点击了导入模型时触发	-
publishAniModel({na me, jsBlob, path})	Function	动画工具点击保存模型时触发。业务端会收到回调信息，将文件流jsBlob解压到保存地址path，轻量化文件的动画即制作完成	jsBlob：动画发布的文件 path：动画发布文件的保存路径

Table 2. Viewer对外方法详细说明
属性	类型	说明	入参	返回值
nd_insertModel (url,unExistIds)	Function	导入/替换模型	url: 模型地址 unExistIds:[] 不存在节点的objectid集合	-
nd_publishAniSuccess()	Function	通知动画工具发布成功	-	-
nd_publishAniFaild()	Function	通知动画工具发布失败	-	-
nd_publishAniClear()	Function	清除动画工具发布状态	-	-

1.5 动画工具与业务端交互流程图

2. 集成功能示例

2.1 修改插入文件地址

支持修改保存发布的动画数据的插入文件地址，从导出的动画文件包中找到 aniFileUrl.js 文件，编辑 url 地址。

下面是 aniFileUrl.js 文件内容，注意仅 url 地址可修改，其它字段仅用于查看，切不要修改。

[
    {
        "name": "地球仪 .SLDASM",               //模型名称，不可修改
        "url": "./models/地球仪/0/model.js",    //模型轻量化文件地址，可修改
        "modelId": 1,                           //模型文件id ，不可修改
    },
    {
        "name": "曲面模型.par",
        "url": "./models/11/0/model.js",
        "modelId": 0,
    }
]

2.2 设置标题内容

//先设置，再加载模型

//设置标题内容
nd_viewCtrl.title = {
    //text和logo只需要设置一个，两者同时都做设置时， logo生效

    //设置标题文字和文字样式
    text:{
        content:"动画设计工具 ",          //文字  为空时文字样式设置不生效
        color: 'rgb(255, 255, 255)',      //颜色
        fontFamily: 'Microsoft YaHei UI', //字体  SimSun、Aria
        fontSize: '18px',                 //大小  值范围：8-48区间整数
        fontWeight: 'bold',               //粗细  normal、bold
        fontStyle: 'normal',              //斜体  normal、italic
        opacity:1                         //透明度  值范围：0-1区间整数或者1位小数
    },
    //设置标题logo和logo样式
    logo:{
        src:"https://web.tuzhitong.com/img/logo.png",//logo图标地址
        height: '48px',                  //图标高度    值范围： 8-48区间整数
        opacity:1                        //图标透明度  值范围： 0-1区间整数或者1位小数
    },
};
//加载模型
nd_viewCtrl.init ({
    src:"./models/bim" //轻量化文件所在文件夹路径 
});

2.3 设置主文件不渲染的节点 (unExistIds)

//先设置，再加载模型

//设置主文件不存在节点
nd_viewCtrl.unExistIds= ["_85_65", "_6_2", "_13_5"];//值是由objectid组成的数组

//加载模型
nd_viewCtrl.init ({
    src:"./models/bim" //轻量化文件所在文件夹路径
});