本章节主要讲述在Visual Studio 2019中如何快速搭建一个基于SViewFrame开发的应用，旨在让开发者快速了解SViewFrame的整体结构以及在HTML页面中集成SViewFrame并显示3D模型的流程。
创建新项目
若在已有项目上集成，可跳过此步，直接 添加SViewFrame库
- 启动Visual Studio，选择 创建新项目
- 选择创建TypeScript或JavaScript 的空白Node.js应用程序
- 填写项目名称、项目存放位置，然后点击创建。即可生成对应的项目
4. 创建成功后项目结构如下：
- npm文件夹存放项目运行所依赖的库；
- package.json为项目描述文件，包含项目名称、版本、入口文件等相关信息；
- server.ts为配置服务相关信息；
- tsconfig.json为ts工程打包相关配置文件。
-
创建HTML页面
在项目的工程名称位置点击鼠标右键，选择添加->新建项，创建HTML文件：
添加SViewFrame库
- 将库文件sview.frame.min.js和jszip.min.js拷贝项目所在的路径下，也可在Visual Studio中对应的项目上使用右键添加的方式进行导入，导入后的项目结构大致如下：
- 在项目的HTML页面中使用script标签引用库文件
<script src="./lib/sview.frame.min.js"></script>
<script src="./lib/jszip.min.js"></script>
完成上述步骤，我们就把SViewFrame库集成到我们的项目中了，接下来，我们在页面中HTML创建场景，展示模型。
创建3D显示页面
- 在demo.html文件的增加名为"sview_1"的div标签，并设置宽度和高度等信息。
<div id="sview_1" style="width:100%;height:100%;position:absolute;background-color:aliceblue;z-index:0;user-select:none;overflow:hidden"> </div>
- 添加javascript逻辑，并在文档就绪函数中创建SViewFrame对象。
window.onload = function () {
//初始化多语言
initView();
//初始化页面
sview0 = new Main("sview_1");
//加载UI
let uiManager = sview0.sviewFrame.getUIManager();
uiManager.load(RightMenu);
uiManager.load(RightClickMenu);
uiManager.load(RightClickSelectMenu);
uiManager.load(RightClickSelectMeasureMenu);
uiManager.load(RightClickSelectAnnotateMenu);
rightClickMenu(availableRightMenuClick);
//配置打开命令 的参数，调用打开命令打开文件
let array = new Map();
array.set("fullClassName", "SView.Commands.OpenCommand");
let commandsManager = sview0.sviewFrame.getCommandsManager();
let openCommand = commandsManager.getCommand(SView.Commands.CommandNames.OPENSAMPLEFILE, array);
// modelfilePath为服务器地址+模型路径，如http://localhost:1337/jiheti.svlx
openCommand.path = "modelfilePath";
}
//初始化各个控件库
function initView() {
initRightMenu();
initRightClickMenu();
window.sviewFrameDiv = document.getElementById("sview_1");
}
- 在HTML页面中增加调用处理
运行结果
- 在运行工程之前，需要将项目工程下的server.ts文件修改一下，将运行时默认显示页面指向demo.html。
var express = require('express'); //添加express引用
var hogan = require('hogan-express'); //添加hogan-express引用
const port = process.env.port || 1337; //设置端口号
var app = new express();
app.set('views', __dirname);
app.set('view engine', 'html');
app.use(express.static(__dirname));
app.engine('html', hogan);
app.listen(port);
app.get('/', function (req, res) {
res.render('demo.html'); //渲染我们的demo.html页面
});
- 在项目工程名称位置点击鼠标右键，选择设为启动项目
- 点击Visual Studio工具栏中Web 服务器(Google Chrome)即可运行当前工程。 这个时候运行项目的话你会发现，服务并不能正常启动： 需要我们安装对应的两个npm包："express"和"hogan-express" 运行以下命令：
npm install express hogan-express
- 安装完成后再去运行工程，会自动启动浏览器并访问demo.html，在浏览器中可以看到我们打开的模型，并可以通过鼠标对3D模型进行平移缩放旋转这些基本操作。运行结果如下：