快速接入

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	-
initLoad()	Function	模型加载完成后的通知	-
loadFaild()	Function	模型资源加载错误	-
initAloneModel(cc)	Function	独立入口时单击了导入文件时触发	cc：回调函数，传值模型地址并执行，即可在独立入口初始化模型
insertModel()	Function	动画工具单击了导入模型时触发	-
publishAniModel({na me, jsBlob, path})	Function	动画工具单击保存模型时触发。业务端会收到回调信息，将文件流jsBlob解压到保存地址path，轻量化文件的动画即制作完成	jsBlob：动画发布的文件 path：动画发布文件的保存路径
extendHttp	String	外部辅助模型库的域名地址。不传值时，会默认读取根目录资源包的extend文件夹，文件结构包含：extend.json用来模型描述模型文件信息，以及同级对应的轻量化模型文件，详情参考资源包内容。	-

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" //轻量化文件所在文件夹路径
});

2.4 修改外部辅助模型库配置

辅助文件目录结构：

├── extend   			 辅助文件存放目录  
│   └── models			模型文件存放目录	
│   └── images			图标存放目录
│   └── extend.json		辅助文件配置

辅助文件配置/extend/extend.json

{
  	//模型配置
    "models": [ 
        {
          	//类名  为空时显示“默认”
            "categoryName": "工具",
          	//数据
            "categoryData": [
                {
                  	//名称  为空时显示“未命名”
                    "name": "螺丝",
                    //轻量化文件地址  必填
                    "url": "./models/螺丝/0/model.js",
                  	//缩略图地址  为空时显示默认图片
                    "thumbnailUrl": "./models/capture.png"
                },
                {
                    "name": "螺母",
                    "url": "./models/螺母/0/model.js",
                    "thumbnailUrl": "./models/螺母/capture.png"
                },
                {
                    "name":"扳手",
                    "url":"http://10.122.90.120:5500/extend/models/扳手/0/model.js",
                    "thumbnailUrl":"http://10.122.90.120:5500/extend/images/xd.png"
                }
            ]
        }
    ],
      //图标配置
    "images": [
        {
          	//类名 为空时显示“默认”
            "categoryName": "图标",
            //数据
            "categoryData": [
                {
                  	//名称 为空时显示“未命名”
                    "name": "图标1",
                  	//图片地址 必填
                    "url": "http://10.122.90.120:5500/tools/xd.png"
                },
                {
                    "name": "图标2",
                    "url": "http://10.122.90.120:5500/tools/xd1.png"
                }
            ]
        }
    ]
}