跳到主要内容
版本：v10.0

  本章节主要讲述在Visual Studio 2019 中如何快速开发一个M3D的应用，旨在让开发者快速了解M3D的整体框架结构及HTML页面中展示3D模型的流程。

创建项目​

  1. 启动Visual Studio，选择 创建新项目

  1. 选择创建TypeScript或JavaScript 的空白Node.js应用程序

  1. 填写项目名称、项目存放位置，然后点击创建。即可生成对应的项目

4. 创建成功后项目结构如下：

  • npm文件夹存放项目运行所依赖的库；
  • package.json为项目描述文件，包含项目名称、版本、入口文件等相关信息；
  • service.js配置服务相关信息。

创建显示页面​

   在工程的项目条目上右键选择 添加--> 新建项 ，创建demo.html。

添加M3D库​

  1. 在项目根目录下创建lib文件夹，将库文件m3d.js和jszip.min.js拷贝到该文件夹中。

  2. 项目右键选择 添加 --> 现有文件夹，将lib文件夹添加到项目中。

  3. 在demo.html中使用<script> 标签引用库文件。 

<script src="./lib/m3d.js"></script>
<script src="./lib/jszip.min.js"></script>

搭建3D场景​

  1. 在demo.html文件的<body>标签下增加id为“view”的<canvas>标签
<canvas id="view" style="width:100%; height:100%; position:absolute;"></canvas>
  1. 创建M3D场景对象
var scene = new M3D.Scene();
  1. 基于canvas创建M3D的视口对象
var renderCanvas = document.getElementById("view");
let viewport = new M3D.Viewport(renderCanvas，scene);

加载3D模型​

  一般来说，为了安全起见，浏览器是不能通过load方法来加载本地文件的，load方法只能加载远程服务器上的文件。

  为方便在本地服务器运行项目时查找模型，我们将要展示的模型文件放在项目工程的根目录下。当然我们也可以将模型文件放在我们搭建的远端服务器上，然后通过网络请求的方式来加载模型文件。

编写模型显示逻辑​

   首先我们新建一个js文件，用于编写我们的模型显示逻辑，取名为view.js,调用调用scene的addFile()接口来打开一个3D模型文件。

scene.addFile(modelfilePath);

其中modelfilePath为服务器地址+模型路径，如http://localhost:1337/jiheti.svlx

在HTML页面中增加调用处理​

鼠标操作3D模型​

  窗口对象增加对鼠标抬起、按下、移动操作的监听逻辑，并在监听方法内处理视口的相关操作。就可以轻松实现对模型的旋转、平移、缩放等操作。

//绑定鼠标按下操作事件
renderCanvas.addEventListener("mousedown", (e) => {});

//绑定鼠标移动事件
renderCanvas.addEventListener("mousemove", (e) => {});

//  绑定鼠标抬起事件
renderCanvas.addEventListener("mouseup", (e) => {});

//  绑定鼠标中键事件
renderCanvas.addEventListener("mousewheel", (e) => {});

HTML文件示例代码如下：

<html>
<head>
 <meta charset="utf-8" />
 <script src="./lib/m3d.js"></script>
 <script src="./lib/jszip.min.js"></script>
 <title></title>
</head>
<body>
 <canvas id="view" style="width: 200px; height: 200px; position: relative"></canvas>
 <script>
 window.onload = function () {
 //创建M3D场景对象
 var scene = new M3D.Scene();
 //获取demo.html中 标签ID为"view"的HTMLCanvasElement
 var renderCanvas = document.getElementById("view");
 //创建基于canvas的M3D视口对象
 let viewport = new M3D.Viewport(renderCanvas, scene);
 //添加显示模型
 scene.addFile("http://localhost:1337/jiheti.svlx");
    }
 //绑定鼠标按下事件
 renderCanvas.addEventListener("mousedown", (e) => {
   var mep = new M3D.MouseEventArgs(M3D.InputEventType.INPUTEVENT_MOUSE_DOWN, e);
   viewport.input.mouseDown(ep);
   });
   //绑定鼠标移动事件
 renderCanvas.addEventListener("mousemove", (e) => {
   var mep = new M3D.MouseEventArgs(M3D.InputEventType.INPUTEVENT_MOUSE_MOVE, e);
   viewport.input.mouseMove(ep);
   });
   //  绑定鼠标抬起事件
 renderCanvas.addEventListener("mouseup", (e) => {
    var mep = new M3D.MouseEventArgs(M3D.InputEventType.INPUTEVENT_MOUSE_UP, e);
    viewport.input.mouseUp(ep);
    });
     //  绑定鼠标中键事件
   renderCanvas.addEventListener("mousewheel", (e) => {
   var mep = new M3D.MouseEventArgs(M3D.InputEventType.INPUTEVENT_MOUSE_DOWN, e);
   viewport.input. mouseMove(ep);
   });
</script>
</body>
</html>

运行结果​

   我们通过搭建本地服务器的方式来启动我们的演示项目:

  1. 启动node服务器，打开demo.html查看显示效果。
  2. 将创建内容部署到IIS服务器中，打开demo.html查看显示效果。
  3. 借助python等工具在工程目录下启动本地服务：在DOS里cd到准备做服务器根目录的路径下，输入命令：python -m Web服务器模块 [端口号，默认8000]

  在接下来的章节中我们将会系统介绍M3D中的关键元素。旨在让开发者进一步了解M3D，对以后的具体开发起到一定的指导作用。