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

这一章节中，我们将给大家介绍模型时如何在M3D中显示出来的

相关基础对象​

场景：M3D中对应Scene对象，相当于情景剧中的舞台。场景主要包含视口对象、相机、灯光等数据，我们通过设置不同的参数可以呈现模型的不同效果。

视口：在M3D中对应Viewport对象，与HTML中的canvas相对应。

窗口：即HTML中的canvas标签，用于呈现我们的模型的画布。

单视口​

   单视口适用于对模型的单一形态进行浏览，我们可以使用单视口的显示方式。单一视口对应单一显示窗口。

  1. 创建canvas标签

在.html文件的<body>节点下创建一个<canvas>的标签，并为canvas设置唯一的ID。

<canvas id="sview" style="width:100%; height:100%; position:absolute;"></canvas>
  1. 创建场景并绑定视口对象

   创建一个Scene对象，获取在html文件中创建的canvas窗口对象，并将scene对象与canvas对象通过视口对象viewport进行绑定。

示例代码如下：

 createView(){
    // 创建M3D场景对象
        var scene = new M3D.Scene(); 
        //获取demo.html中 标签ID为"sview"的HTMLCanvasElement
        var renderCanvas = document.getElementById("sview"); 
        //创建基于canvas的M3D视口对象
        let viewport = new M3D.Viewport(renderCanvas，scene); 
    }
window.load{
    createView();
}

运行结果：

多视口​

   多视口适用于观察单一模型的不同视角或渲染效果。我们可以通过单窗口多视口或多窗口多视口的方式。多个视口对应一个显示窗口或者多个视口分别对应各自的显示窗口。

  1. 单窗口多视口的方式    重复单视口的步骤，我们再来添加一个视口，同样的将canvas窗口对象和scene对象进行绑定，并为每个视口设置不同的tag值以便于场景做区分，同时我们还需要为每个视口设置自己的相机。

示例代码如下：

createView(){
    // 创建M3D场景对象
    var scene = new M3D.Scene(); 
    //获取demo.html中 标签ID为"sview"的HTMLCanvasElement    
    var renderCanvas = document.getElementById("sview");  
    //创建基于canvas的M3D视口对象     
    let viewport = new M3D.Viewport(renderCanvas，scene); 
    let viewport1 = new M3D.Viewport(renderCanvas，scene); 
    
    viewport.tag = 1;
    viewport1.tag = 2;

    var viewports = scene.getViewPorts();
    //将视口对象添加到场景对象中，并设置标识为0
    viewports.addViewport(viewport);
    viewports.addViewport(viewport1);
    }
window.onload = function () {
 createView()；
 }

运行结果：

  1. 多窗口多视口的方式

   我们还可以通过添加多窗口多视口的方式来展示同一模型的不同效果。步骤与单窗口多视口类似，区别在于每个视口依赖各自的窗口来呈现。

示例代码如下：

createView() {
 // 创建M3D场景对象
   var scene = new M3D.Scene(); 
   //获取demo.html中 标签ID为"sview"的HTMLCanvasElement    
   var renderCanvas = document.getElementById("sview");  
   var renderCanvas1 = document.getElementById("sview1"); 
   //创建基于canvas的M3D视口对象     
   let viewport = new M3D.Viewport(renderCanvas，scene); 
   let viewport1 = new M3D.Viewport(renderCanvas1，scene); 
   
   viewport.tag = 3;
   viewport1.tag = 4;

   var viewports = scene.getViewPorts();
   //将视口对象添加到场景对象中，并设置标识为0
   viewports.addViewport(viewport);
   viewports.addViewport(viewport1);
   }
}
window.onload = function () {
createView()；
}

运行结果：

显示多文档​

   多文档的适用于在同一个页面中查看不同的模型。每个场景对应各自的视口及窗口对象。

   我们创建两个场景，分别展示不同的模型文件，每个场景绑定自己的canvas对象和视口对象，并拥有各自的读取器和渲染器。具体操作如下：

createView () {
 // 创建M3D场景对象
   var scene0 = new M3D.Scene(); 
   var scene1 = new M3D.Scene(); 
   //获取demo.html中 标签ID为"sview"的HTMLCanvasElement    
   var renderCanvas = document.getElementById("sview2");  
   var renderCanvas1 = document.getElementById("sview3"); 
   //创建基于canvas的M3D视口对象     
   let viewport = new M3D.Viewport(renderCanvas，scene0); 
   let viewport1 = new M3D.Viewport(renderCanvas1，scene1); 
   
   viewport.tag = 5;
   viewport1.tag = 6;

   var viewports = scene.getViewPorts();
   //将视口对象添加到场景对象中
   viewports.addViewport(viewport);
   viewports.addViewport(viewport1);
   }
}
window.onload = function () {
createView();
}

运行结果：

显示3D模型文件​

   不同格式的模型文件内部文件结构也不同，所以需要使用不同的读取器来处理。svlx模型的读取器为SvlxReader，stl模型的读取器为StlReader，obj模型的读取器为ObjReader。读取器的本质都是解析模型文件的字符串，所以我们也可以用自己设计的读取器来读取模型文件，在后面章节我们会详细介绍这部分。

  1. svlx模型
M3D.Loader.addReaderOption("svlx", Reader.LocalSvlxReader/Reader.WebSvlxReader); 
scene.addFile("./models/jiheti.svlx");

LocalSvlxReader为采用整体加载模式读取svlx模型文件。 WebSvlxReader为采用流模式读取svlx模型文件。 2. stl模型

M3D.Loader.addReaderOption("stl", Reader.StlReader);
scene.addFile("./models/123.stl");
  1. obj模型
M3D.Loader.addReaderOption("obj", Reader.ObjReader);
scene.addFile("./models/123.obj");

服务器端3D文件

//TODO

示例代码如下：

createView() {
.....
}
addFile(){
M3D.Loader.addReaderOption("svlx", Reader.LocalSvlxReader);

      scene.render.default.drawer = new Render.Drawer();
      var camera = viewport.getCamera();
      var camera1 = viewport1.getCamera();

      scene.addFile("./models/jiheti.svlx")；
      });
}
window.onload = function () {
createView();
addFile();
}