美文网首页
three.js之模型的加载与使用

three.js之模型的加载与使用

作者: sakatayui酱 | 来源:发表于2017-07-18 22:30 被阅读0次

    今天我们来了解一下模型

    1.模型的基础知识

    既然three.js是JS编写的WebGL第三方库,那这里肯定说的就是3D模型。

    在3DMAX,MAYA等软件(这是一些三维编辑软件)中,可以制作出3D模型。这些模型可用于室内设计,三维影视,三维游戏等领域。我理解的3D模型的定义是:

    3d模型就是三维的、立体的模型

    3D模型由顶点(vertex)组成,顶点之间连成三角形或四边形(在一个平面上),多个三角形或者四边形就能够组成复杂的立体模型。

    用我以前做过的莲花作为栗子吧:

    莲花3d模型 概念总是那么难以理解,我们不做深抠概念的学究

    2.怎么看模型?模型查看器有哪些?

    我们怎么看模型呢?我们在编写程序之前,总是希望先看到一些实际的场景,这样,当我们写起程序来,才会有一些感觉。

    我们可以下载3DMax,或者Maya之类的,但是这些软件太过专业,对于我们来说不好驾驭。

    所以在在工程领域,我们一般使用一些轻量级的查看器,如Blender、ParaView之类的。

    3.模型在three.js中的表示

    我们的最终目的是要讲解怎么将模型导入three.js中,让three.js能够显示我们的模型。

    模型是由面组成,面分为三角形和四边形面。三角形和四边形面组成了网格模型。在Three.js中用THREE.Mesh来表示网格模型。THREE.Mesh可以和THREE.Line相提并论,区别是THREE.Line表示的是线条。THREE.Mesh表示面的集合。

    好的,让我们来了解一下THREE.Mesh,它的构造函数是:

    THREE.Mesh = function ( geometry, material )

    第一个参数geometry:是一个THREE.Geometry类型的对象,他是一个包含顶点和顶点之间连接关系的对象。

    第二个参数Material:就是定义的材质。有了材质就能够让模型更好看,材质会影响光照、纹理对Mesh的作用效果。

    4.模型的加载

    在three.js中,模型是怎么加载到浏览器中的呢?

    顺序是:

    1、服务器上的模型文件以文本的方式存储,除了以three.js自定义的文本方式存储之外,当然也可以以二进制的方式存储,不过这里暂时不讲。

    2、浏览器下载文件到本地

    3、Javascript解析模型文件,生成Mesh网格模型

    4、显示在场景中。

    有几点要重点说一下:

    1、服务器上的模型文件大多是存储的模型的顶点信息,这些信息可以以文本的方式存储的(并不一定需要用文本的方式存储)。Three.js支持很多种3D模型格式,例如ply,stl,obj,vtk等等。随着three.js的升级,会支持越来越多的文件格式,到目前为止,three.js已经能够支持市面上大多数3D模型格式了。

    同时需要重点说明的是,如果认真理解完three.js对模型的加载、解析方法,那么写一种自己的3D文件解析器是非常便利的。

    2、第二步是浏览器下载文本文件,这是一件很普通的事情,只需要使用javascript的异步请求就可以实现了。

    3、Javascript解析文本文件并生成一个geometry,最终生成Mesh,也是一件简单的事情。我们会在后面介绍这个过程。

    4、当产生Mesh后,将其加入到场景中,那就非常简单了。

    以上就是我对模型初步的了解~还有不足 多多指教

    相关文章

      网友评论

          本文标题:three.js之模型的加载与使用

          本文链接:https://www.haomeiwen.com/subject/pnckkxtx.html